【小程序】作遊戲類小程序遇到的坑及經驗

背景

小程序目前沒有開始推廣，因此不能提供源碼和二維碼。
直接進入主題，說坑吧。

坑

一、做爲一個遊戲，靜態資源太多……
解決：小程序要求全部打包上傳的文件不超過2M，圖片都已通過壓縮，仍是超載了，因此，只能將一部分放到遠程服務器，而後再請求，可是遠程服務器的域名不須要加入到域名信息中。

二、第一個問題致使了這個問題的產生：
canvas繪製圖片的時候，使用drawImage(),若是圖片是請求服務器上的，會畫不出來。
解決：
`

var that = this
var avatar = this.data.avatar
// deviceInfo是拿到的設備信息
var [W, H] = [this.data.deviceInfo.windowWidth, this.data.deviceInfo.windowHeight]
// 獲取圖片信息
wx.getImageInfo({
  src: avatar,
  success: function (res) {
    wx.setStorage({
      key: 'storageHeadImg',
      data: res.path,
    });
    let storageHeadImg = wx.getStorageSync('storageHeadImg')
    ctx.drawImage(storageHeadImg, 0, 0, 132, 132, (W - 132 / 750 * W) / 2, H * 0.04, 132 / 750 * W, 132 / 750 * W)
    ctx.draw()
  }
})

`
三、分享/轉發的功能，使用自定義文字、圖片，非遠程、非本地（canvas繪製）

onShareAppMessage: function () {
    let txt = this.getTxt(parseInt(this.data.score))
    return {
      title: txt,
      path: '/pages/logs/logs',
      imageUrl: this.data.shareScorePath
    }
  },
  getShareScoreImg: function () {
    // deviceInfo是拿到的設備信息
    let [W, H] = [this.data.deviceInfo.windowWidth, this.data.deviceInfo.windowHeight]
    let that = this
    shareCtx = wx.createCanvasContext('shareScoreCanvas')
    shareCtx.drawImage('../../static/images/share_score.png', 0, 0, shareCtx.width, shareCtx.height)
    shareCtx.width = 300 // 小程序要求必須300
    shareCtx.height = 300/420*336 // 根據設計圖計算出
    shareCtx.setFontSize(70)
    shareCtx.setTextAlign('center')
    shareCtx.setFillStyle('rgb(68, 127, 274)')
    shareCtx.fillText(this.data.score, 150, 155)
    shareCtx.draw()
    let that = this
    setTimeout(()=>{
      // 把當前畫布指定區域的內容導出生成指定大小的圖片，並返回文件路徑。
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: shareCtx.width,
        height: shareCtx.height,
        destWidth: shareCtx.width,
        destHeight: shareCtx.height,
        canvasId: 'shareScoreCanvas',
        success: function (res) {
          that.setData({
            shareScorePath: res.tempFilePath
          })
        },
        complete: function (res) {
          console.log('res', res)
        }
      })
    }, 500) // 防止canvas繪圖沒有完成
  }

四、wx.redirectTo等頁面跳轉，是否支持異步函數

很顯然，是不支持的，好比你在頁面跳轉的同時，又要獲取設備信息（獲取設備信息後保存爲全局），下個頁面不必定會拿到設備信息這個全局變量，在體驗版和正式版幾乎徹底表現爲拿不到，開發版本基本上能夠拿到，因此在開發的時候要注意這個問題