微信小程序开发：注意事项和优化实践

时间：2019-10-10 01:22:07 | 来源：

微信小程序开发：注意事项和优化实践

不要换行写

微信开发者工具不会对代码进行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加负担。

JavaScript 支持情况

如果需要支持到 IOS8 话，建议下面 js 方法都不使用。

分享事件不支持异步

如果你想自定义分享图片，则在生命周期onShareApp

Message中编写如下所示：

Page({onShareAppMessage: function (res) {return {title: '自定义转发标题',imageUrl: 'https://raoenhui.github.io/images/logo.png'    }  }}

但是 onShareAppMessage 不能支持异步，如果你想从接口里获取分享图片URL，必须在 onLoad 提前读取并放入Data中。

小程序有并发限制

wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。所有为了保险起见，需要写个请求队列，如果并发量大于10，则等待请求。

循环中添加key

对于经常要更新的列表需要加上key值，key值相当于索引，但是key值不要用index ,因为index在增加删除的时候可能不变产生混乱，推荐用唯一标示id ，对数据改变之后的diff更新比较有很大的性能提升。PS：如果是单纯只显示的列表，不需要操作更新，那不需要加key 。

http需变https

HTTP是明文传输有篡改内容的风险，而且有些安卓机会不兼容。所以我们需要使用https。所以开需求评审的时候，要注意后端要写成https，如果是运营配的数据，后端最好有个转https方法，输入了url自动转成https链接。

在微信开发者工具中，可勾选”不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”规则即可用http，但是在实体里并没有这个选项，所以建议开发时就用https路径。