微信小程序使用总结
我在微信小程序中遇到的问题
组件中遇到的问题
1、swiper组件
（1）swiper滑动错误
如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。
if(e.detail.source==’touch’){
this.setData({
current:e.detail.current
})
}
2、scroll-view组件
（1）scroll-view中开头元素有margin-top时，即便内容没有撑满容器，也会出现滚动条。
（2）横向滚动时，内容设置为 display:inline-block; ，scroll-view设置为 white-space:nowrap; 。不能用浮动或者弹性盒；竖向滚动时，scroll-view必须设置高度，如果一排有多个可以用inline-block或者浮动，不能用弹性盒； 弹性盒无效 。
<scroll-view scroll-x class="horizontal">
<view class="horizontal-item" wx:for="{{dataList}}" wx:key="{{item.id}}">view>
scroll-view>
<scroll-view scroll-x class="vertical">
<view class="vertical-item" wx:for="{{dataList}}" wx:key="{{item.id}}">view>
scroll-view>
/*横向滚动*/
.horizontal{
white-space:nowrap;
}
.horizontal-item{
display:inline-block;
white-space:normal;
}
/*竖向滚动*/
.vertical{
height:800rpx;
width:700rpx;
}
.vertical-item{
display:inline-block;
width:300rpx;
margin:30rpx 20rpx;
}
（3）scroll-view嵌套input时，滚动会出现卡顿现象。
3、checkbox和radio的样式（转载）
4、input和textarea组件
（1）blur事件有延迟，不能通过blur事件来获取值，可以用input事件。
（2）如果是避免覆盖导航栏的话，可以用view模拟textarea，点击切换成textarea，如果是连续的textarea，建议用循环做，不然会点击view两次才会唤起键盘。
5、canvas画图遇到的问题
canvas画图是异步操作，为了减少影响每画一步都需要用ctx.save()保存,如果要生成图片需要调用wx.canvasToTempFilePath()，需要注意的是生成的路径是临时路径，这个方法必须在ctx.draw()的回调中调用，为了保证生成图片时画布已经完成画图操作，需要给生成图片的方法加个延迟。
ctx.beginPath();
ctx.setFillStyle("#ff5857");
ctx.setFontSize(16);
ctx.fillText("这是红色的字体", 20, 50);
ctx.save();
ctx.beginPath();
ctx.setFillStyle("#3385ff");
ctx.setFontSize(14);
ctx.fillText("这是蓝色的字体", 20, 100);
ctx.save();
ctx.draw(false, setTimeout(function () {
wx.canvasToTempFilePath({
...
})
}, 1000));
6、原生组件使用限制
原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。如果要盖上其他原生组件必须写在其他原生组件的下面，设置z-index没有用。
原生组件有：camera、canvas、input（仅在focus时表现为原生组件）、live-player、live-pusher、map、textarea、video。
（1）canvas组件在swiper中使用
可以将canvas先生成图片，将图片放到页面中。
wx.canvasToTempFilePath({
canvasId: 'canvas1',
success(res) {
var urls = that.data.urls;
urls[0] = res.tempFilePath;
that.setData({
urls: urls
})
}
})
（2）cover类：cover-view、cover-image
不能设置单边的border。
小细节
1、蒙版下的页面滚动
（1）页面滚动可以用scroll-view来做。
（2）可以将遮罩加上catchtouchmove=“stopEvent”,stopEvent可以用来处理 touchmove 的事件，也可以是一个空函数。
2、如果小程序有tabBar，用wx.getSystemInfo()获取的windowHeight不包括tabBar的高度，没有tabBar的页面可以用100%来获取整个页面的高度。
3、转发小程序的卡片中的图片长宽比为5:4，默认是高度为80%的屏幕宽度的图片。
4、注意浅拷贝和深拷贝的问题。
5、吸顶效果
onpagescroll事件有延迟，scroll-view滚动事件也有延迟，吸顶效果会存在一定的卡顿效果，建议用wxs来做。（另一篇）