前言转眼参与了我厂几个小程序的开发。下面，本妹子就把开发中的注意点分享给小伙伴们。适当的干货一件。1、WXML不要换行写。如果有空格，微信开发者工具不会裁剪代码。如果代码换行，页面也会直接换行。wx:ifvshidden一般来说，wx:if切换成本较高，hidden初始渲染成本较高。因此，hidden更适合需要频繁切换的情况，而wx:if如果条件不太可能在运行时发生变化，则更好。图片处理1、大图片也会造成页面切换卡顿有些小程序会在页面中引用大图片，来回切换页面时会出现掉帧卡顿现象。2.图片占用空间代码包限制2MB，图片占用空间大。建议上传到CDN，代码中直接引用链接即可。3、图片大，点击小小程序主要运行在手机端，手机屏幕尺寸有限，尽量点击大一些。4.图片截取如果图片没有按照原图的宽高比显示，可以通过设置image组件的mode属性来保持原图的宽高比。5、CSSSprites所有零星图片都包含在一张大图里，减少请求WXS模块的数量每个wxs模块都有一个内置的模块对象。直接在wxml中引入，可以将需要转换的数据写入其中，防止setData使用过多的WXML节点造成负担。WXML节点树太大会增加内存占用，样式重排时间会更长，建议一个页面使用小于1000个WXML节点，节点树深度小于30层，子节点数不超过60个。2.WXSSCss伪类不能在微信开发者工具，Styles不会显示Css伪类，喜欢写::before或者:first-child的朋友请注意，你的伪类在控制台是看不到的，所以本妹子不建议使用小程序中的css伪类，万一找不到问题点修复bug不容易。小程序按钮自带边框，在after伪类中添加，但是after通过开发者工具看不到，需要我们自己去除边框。button::after{border:none;}复制代码hover伪类可以换成小程序自带的属性hover-class。有些CSS3属性不能用，比如transform:rotate(180deg)，不能用。自定义颜色没有限制，颜色可以随意配置，比如导航栏的标题颜色，只支持黑色/白色；下拉加载样式仅支持深色/浅色。所以要注意视觉图。滚动区域未启用惯性滚动。添加overflow:scroll时，在IOS下需要额外设置：-webkit-overflow-scrolling:touch开启惯性滚动。3.JSJavaScript支持如果需要支持IOS8，建议以下js方法不要使用。分享事件不支持异步。如果要自定义分享图片，在生命周期onShareAppMessage中写入如下：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弹框禁止滑动绑定eventbinding不会阻止冒泡事件向上冒泡，catch事件绑定可以防止冒泡事件向上冒泡。在循环中添加一个键需要在需要经常更新的列表中添加一个键值。键值相当于一个索引，但是键值不应该使用索引，因为索引在增删改查时可能不会发生变化，容易造成混乱。建议为数据使用唯一的id。更改后的差异更新具有很大的性能提升。PS：如果是只显示不需要更新的列表，那么就不用加key了。nextTick小程序的巧妙使用，类似于vue的写法，也有nextTick，当前同步进程结束后，会执行下一个时间片。比如一些view层的数据，在页面上的process结束后，可以更准确的获取到。wx.nextTick(()=>{query.select('.percent-line-toast').boundingClientRect()})复制代码处理后台运行的jssetTimeout必须伴随clearTimeoutsetInterval必须伴随clearInterval这些是经常用于滚动计算高度、倒计时和动画。当我跳转到另外一个页面还在运行的时候，注意后台页面的jswx.hide这个坑都是基于同一个原生的toast实例实现的，wx.showLoading()和wx.showToast()，只有一个可以显示的同时，wx.hideLoading()也会隐藏Toast；wx.hideToast()也会隐藏Loading，失败提示toast一闪而过，可能是因为调用了wx.hideLoading()。Http需要改成httpsHTTP是明文传输，有内容被篡改的风险，部分Android机会不兼容。所以我们需要使用https。所以大家开需求审核的时候要注意后端要写成https。如果是操作分配的数据，后台有转换https的方法，输入url自动转换为https链接。在微信开发者工具中可以勾选“不验证合法域名、web-view（企业域名）、TLS版本、HTTPS证书”规则使用http，但是实体中没有这个选项，所以建议开发时使用https路径。埋点埋点使用public方式，页面曝光的pv埋点在onshow生命周期中更加精准。预加载1.数据预加载上一页会请求接口并存入对象，下一页直接从对象中取。有优点也有缺点。从业务角度看，是否需要预加载数据存储也可以存储数据。同一个微信用户，同一个小程序的存储空间限制为10MB。2.分包预加载preloadRulepreloadRule预加载分包行为在进入某个页面时触发，享有共同的预加载大小限制2M。"preloadRule":{"sub1/index":{"packages":["important"]}}复制代码3、图片预加载对视觉效果的要求越来越高。如果想流畅显示多张图片，可以先加载一张图片，使用request先请求图片。setData的注意事项1.没有绑定WXML的变量，如果经常使用setData，则不需要传给setData。2、每次setData都会传输大量的新数据，this.setData({list[index]=newList[index]})可以在本地更新，不要继续setData。用户感觉不到后台页面的渲染。另外后台页面设置Data也会抢占前台页面的执行。也就是说，不要忘记上面提到的clearTimeout和clearInterval。4.分包的其他使用由于小程序包的大小限制，整个小程序的所有分包（包括独立分包和普通分包）大小不得超过8M，单个分包/主包大小应不超过2M。建议首屏把不需要展示的都放到分包里。分包就像H5打印出来的chunk包一样，可以按需加载。及时清理不用的代码和资源在日常开发中，我们可能会引入一些新的库文件，一段时间后，由于各种原因，我们不再使用这个库，我们往往只是删除代码中的引用，并忘记删除此类库文件。目前小程序的打包都会把项目下的所有文件都放到代码包里，也就是说这些实际没有用到的库文件和资源也会被打包到代码包里，从而影响整体的代码包裹。尺寸。站点地图配置小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许微信收录。该文件的内容是一个JSON对象。如果没有sitemap.json，默认是允许所有页面被索引。UnitTestminiprogram-simulate模拟触摸事件，自定义事件触发选择子节点更新自定义组件数据触发生命周期
