去用吧！

当之前有垂直相邻的元素时，在微信小程序中会展示，即两个元素均匀分布，不遵循折叠规则；

标签属性无效（已在v0.10中修复）；

某些情况下，同级元素标签的优先级会出现问题，比如当同级标签A、B通过某种调整，使得A元素的位置有重叠，那么微信IDE解析出来的效果是A的内容和背景色会覆盖住B元素重叠的部分（普通浏览器解析应该是B覆盖A）；

如果使用模板+列表渲染的方式来渲染数据，模板中列表渲染使用的{{item}}是无效的，无法正确识别。所以在渲染列表的时候，需要把复用的部分写在列表渲染的代码块中（属于数据渲染部分，后面会提到）。

在微信 IDE 的后续迭代中，上述列表中的部分问题已被修正，因此此列表可能已过时。您也可以根据实际情况自行尝试。

接下来我会对演示中使用的一些部分进行讲解。

开始实际开发

1. 列表式数据渲染

类似于“首页”、“发现页”标准的列表式数据展示方式，微信提供了很好的解决方案：列表渲染。

可以直观的看到for循环使用结构来渲染一组数据：

顶部的发现页面和通知页面等顶级自定义内容也是使用 for 呈现的。

2. 顶层实现

微信只提供了底部，上面的部分要自己写哦~

最上层的实现是列表渲染和JS协调。

示例 WXML 代码：

JS代码：

由于微信不支持使用DOM访问对象，即不支持DOM和对象，所以实现上依赖于微信提供的视图层的展示逻辑以及视图与数据的绑定机制。

绑定点击事件来改变数据属性的值，从而控制元素类的改变（从而改变样式等）。

3.幻灯片

以下是实现的WXML代码：

JS代码：

轮播的实现使用了微信提供的组件，组件提供了各种属性选项，包括常用的比如时间等。

-item 里面包含了轮播的所有图片，为了方便修改图片数据，也使用了for渲染和绑定数据的方式。

4.下拉刷新、上拉加载、数据请求

刷新、继续加载的动作依赖于-view标签和其支持的事件。

标签的属性提供了和来绑定滚动到顶部和底部触发的事件，并且-和-可以调整触发时与边框的距离。

除上述内容外，小程序API还提供了水平滚动、滚动触发事件、设置滚动条位置等接口。

当滚动到顶部或者底部的时候，会触发数据加载事件，应该调用微信提供的网络请求API来获取数据。

但是坑爹的是，当我选择编写模仿知乎的demo时，没有注意到知乎并没有提供开放API，而微信的API也不支持直接本地请求JSON文件。

无奈之下，我选择在JS文件中伪造一段数据，并使用.抛出伪造数据请求的方法：

由于是假数据，本demo并不具备真正的参数跳转，查询等功能。

在加载数据的同时，也用到了微信提供的动画函数wx.ding()。

5. 其他

6. 后续行动

其实还有很多组件和API没有用到，这个demo后面可能会再更新，看懒癌妹病情的严重程度了。

有点感觉

其实作为一个小前端，由于工作原因，对MVVM的使用其实很少。

不过写完这个微信小程序demo之后倒是能理清一下这方面的思路了，当然写完再回头看，还有很多不足，很多地方显然可以换一种写法。

毕竟是我第一次尝试用一些新鲜刺激的东西写一个小demo，也是第一次尝试写教程...或者说是记录？~~

~希望自己除了写代码之外，还能在码文这条路上多走走，毕竟我想当一个码仙子\（≧∀≦）ゞ

项目地址：