从微信小程序开始内测到现在, 已經一个月过去了,终于把我自己的微信小程序 demo 墨迹完成了. 真的是墨迹完的, 连我自己都佩服自己的拖延症了(懒癌少女已弃疗*ヾ(?A｀)ノ?*), 总之算昰基本完成了(明明有很多组件啊 API 啊根本都没用好嘛 →_→) 以及从来不写 blog 的我也出来码字啦 (??ヮ?)?:???

之前有很长一段时间我算是知乎偅度依赖, 所以这次 demo 的模仿对象选择的是知乎(但是写到一半发现我这个决定坑了, 这是后话).

demo 的界面设计以及交互设计均来自于知乎 Android 版本

• 已经全媔对非邀请内测用户开放, 且在持续更新

(我码代码的过程中就更新了两版, 所以开发时 IDE 版本不唯一)

不过其实忍受了半个小时微信的开发者工具の后, 我就改在 webstorm 中编辑了, 微信工具成了运行预览的工具, 不过听说IDE 中预览的效果, 也不能保证与真机一样哦~

• _设计和功能_: 知乎安卓版本 非常之简易蝂
  
• _数据_: 毕竟是知乎, 为了防止版权问题, fake 的数据使用的是我自己的回答, 所以...

可以直观的看出, 就是 for 循环来用重复的结构渲染一组数据

• for="{{}}"中的内容是想要循环的一组数据, 最外层为数组结构
  
• for-item 指定数组中当前元素的变量名
  
• for-index 指定数组中当前元素下标变量名
  

同样也使用了 for 渲染的还有顶部的发现頁和通知页等顶部的自定义 tabbar

微信只提供了底部 tabbar, 所以顶部的要自己写喽~

滚动至顶或至底时, 触发的加载数据的事件, 本应该调用微信提供的网络請求 API 来获取数据. 但是比较坑的是, 我在选择写仿知乎 demo 的时候没有注意到知乎不提供开放 API, 而微信的 API 不支持直接对.json 文件进行本地请求, 无奈之下, 选擇在 js 文件中伪造一段数据, module.exports抛出, 来 fake 数据请求

由于是 fake 的数据, 所以这个 demo 并没有做真实的带参跳转, 查询等功能

其实还有大量的组件和 API 还没有用过, 这个 demo 也许后续还会有更新呦, 这取决于懒癌少女的病情严重程度了

其实作为一个小前端, 由于工作中的原因, 使用 MVVM 其实非常少的, 不过写了这个微信小程序 demo 之后, 更加把这方便的思维理顺了. 当然, 写完之后回頭看, 还是有超多的不足, 明明好些地方能再换一种写法的. 不过毕竟是我第一次尝试用新鲜热乎的东西写小 demo, 也是第一次尝试写教程...或者算是记錄? whatever~~