` **去使用！**
4. 元素之前有垂直相邻 margin 的时候，在微信小程序中会 double 显示，即两个元素的 margin 均摊开，不遵循 margin 折叠规则；
5. 标签 `hidden` 属性无效（v0.10.101400 中已修正）；
6. 部分情况下，平级元素标签优先级会出现问题。比如， 平级标签 A 与 B，当 B 通过某些调整向 A 元素位置相叠的时候，微信 IDE 解析出的效果是 A 的内容和背景色会覆盖 B 元素与之重叠的部分（普通浏览器解析应该是 B 覆盖 A）；
7. 如果用模板+列表渲染的方式来渲染数据的话，在模板中使用列表渲染的 `{{item}}` 是无效的，无法被正确识别。所以，列表渲染的时候，要把复用的部分写在列表渲染的代码块内（属于数据渲染部分，后面会提到）。
在后来，微信 IDE 的迭代中已经将上面清单中的一些问题修正了，所以这份清单有可能是过时的。大家也可以根据实际情况，自行尝试。
接下来，我将对于一些 demo 中写到用到的部分进行说明。
### 开始实战开发
**1. 列表式的数据渲染**
类似于「首页」以及「发现页」这种标准列表式的数据展现方式，**微信提供了很好的方案：列表渲染。**
```
{{item.feed_source_name}} {{item.feed_source_txt}}
{{item.question}}
{{item.answer_ctnt}}
{{item.good_num}} 赞同
关注问题
```
可以直观地看出，就是 `for` 循环用重复的结构渲染一组数据：
- `for="{{}}`“中的内容是想要循环的一组数据，最外层为数组结构
- `for-item` 指定数组中当前元素的变量名
- `for-index` 指定数组中当前元素下标变量名
同样也使用了 `for` 渲染的，还有顶部的发现页和通知页等顶部的自定义 tabbar。
**2. 顶部 Tabbar 实现**
微信只提供了底部 tabbar，所以顶部的要自己写喽~
顶部 tab bar 的实现在于 `for` 列表渲染以及 JS 配合。
实例 WXML 代码：
```
{{itemName}}
圆桌
热门
收藏
```
JS 代码：
```
//discovery.js
Page({
data: {
navTab: ["推荐", "圆桌", "热门", "收藏"]
, currentNavtab: "0"
}
, onLoad: function () {
console.log('onLoad')
}
, switchTab: function (e) {
this.setData({
currentNavtab: e.currentTarget.dataset.idx
});
}
});
```
由于微信不支持使用 DOM 访问对象，也就是不支持 `dom` 和 `window` 对象，所以 tab bar 的实现依赖于微信提供的视图层的展示逻辑，以及视图与数据之间的绑定机制。
绑定点击事件，通过改变一个 `data-` 属性的值，来控制元素的类的改变（从而改变样式等）。
**3. 轮播图**
以下是实现的 WXML 代码：
```
```
JS 代码：
```js
imgUrls: [
'../../images/24213.jpg'
, '../../images/24280.jpg'
, '../../images/1444983318907-_DSC1826.jpg'
]
, indicatorDots: false
, autoplay: true
, interval: 5000
, duration: 1000
, feed: []
, feed_length: 0
```
轮播图的实现使用的是微信提供的 swiper 组件，该组件贴心的提供了各种属性选择，常用的包括 `autoplay`，interval 时间 `duration` 等
`swiper-item` 中包含的是所有轮播的图片，为了方便修改图片数据，同样采用 `for` 渲染绑定 `data` 的方式。
**4. 下拉刷新，上拉加载，以及数据请求**
刷新及继续加载的动作，依靠的是 `scroll-view` 标签，及配套的 `upper` 和 `lower` 事件。
标签的属性提供了 `bindscrolltoupper` 和 `bindscrolltolower` 来绑定滚动到顶部及底部所触发的事件，同时 `upper-threshold` 和 `lower-threshold` 能够调整触发时距边界的距离。
除上述之外，**小程序的 API 还提供横向滚动、滚动触发事件、设置滚动条位置等接口**。
```
{{item.feed_source_name}} {{item.feed_source_txt}}
{{item.question}}
{{item.answer_ctnt}}
{{item.good_num}} 赞同
关注问题
```
滚动至顶或至底时，触发的加载数据的事件，本应该调用微信提供的网络请求 API 来获取数据。
但是比较坑的是，**我在选择写仿知乎 demo 的时候没有注意到知乎不提供开放 API，而微信的 API 不支持直接对 JSON 文件进行本地请求。**
无奈之下，选择在 JS 文件中伪造一段数据，用 `module.exports` 抛出，来 fake 数据请求：
```
upper: function () {
wx.showNavigationBarLoading()
this.refresh();
console.log("upper");
setTimeout(function () {
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}, 2000);
}, lower: function (e) {
wx.showNavigationBarLoading();
var that = this;
setTimeout(function () {
wx.hideNavigationBarLoading();
that.nextLoad();
}, 1000);
console.log("lower")
}, //scroll: function (e) {
// console.log("scroll")
//},
//网络请求数据, 实现刷新
refresh0: function () {
var index_api = '';
util.getData(index_api).then(function (data) {
//this.setData({
//
//});
console.log(data);
});
}, //使用本地 fake 数据实现刷新效果
refresh: function () {
var feed = util.getDiscovery();
console.log("loaddata");
var feed_data = feed.data;
this.setData({
feed: feed_data
, feed_length: feed_data.length
});
}, //使用本地 fake 数据实现继续加载效果
nextLoad: function () {
var next = util.discoveryNext();
console.log("continueload");
var next_data = next.data;
this.setData({
feed: this.data.feed.concat(next_data)
, feed_length: this.data.feed_length + next_data.length
});
}
```
由于是 fake 的数据，所以这个 demo 并没有做真实的带参跳转，查询等功能。
加载数据的同时，使用微信提供的加载动画 `wx.showNavigationBarLoading();`。
**5. 其他**
- 为了实现点击跳转页面，使用了 `wx.navigateTo` 进行页面跳转以及点击事件绑定；
- 部分常用组件的模块化；
- `input`、`image` 组件等的使用。
**6. 后续**
其实还有大量的组件和 API 还没有用过，这个 demo 也许后续还会有更新呦，这取决于懒癌少女的病情严重程度了。
### 一点感受
其实作为一个小前端，由于工作中的原因，使用 MVVM 其实是非常少的。
不过，写了这个微信小程序 demo 之后，更加把这方面的思维理顺了。当然，写完之后回头看，还是有超多的不足，明明好些地方能再换一种写法的。
这毕竟是我第一次尝试用新鲜热乎的东西写小 demo，也是第一次尝试写教程……或者算是记录？whatever~~
Anyway~ 希望除了写代码之外，还能在码文字的道路上也多走走吧，毕竟我是要做代码小仙女的人呀\\（≧∀≦）ゞ
GitHub 项目地址：GitHub – RebeccaHanjw/weapp-wechat-zhihu
文章来源：
**本文由知晓程序授权转载，关注微信号 zxcx0101，回复「电商」获得电商类小程序的开发教程文章。**
快速关注知晓程序↓↓↓
**知晓程序（微信号 zxcx0101）是爱范儿旗下专注于小程序生态的公众号。我们提供最全面、新鲜的小程序资讯（消息、观点、指南、活动）和服务，在这里你能了解到关于小程序的一切。**