转眼间已经参与过我厂好几个小程序的开发了，下面本妹子将开发中的那些注意点和各位小伙伴们分享下，妥妥的干货一枚。
一、WXML
不要换行写，有空格不行
微信开发者工具不会对代码进行trim操作，如果代码中换行，页面也直接换行。
wx:if vs hidden
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
图片处理
1.大图片也会造成页面切换的卡顿 有一部分小程序会在页面中引用大图片，在页面后退切换中会出现掉帧卡顿的情况。
2.图片占容量 代码包限制是2MB，图片占用空间较大，建议都上传到CDN上，代码里直接引用链接。
3.大图片小点击位 小程序主要在手机端运行，手机屏幕大小有限，所以尽量点击位大点。
4.图片截取 存在图片没有按原图宽高比例显示，可以设置image组件的mode属性，来保持原图宽高比。
5.CSSSprites 所有零星图片都包含到一张大图中，减少请求数
WXS 模块
每个 wxs 模块均有一个内置的 module 对象。 直接在wxml中引入，可以将写需要转化数据的写进去，防止给setData加负担
使用了过大的 WXML 节点数目
一个太大的WXML节点树会增加内存的使用，样式重排时间也会更长，建议一个页面使用少于1000个WXML的节点，节点树深度少于30层，子节点数不大于60个
二、WXSS
Css伪类看不到
在微信开发者工具中，Styles不会显示Css伪类，喜欢写::before或:first-child的小伙伴们请注意了，你的伪类在控制台是看不到的,所以本妹子不建议在小程序里用Css伪类，以防找不到问题点不好修复bug。
小程序button自带给after伪类添加了边框，通过开发者工具是看不到after,我们需要自行去掉边框。
button::after { border: none; }
hover伪类则可以用小程序自带的属性hover-class代替。
部分CSS3属性不能用
如transform:rotate(180deg)，不能用。
自定义颜色限制
不是所以颜色配置都能随心所欲，比如导航栏标题颜色，仅支持 black / white；下拉 loading 的样式，仅支持 dark / light。所以出视觉图关注下。
滚动区域没有开启惯性滚动
当加了overflow: scroll时，IOS下需要额外设置： -webkit-overflow-scrolling: touch，来开启惯性滚动。
三、JS
JavaScript 支持情况
如果需要支持到IOS8话，建议下面js方法都不使用。
分享事件不支持异步
如果你想自定义分享图片，则在生命周期onShareAppMessage中编写如下所示：
Page({ onShareAppMessage: function (res) { return { title: '自定义转发标题', imageUrl: 'https://blog.frontendx.cn/images/logo.png' } } })
但是onShareAppMessage不能支持异步，如果你想从接口里获取分享图片URL，必须在onLoad提前读取并放入Data中
小程序有并发限制
wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。
所有为了保险起见，需要写个请求队列，如果并发量大于10，则等待请求。
采用公共方法和组件
编写公共方法和组件，可以避免重复造轮子。 1.公共埋点方法 2.各种处理js的方法（转https，throttle，formatTime等） 3.公共组件（iphonex兼容组件，倒计时组件等）
catch绑定事件
比如catchtouchmove弹框禁止滑动 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
循环中添加key
对于经常要更新的列表需要加上key值，key值相当于索引，但是key值不要用index,因为index在增加删除的时候可能不变产生混乱，推荐用唯一标示id，对数据改变之后的diff更新比较有很大的性能提升。 PS：如果是单纯只显示的列表，不需要操作更新，那不需要加key。
巧用nextTick
小程序和vue写法比较相似，也有nextTick,在当前同步流程结束后，下一个时间片执行 。 比如有些取视图层的数据，可以等页面上流程结束后再取比较准确
wx.nextTick(() => { query.select('.percent-line-toast').boundingClientRect() })
处理后台运行的js