微信小程式開發記錄總結
微信小程式的簡易教程請參考官方文件:
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協議的域名會報錯。