为了账号安全,请及时绑定邮箱和手机立即绑定

两周撸一个掘金微信小程序

声明

这并不是掘金官方小程序(貌似没有搜到掘金 APP 对应的官方小程序),完全为第三方开发者开发,仅用于学习交流,禁止用于其他用途。若要使用官方正版,可访问掘金 官方网站,或下载掘金官方 APP,或访问掘金官方其他途径。

该小程序所有 API 均来自掘金官方 web 网站和官方 AndroidAPP(以 web 为主),UI照抄参照的掘金官方 AndroidAPP(ver 5.4.3)。部分静态资源(icon、图片等)直接从掘金官方 apk 里拷出来的。

该小程序代码已开源,点击可查看源码,可随意 star。也可以先扫描下方的小程序码直接体验。

利益相关

具体实现

前段时间写了一个简单的小程序 QuietWeather源码在这里,具体实现相关可查看这篇文章:两天撸一个天气应用微信小程序。但是这个 掘金小程序QuietWeather 完全不是一个数量级的,说完具体实现,天都黑了(其实也没什么好说的),这里直接上效果图,感兴趣的可以 查看源码 。实际体验可扫描上面的小程序码。

效果图

对应页面可打开掘金官方 APP 对比

PC 开发者工具录制,会有些卡顿

文章数据入口调整了,也保留了动画,请酌情忽略 gif 卡顿

完成度

APP 里面的东西实在是不少,包括页面和交互,要完全照抄实现确实需要一些时间和精力,UI 之类的都是简单测量+肉眼调试实现的,下面列出页面和交互的完成度,这里应该只是列出了绝大部分(还是上面那句话,APP 里面的东西实在是不少),未列出、未实现的后续会根据时间、精力来实现。

实际完成度请以代码为主(线上小程序也会持续更新)。

页面完成度

貌似不支持 markdown 待办事宜写法?QAQ

  • 启动页
  • 登录、未登录跳转逻辑和页面数据刷新逻辑等
  • HOME、搜索、沸点、小册 TAB 涉及到的上拉、下拉刷新
  • POST、ENTRY(文章类型不同) 详情页
  • HOME TAB
    • 首页
      • 热门推荐
      • 下部列表
    • 标签展示相关
  • 搜索 TAB
    • 顶部轮播
    • 热门文章
    • 搜索功能相关
    • 本周最热
    • 收藏集
    • 活动
  • 沸点 TAB
    • 推荐
      • 顶部热门沸点
      • 沸点列表
      • 沸点详情
    • 话题
    • 动态
    • 发布沸点
  • 小册 TAB
    • 小册列表
    • 小册详情
  • 我的 TAB
    • 个人主页
      • 文章数据
      • 编辑
      • 关注、被关注列表
      • 动态页
      • 沸点页
      • 原创文章页
      • 收藏集
        • 收藏集详情页
      • 喜欢的文章
      • 关注的标签
        • 标签详情页
    • 我喜欢的
    • 收藏集
    • 已购小册
    • 赞过的沸点
    • 阅读过的文章
    • 标签管理
      • 已关注标签
      • 所有标签
        • 推荐标签
        • 所有标签
    • 夜间模式
    • 意见反馈(和官方 APP 有差异,这里是个简单的关于页)
    • 设置
  • 登录页
  • 注册页
  • 修改密码页
  • 其他完成部分…
  • 未完待续部分…

交互完成度

评论、留言、关注、添加到收藏集、喜欢、发表沸点等暂时均没有实现,因为 APP 里面的东西实在是不少…

  • 评论
  • 留言
  • 关注
  • 喜欢
  • 未完待续部分…

说明

  • 1、话说掘金的 API 域名(二级)真是多啊,小程序后台域名白名单最多只能配 20 个,现在已经占了 16 个了,感觉要完整抄完实现掘金 APP 版小程序,配额不够啊。不行的话,就只能搭个 server 代理了;
  • 2、个别接口只有 APP 用到了,请求字段需要按照 web 的略作调整;个别接口也要设置对应的 header
  • 3、文章详情页返回的是整片文章的 html 格式的 content,这里使用的是开源的 wxParse 进行富文本解析;
  • 4、由于小程序的限制,第三方的 url 不能在 webview 中打开,所以文章里面的外链能点开算我输;
  • 5、开发时,个别细节需要稍微注意,比如:沸点 tab 页,如果已经滑到了顶部,onShow 获取新数据,否则,不刷新;未登录时,首页 APP 调用的 API 是 get_recommended_entry就是懒为了方便小程序里仍然使用 get_entry_by_timeline;其他的不一一赘述,详情可 查看源码
  • 6、由于账号权限等问题有些 API 需要天时地利人和,部分 API 返回的数据格式没有拿到,所以对应的页面也没有写,比如:系统消息页面(最近一直没有系统消息)等;
  • 7、部分数据可能未完全覆盖,比如:用户消息这块,目前列举出的 categorycollectioncommentfollowcomment-likepin-likepin-comment,可能还会有其他消息类型,遇到了会一一补上;还有动态页,也是同样的问题;可能还有其他没有完全覆盖的数据;
  • 8、点击某些文章进入详情页会提示 illegal token,亦或文章没有正常显示出来,应该是请求参数需要略作调整,或者文章类型需要判断。类似这样的小问题,后续会调整补充;
  • 9、小程序(非小游戏)在于一个 字,应该是一个应用的浓缩精华版,而不应该是一个内容丰富多彩的 APP100% 的复制版,这样会显得比较臃肿,此处应该有 but,该小程序仅仅是出于学习交流的目的,所以这个问题不在我们的考虑范围内;
  • 10、登录现在只能手机号登录,邮箱登录给忘记了,回头一并加上;
  • 11、我也是有人生梦想的人;

转载请注明出处


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
5
获赞与收藏
58

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消