共计 3676 个字符，预计需要花费 10 分钟才能阅读完成。
前言
转眼间已经参与过我厂好几个小程序的开发了，下面本妹子将开发中的那些注意点和各位小伙伴们分享下，妥妥的干货一枚。
一、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
setTimeout 一定伴随着 clearTimeout
setInterval 一定伴随着 clearInterval
这些我们经常会滚动算高度，倒计时，动画中用到。当我跳到了另外一个页面还在运行，小心后台页面的 js
wx.hide 的坑
两个都是基于同一个原生 toast 实例实现的，wx.showLoading()与 wx.showToast(), 同时只能显示一个，
wx.hideLoading()也会隐藏 Toast ; wx.hideToast()也会隐藏 Loading，
失败的提示 toast 会一闪而过的问题，可能时因为调用了 wx.hideLoading()。
http 需变 https
HTTP 是明文传输有篡改内容的风险，而且有些安卓机会不兼容。所以我们需要使用 https。所以开需求评审的时候，要注意后端要写成 https，如果是运营配的数据，后端最好有个转 https 方法，输入了 url 自动转成 https 链接。
在微信开发者工具中，可勾选 ” 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书 ” 规则即可用 http，但是在实体里并没有这个选项，所以建议开发时就用 https 路径。
埋点的坑
埋点用公共方法，页面曝光 pv 埋点放入 onshow 生命周期中更加准确。
预加载
1. 数据预加载
上个页面就将接口请求好，存到对象中，下个页面直接从对象中拿，有利有弊，从业务角度出发看是否需要预加载数据
storage 也可以存储数据，同一个微信用户，同一个小程序 storage 上限为 10MB。
- 分包预加载 preloadRule
preloadRule预下载分包行为在进入某个页面时触发，享有共同的预下载大小限额 2M。
"preloadRule": {
"sub1/index": {"packages": ["important"]
}
}3. 图片预加载
对视觉效果要求越来越高，多张图片如果想动画显示流畅，可以先加载图片，直接用 request 先请求图片下来。
setData 注意点
1. 频繁的去 setData
存在将未绑定在 WXML 的变量都不需要传入 setData。
2. 每次 setData 都传递大量新数据，可局部更新
this.setData({list[index] = newList[index]
})3. 后台态页面进行 setData
当页面进入后台态（用户不可见），不应该继续去进行 setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData 也会抢占前台页面的执行。也就是上文提到的不要忘了clearTimeout、clearInterval。
四、其他
使用分包
由于小程序包大小有限制，整个小程序所有分包 (包括独立分包和普通分包) 大小不超过 8M，单个分包 / 主包大小不能超过 2M，建议把首屏不需要展示的都放入分包中，分包就像 H5 打出的 chunk 包一样，可以按需加载。
及时清理没有使用到的代码和资源
在日常开发的时候，我们可能引入了一些新的库文件，而过了一段时间后，由于各种原因又不再使用这个库了，我们常常会只是去掉了代码里的引用，而忘记删掉这类库文件了。目前小程序打包是会将工程下所有文件都打入代码包内，也就是说，这些没有被实际使用到的库文件和资源也会被打入到代码包里，从而影响到整体代码包的大小。
sitemap 配置
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json，则默认为所有页面都允许被索引.
单元测试
miniprogram-simulate
模拟 touch 事件、自定义事件触发
选取子节点
更新自定义组件数据
触发生命周期
检测工具
开发者工具自带检测评分页面，可以分析页面存在的问题。
wxss 覆盖率较低，有些动画样式比如 @keyframes 是检测不到的。
以及可以通过性能面板查看页面性能。
其中培训视频以上传到 B 站中，欢迎小伙伴们来围观评论 ^ ^
https://www.bilibili.com/video/av56083647
相关链接
- 微信开发指南
- 原文地址:https://raoenhui.github.io/wechat/2019/06/18/miniapp/index.html
- 视频地址:https://www.bilibili.com/video/av56083647
Happy coding .. :)
