前言

转眼间，我已经参与了我们工厂几个小程序的开发。下面，姐姐就和朋友们分享一下开发中的那些注意点，找一款合适的干货。

一、WXML

不要写新行，你不能用空格

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

wx:if vs隐藏

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

图像处理

1.大图也会导致页面切换被卡住。有些小程序会参考页面中的大图，掉帧会卡在页面向后切换。

2.代码包中图片的大小限制为2MB，占用空间较大。建议所有图片都上传到CDN，代码中直接引用链接。

3.图片大，点击位小的小程序主要运行在手机上，手机的屏幕尺寸有限，尽量把点击位做大一些。

4.图像捕捉存在图像未按照原始图像的纵横比显示的情况，因此可以设置图像组件的模式属性以保持原始图像的纵横比。

5.所有零星的图片都包含在一个大图片中，以减少请求的数量

WXS模块

每个wxs模块都有一个内置的模块对象。直接在wxml中引入，可以编写需要转换的数据，防止对setData造成负担

使用了太多的WXML节点

过大的WXML节点树会增加内存的使用，样式重排时间会更长。建议一个页面使用少于1000个WXML节点，节点树深度少于30层，子节点数量不超过60个

第二，WXSS

Css伪类是不可见的

在微信开发者工具中，Styles不会显示Css伪类。对于喜欢写：before或者：first-child的人，请注意你的伪类在控制台是看不到的，所以我妹妹不建议在小程序中使用Css伪类，以防在不发现问题的情况下很难修复bug。

小程序按钮向after伪类添加一个框架。我们不能通过开发者工具看到after，所以我们需要自己移除框架。

{ border : none }后的button:after} hover伪类可以由applet附带的属性hover-class替换。

一些CSS3属性不可用

例如变压器：旋转(180度)，则不能使用。

自定义颜色限制

不是这样颜色配置可以任意，比如导航栏标题颜色，只支持黑/白；下拉加载样式只支持暗/亮。所以要注意视觉图。

滚动区域中未启用惯性滚动

添加overoverflow :滚动时，IOS下需要额外设置：-WebKit-overflow-scrolling 3360 touch启用惯性滚动。

三.射流研究…

JavaScript支持

如果需要支持IOS8，建议不要使用以下js方法。

不支持异步共享事件

如果您想自定义共享图片，请在onShareAppMessage的生命周期中编写以下内容：

页面({ onsharepmessage : function(RES){ return { title : '自定义转发标题'，Imageurl : ' https://blog . frontendx.cn/images/logo . png ' })，但onsharepmessage不支持异步。如果想从界面获取分享图片的URL，必须提前在onLoad中读取，放入Data中。

小程序有并发限制

wx.request、wx.uploadFile和wx.downloadFile的最大并发限制为10。

为了安全起见，您需要编写一个请求队列。如果并发性大于10，您将等待请求。

采用通用的方法和组件

写常用的方法和组件可以避免反复做轮子。1.常见的嵌入方法2。处理js的各种方法(转到https、throttle、formatTime等。) 3.常见组件(iphonex兼容组件、倒计时组件等。)

捕获绑定事件

例如，catchtouchmove项目符号框禁止滑动。bind事件绑定不会阻止冒泡事件向上冒泡，而catch事件绑定可以阻止冒泡事件向上冒泡。

在循环中添加密钥

需要频繁更新的列表需要添加键值，相当于索引，但是键值不应该是索引，因为添加或删除时索引可能不会改变，可能会造成混淆。建议使用唯一的标签id，这将大大提高数据更改后diff update的性能。PS:如果列表只是简单显示，不需要更新，所以不需要添加密钥。

nextTick的巧妙运用

applet和vue的编写类似，还有一个nextTick，在当前同步过程完成后，将在下一个时间片执行。例如，在页面上的过程完成后，可以更准确地获取视图层中的一些数据

Wx.nexttick (()={query.select('。百分比-行-土司')。boundingclient ()})处理后台运行的js

SetTimeout必须伴随clearTimeout setInterval，我们在滚动高度、倒计时和动画中经常用到它。当我跳转到另一个页面并且它还在运行时，注意后台页面上的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.数据被预加载到上一页，接口被请求并存储在对象中。下一页直接取自对象，有利有弊。从业务角度来看，数据存储是否需要预加载也可以存储数据。对于同一微信用户，同一小程序的存储限制为10MB。

2.分包预下载规则预下载规则预下载分包行为在进入某个页面时触发，享有2M通用的预下载大小限制。

预加载规则' : { ' Sub 1/index ' : { ' Packages ' :['重要']}} 3。图片预加载对视觉效果的要求越来越高。如果想要多张图片流畅动画，可以先加载图片，直接使用request先请求图片。

集合数据，注意

1.频繁的去setData存在，所以没有绑定到WXML的变量不需要传入setData。

2.每次setData都会传输大量新数据，这些数据可以在本地更新

这个。setDATa({ list[index]=new list[index]})3。Setdata在后台页面上执行

当页面进入后台状态(用户不可见)时，不应该继续执行setData。背景状态页面的呈现用户感觉不到。此外，在后台状态页面上设置数据也会抢占前台页面的执行。也就是说，不要忘记上面提到的clearTimeout和clearInterval。

四.其他人

使用分包

由于小包装的尺寸有限，整个小程序的所有子包装(包括独立子包装和普通子包装)的尺寸不应超过8M，单个子包装/主包装的尺寸不应超过2M。建议将所有不需要在第一屏显示的包放入子包中。子包，就像H5玩的组块包一样，可以按需加载。

及时清理未使用的代码和资源

在日常开发过程中，我们可能会引入一些新的库文件，但一段时间后，由于各种原因，我们不再使用这个库。我们经常只是删除代码中的引用，而忘记删除这个类库文件。目前小程序的包会把项目下的所有文件都放入代码包，也就是说这些没有实际使用的库文件和资源也会放入代码包，从而影响整体代码包的大小。

站点地图配置

小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引。文件的内容是一个JSON对象。如果没有sitemap.json，默认情况下允许对所有页面进行索引。

单元测试

微型程序模拟

模拟触摸事件，选择子节点来更新自定义组件数据以触发生命周期

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。