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

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

一、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。
小程序b