微信小程序开发注意指南和优化实践
前言转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。 一、WXML不要换行写,有空格不行微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行。 wx:if vs hidden一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。 图片处理1.大图片也会造成页面切换的卡顿有一部分小程序会在页面中引用大图片,在页面后退切换中会出现掉帧卡顿的情况。?2.图片占容量?代码包限制是2MB,图片占用空间较大,建议都上传到? WXS 模块每个 wxs 模块均有一个内置的 module 对象。 直接在wxml中引入,可以将写需要转化数据的写进去,防止给setData加负担 使用了过大的 WXML 节点数目一个太大的WXML节点树会增加内存的使用,样式重排时间也会更长,建议一个页面使用少于? 二、WXSSCss伪类看不到在微信开发者工具中,? 小程序? button::after {
border: none;
}
部分CSS3属性不能用如transform:rotate(180deg),不能用。 自定义颜色限制不是所以颜色配置都能随心所欲,比如导航栏标题颜色,仅支持 black / white;下拉 loading 的样式,仅支持 dark / light。所以出视觉图关注下。 滚动区域没有开启惯性滚动当加了overflow: scroll时,? 三、JSJavaScript 支持情况如果需要支持到? 分享事件不支持异步如果你想自定义分享图片,则在生命周期onShareAppMessage中编写如下所示: ,imageUrl: 'https://raoenhui.github.io/images/logo.png'
}
}
})
但是? 小程序有并发限制wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。 所有为了保险起见,需要写个请求队列,如果并发量大于10,则等待请求。 采用公共方法和组件编写公共方法和组件,可以避免重复造轮子。 1.公共埋点方法 2.各种处理js的方法(转https,throttle,formatTime等) 3.公共组件(iphonex兼容组件,倒计时组件等) catch绑定事件比如? 循环中添加key对于经常要更新的列表需要加上? 巧用nextTick小程序和vue写法比较相似,也有? wx.nextTick(() => {
query.select('.percent-line-toast').boundingClientRect()
})
处理后台运行的jssetTimeout一定伴随着clearTimeout setInterval一定伴随着clearInterval 这些我们经常会滚动算高度,倒计时,动画中用到。当我跳到了另外一个页面还在运行,小心后台页面的js wx.hide的坑两个都是基于同一个原生toast实例实现的,wx.showLoading()与wx.showToast(),同时只能显示一个, wx.hideLoading()也会隐藏Toast ; wx.hideToast()也会隐藏Loading, 失败的提示toast会一闪而过的问题,可能时因为调用了wx.hideLoading()。 http需变httpsHTTP是明文传输有篡改内容的风险,而且有些安卓机会不兼容。所以我们需要使用https。 所以开需求评审的时候,要注意后端要写成https,如果是运营配的数据,后端最好有个转https方法,输入了url自动转成https链接。 在微信开发者工具中,可勾选”不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”规则即可用http,但是在实体里并没有这个选项,所以建议开发时就用https路径。 埋点的坑埋点用公共方法,页面曝光? 预加载1.数据预加载 上个页面就将接口请求好,存到对象中,下个页面直接从对象中拿,有利有弊,从业务角度出发看是否需要预加载数据 storage也可以存储数据,同一个微信用户,同一个小程序 storage 上限为 10MB。
setData注意点1. 频繁的去 setData存在将未绑定在 WXML 的变量都不需要传入 setData。?2. 每次 setData 都传递大量新数据,可局部更新 this.setData({
list[index] = newList[index]
})
3. 后台态页面进行 setData当页面进入后台态(用户不可见),不应该继续去进行? 四、其他使用分包由于小程序包大小有限制,整个小程序所有分包(包括独立分包和普通分包)大小不超过 8M,单个分包/主包大小不能超过 2M,建议把首屏不需要展示的都放入分包中,分包就像H5打出的chunk包一样,可以按需加载。 及时清理没有使用到的代码和资源在日常开发的时候,我们可能引入了一些新的库文件,而过了一段时间后,由于各种原因又不再使用这个库了,我们常常会只是去掉了代码里的引用,而忘记删掉这类库文件了。目前小程序打包是会将工程下所有文件都打入代码包内,也就是说,这些没有被实际使用到的库文件和资源也会被打入到代码包里,从而影响到整体代码包的大小。 sitemap 配置小程序根目录下的?sitemap.json?文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引. 单元测试miniprogram-simulate 模拟 touch 事件、自定义事件触发 选取子节点 更新自定义组件数据 触发生命周期 检测工具开发者工具自带检测评分页面,可以分析页面存在的问题。 wxss 覆盖率较低,有些动画样式比如? 以及可以通过性能面板查看页面性能。 小伙伴们有其他建议欢迎留言评论^ ^(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |