微信小程序开发注意指南和优化实践(小结)-创新互联

前言

做网站、成都网站建设,成都做网站公司-创新互联已向上1000家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。

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

一、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; 
} 

当前名称:微信小程序开发注意指南和优化实践(小结)-创新互联
文章位置:http://pwwzsj.com/article/isssi.html