微信小程序的简易教程请参考官方文档:
https://developers.weixin.qq.com/miniprogram/dev/index.html
这里只记录自己开发中遇到的一些问题及注意事项。
1、前端代码限制大小不超过2M
如果不是很复杂的项目,代码限制在2M内是可以的,在项目中比较占空间的是images文件夹下的图片,我们可以将较大的图片存储在云上,通过外链引入,就可以不占用本地空间,我用到的是阿里云的OSS云存储。
2、设置tabBar时,iconPath必须使用本地图片
除了图片路径有规定,图片的大小和尺寸都有相应的规范,官方文档如下,图片大小不超过40kb,建议尺寸为81px*81px,图片超过40kb会报错。
图标图片建议使用网上一些矢量库里的图标,如阿里巴巴矢量图库,这些矢量图标基本只有几kb。
3、小程序js文件中指向变量的方式
在做小程序之前用的是vue做web开发,指向变量的形式是< this.变量名>,
在小程序里用的是< this.data.变量名>的形式,这一点可以从小程序为变量赋值的形式理解。
小程序为变量赋值的形式是:
this.setData({
变量名:变量值
})
4、微信小程序分享给别人,打开后提示页面不存在
onShareAppMessage中的url要写成“pages/path/pathname”的形式,而不是相对路径“../path/pathname”的形式。
5、小程序自动更新
小程序上线后,会有更新维护上线新版本,如果没有自动更新功能,那么之前使用的用户就没有办法获取最新的版本。
官方文档里有更新的相关API,请自行查阅,我自己的程序是这样写的,程序写在app.js中。
// 自动更新
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
console.log(res.hasUpdate)
// if (res.hasUpdate == true) {
// updateManager.applyUpdate()
// }
})
updateManager.onUpdateReady(function () {
updateManager.applyUpdate()
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
})
6、服务器域名必须使用https协议
在小程序中使用 API 时,每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名进行网络通信,配置时需要注意:域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议。
使用http协议的域名会报错。