为用户创造价值

始终追求工匠精神,是您靠谱的H5开发、小程序开发、微信开发供应商

微信小程序开发:注意事项和优化实践

2019-10-10 01:22:07 来源:Infocode蓝畅

微信小程序开发:注意事项和优化实践

1
不要换行写

微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行。

2
wx:if vs hidden

一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

3
图片处理

1.大图片也会造成页面切换的卡顿有一部分小程序会在页面中引用大图片,在页面后退切换中会出现掉帧卡顿的情况。

2.图片占容量代码包限制是2MB,图片占用空间较大,建议都上传到CDN 上,代码里直接引用链接。

3.大图片小点击位 小程序主要在手机端运行,手机屏幕大小有限,所以尽量点击位大点。

4.图片截取存在图片没有按原图宽高比例显示,可以设置 image 组件的 mode 属性,来保持原图宽高比。

5.CSSSprites所有零星图片都包含到一张大图中,减少请求数。

4
WXS模块

每个 wxs 模块均有一个内置的 module 对象。 直接在wxml中引入,可以将写需要转化数据的写进去,防止给setData加负担。


JS


1
JavaScript 支持情况

如果需要支持到 IOS8 话,建议下面 js 方法都不使用。

2
分享事件不支持异步

如果你想自定义分享图片,则在生命周期onShareApp

Message中编写如下所示:









Page({onShareAppMessage: function (res) {return {title: '自定义转发标题',imageUrl: 'https://raoenhui.github.io/images/logo.png'    }  }}

但是 onShareAppMessage 不能支持异步,如果你想从接口里获取分享图片URL,必须在 onLoad 提前读取并放入Data中。

3
小程序有并发限制

wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。所有为了保险起见,需要写个请求队列,如果并发量大于10,则等待请求。

4
循环中添加key

对于经常要更新的列表需要加上key值,key值相当于索引,但是key值不要用index ,因为index在增加删除的时候可能不变产生混乱,推荐用唯一标示id ,对数据改变之后的diff更新比较有很大的性能提升。PS:如果是单纯只显示的列表,不需要操作更新,那不需要加key 。

5
http需变https

HTTP是明文传输有篡改内容的风险,而且有些安卓机会不兼容。所以我们需要使用https 所以开需求评审的时候,要注意后端要写成https,如果是运营配的数据,后端最好有个转https方法,输入了url自动转成https链接。

在微信开发者工具中,可勾选”不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”规则即可用http,但是在实体里并没有这个选项,所以建议开发时就用https路径


原文作者:腾讯高级工程师 王贝珊

原文链接:

http://www.wxapp-union.com/article-5256-1.html


 
上一篇:小程序审核不通过,一定要注意这几个问题
下一篇:微信小程序开发带给企业的好处是什么?

相关阅读推荐:

开发小程序的商业价值有哪些?

小程序运营推广的几个方法

网站建设对中小企业的意义是什么

Ahrefs是什么:强大SEO工具,Ahrefs功能介绍

H5设计:H5页面配色该如何做

SEO分析:排名基础及网站内部质量分析

Tips: 专业提供H5开发小程序开发微信开发网站开发APP开发SEO优化、以及产品规划和安全运维服务