开发注意指南和优化实践
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,我们需要自行去掉边框。ver伪类则可以用小程序自带的属性hover-class代替。 部分CSS3属性不能用 如transform:rotate(180deg),不能用。 自定义颜色限制 不是所以颜色配置都能随心所欲,比如导航栏标题颜色,仅支持 black / white;下拉 loading 的样式,仅支持 dark / light。所以出视觉图关注下。 滚动区域没有开启惯性滚动 当加了overflow: scroll时,IOS下需要额外设置: -webkit-overflow-scrolling: touch,来开启惯性滚动。 三、JS JavaScript 支持情况
如果需要支持到IOS8话,建议下面js方法都不使用。 (编辑:应用网_丽江站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |