1. 程式人生 > >微信小程式開發記錄總結

微信小程式開發記錄總結

    微信小程式的簡易教程請參考官方文件:

    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協議的域名會報錯。