转眼微信小程序已经发布了好几个月了，虽然只有最开始的一个月能够称得上是火爆，但是最近微信对于小程序开放了许多新功能，显然对于小程序还是没有放弃。所以在最近几天制作了一个基于微信小程序的小项目:蜗牛慢读。一款阅读类的小程序，制作它的主要目的是为了熟悉微信小程序的组件和API还有语法等，顺便在开发过程中练习一下自己的前端基础技能。

GitHub地址：https://github.com/Harrison94pxxxxx/woniumandu 感兴趣的同学可以clone到本地在微信开发者工具中配置并运行查看效果。如果觉得对你有帮助的话可以顺手点一下star (￣▽￣)~*。

因为该小程序比较简单，所以就不把组件一个一个拆分记录，只在这里记录我在开发过程中比较注意的点。

项目效果图：

首页

1.png

界面展示

dsc_1.gif

换源及切换章节

dsc_6.gif

收藏小说功能

dsc_2.gif

搜索记录和推荐标签

dsc_3.gif

分类页

dsc_4.gif

排行榜

dsc_5.gif

1.首页的数据逻辑

我制作的第一个页面是Home也就是首页，首页主要功能是作为用户的书架，将用户收藏的小说封面、书名、作者显示在首页。最初我将首页要展示小说的名字存储在一个数组内，然后加载首页时遍历数组进行搜索，这样做虽然能够正常显示和交互，但是当我制作到后面的排行榜、分类组件时发现了一个问题：

当前的首页数据逻辑是 :首页存储即将要展示的小说名字，用户打开首页时通过搜索API请求数据，然后进行渲染。

但是随着用户所收藏的小说越来越多，每次打开首页时所需要请求的数据也越来越堵，随之带来的结果就是首页加载速度越来越慢。
后来我将首页的数据逻辑进行了修改:

修改后的首页数据逻辑：将首页所要展示的小说封面链接、书名、作者全部通过微信小程序的<pre>wx.setStorageSync(KEY,DATA)</pre>接口储存在微信的缓冲中，这样做极大的提升了首页的加载速度。

这个问题让我知道了一个软件的数据逻辑结构是非常重要的一部分，以后一定要先设计好数据流动的结构再开始写代码。

2.关于小说收藏功能的实现

处理流程： 打开小说详情页时获取微信缓存中的已收藏小说，然后遍历已收藏小说，将其Id与当前页面小说Id进行对比，如果没有相同的，则收藏按钮显示为“追小说”，如果有相同的Id存在，则收藏按钮显示为“不追了”(数据绑定)。但是在制作详情页面时也遇到一个问题，就是"追小说"按钮和"不追了"按钮的背景颜色是不同的，以往在遇到相似的情况时一般都直接对DOM进行操作，改变Css里面的background。但是，微信小程序里面是不能操作DOM的，所以只能给背景色绑定一个变量，通过操作这个变量去改变背景色。

3.兼容性问题

我一直认为兼容性问题是前端开发里面最难解决的，浏览器、分辨率的不通都会导致页面结构被破坏。虽然基于微信小程序的统一，安卓各种设备都使用了统一的浏览器，而且移动端应用相对于桌面端网页来说，页面的结构要简单得多，但是在开发过程中还是发现了好多奇奇怪怪的问题。最后在ios设备（小屏幕设备）上查看效果的时候（一开始一直是在安卓设备上查看实际效果的），发现完全和自己开始看到的不是同一个小程序，差异巨大。最后只能放弃继续调试。

4.微信小程序的列表传参

在实际开发的过程中我们往往会遇到这种情形：点击列表中的某一项，获取其index并传递到函数中。以往我们都是这样做的：<pre>
// Get the element
var element = document.getElementById("myDiv");
// Get the index
var _index = element.dataset.index;
</pre> 先给需要获取信息的元素自定义一个dataset然后再在点击的时候去获取。

而在MVVM模式下：
<pre>
<tr v-for="（list,index）in lists">
{{index}}
</tr>
</pre> 然后我们就可以在列表中直接使用index，将其传入所用函数中。

在微信小程序里面，我们需要使用e.currentTarget来获取注册了事件监听器的对象，从而再去通过它获取我们自定义的dataset。

5.写在最后

每次做实际项目的时候都会发现自己的很多不足，长路漫漫，希望能够在以后的学习中改进吧，给自己加油，哈哈(✧◡✧)