微信小程序开发注意指南及优化实践

1. WXML

不要输入换行符，不允许空格

微信开发者工具不剪代码。如果代码中有换行，页面也会直接换行。

wx:if vs hide

一般来说，wx:if 的切换成本较高，hidden 的初始渲染成本较高。因此，如果需要频繁切换，则 hide 更好，如果运行时条件不太可能改变，则 wx:if 更好。

图像处理

1.大图片也会造成页面切换延迟 一些小程序引用大页面图片，来回切换页面时会出现掉帧现象。 ？ 3。图片大，点击空间小 小程序主要运行在手机上。手机屏幕尺寸有限，所以尽量让点击空间更大。 4。图像采集 如果有图像未按照原图显示，可以设置image组件的图像属性mode来保留原图像。 ？直接添加为wxml格式，可以写入需要转换的数据，这样就不会增加负载，setData也会变长。建议页面使用少于1000个WXML节点，节点树深度小于30级别，子节点数量不超过60

s 2. WXSS sCs 伪类在微信开发者工具中不出现

Styles 不显示 Css 伪类。想要写 ::before 或 :first child 的朋友请注意，你的伪类在控制台中是看不到的，所以我不建议在 widgets 中使用 Css 伪类，如果出现问题未找到并且该错误很难修复。在

小程序中，按钮 在 之后将其自己的边框添加到伪类中。 之后的 通过开发者工具不可见。我们必须自己消除边界。

button::after {
  border: none;
}
复制代码

hover伪类可以替换为小程序自带的属性hover-class。

某些CSS3属性无法使用

例如无法使用transformation:rotate(180deg)。

自定义颜色限制

并非所有颜色配置都可以根据您的喜好进行自定义。例如导航栏标题颜色仅支持黑/白；下拉加载样式仅支持深色/浅色。所以要注意视觉图表。

滚动区域不允许惯性滚动

添加溢出：滚动时，IOS需要额外设置： -webkit-overflow-scrolling：启用触摸惰性。 ？

分享事件不支持异步

如果要编辑分享的图片，在lifecycleShareAppMessage中写如下：

Page({
  onShareAppMessage: function (res) {
    return {
      title: '自定义转发标题',
      imageUrl: 'https://www.codeqd.com/zb_users/upload/2023/09/logo.png'
    }
  }
})
复制代码

但是不能发消息，如果你想❀ynch❀ronshareApp使用接口获取共享图片的URL，必须提前读取并保存在Data文件夹中 onLoad

小程序有并发限制

Wx.request最大并发限制。 uploadFile 和 wx.downloadFile 是 10。

为了确定，你需要写一个请求队列。如果并发数大于10，则等待请求。

使用公共方法和组件

编写公共方法和组件可以避免重新发明轮子。 1. 公共埋点方法 2. 处理js的不同方法（传输https、throttle、formatTime等） 3. 公共组件（iphonex兼容组件、倒计时组件等）

捕获绑定事件

例如 catchtouchmove 弹出窗口可防止滑动。绑定绑定事件并不能阻止冒泡事件向上冒泡。绑定Catch事件可以防止冒泡事件向上冒泡。

将密钥

添加到需要经常更新的列表中。您需要添加key的值。键值对应于索引，但不应使用 key 值。 索引，因为索引可能保持不变，导致在添加和删除时造成混乱。建议使用唯一标识符id，这样可以大大提高数据变化后diff更新的性能。 PS：如果是只可见且不需要更新的列表，则不需要添加key。

熟练使用nextTick

小程序和vue的写法类似。还有nextTick。当当前同步过程完成后，执行下一个时间块。例如，对于视图层中的某些数据，您可以等到页面处理完成后再获取它以获取更多详细信息。包括clearInterval这些我们经常滚动来计算高度和倒计时。用于动画。当我移动到另一个仍在运行的页面时，请小心后端js

文件的陷阱。两者都是基于相同的原始toast，wx.showLoading()和wx.showToast来实现的。 ( ) 一次只能显示一个。 wx.hideLoading() 也隐藏了Toast； wx.hideToast() 也隐藏下载。失败需要 toast 闪过去，可能是因为调用了 wx.hideLoading() 。 。

http必须更改为https

HTTP是纯文本传输，内容可能被篡改，部分Android设备可能不兼容。所以我们必须使用https。因此，在进行需求检查的时候，要注意后端是写成https的。如果是函数分配的数据，最好有后台转换为https的方法。输入 URL 会自动将其转换为 https 链接。

在微信开发者工具中，可以勾选“不检查合法域名、网页视图（公司域名）、TLS版本和HTTPS证书”规则来使用http，但实体没有此选项。 ，所以开发时建议使用https路径。

埋点陷阱

埋点使用公共方法，页面泄露pv埋点放置

this.setData({
    list[index] = newList[index]
})
复制代码

‍‍

this.setData({
    list[index] = newList[index]
})
复制代码

this.setData({
    list[index] = newList[index]
})
复制代码

this.setData({
    list[index] = newList[index]
})
复制代码

。

预载

1。数据预加载。在上一页中，请求用户界面并将其存储在对象中。下一页直接从目标获取它。有优点也有缺点。从业务角度看是否需要预加载数据。录音还可以存储数据。同一微信用户、同一个小程序的存储限制为10MB。 2、分包预加载预加载规则预加载规则预加载分包活动在进入某个页面时开始，通用预加载大小限制为2M。

"preloadRule": {
    "sub1/index": {
      "packages": ["important"]
    }
}
复制代码

3。图像预加载对视觉效果的要求越来越高。如果想要多张图片流畅动画，可以先加载图片，然后直接使用request先请求图片。

关于 setData 的注释

1。通常setData不需要在SetData中传递未绑定到WXML的变量。 ？