微信小程序开发留意指南和优化实践

前语

转眼间现已参加过我厂好几个小程序的开发了,下面本妹子将开发中的那些留意点和各位小伙伴们共享下,妥妥的干货一枚。

一、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。 2. 分包预加载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 事情、自定义事情触发 选取子节点 更新自定义组件数据 触发生命周期

推荐阅读