【小程序】做游戏类小程序遇到的坑及经验

背景

小程序目前没有开始推广，所以不能提供源码和二维码。
直接进入主题，说坑吧。

坑

1、作为一个游戏，静态资源太多……
解决：小程序要求所有打包上传的文件不超过2M，图片都已经过压缩，还是超载了，所以，只能将一部分放到远程服务器，然后再请求，但是远程服务器的域名不需要加入到域名信息中。

2、第一个问题导致了这个问题的产生：
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()
  }
})

`
3、分享/转发的功能，使用自定义文字、图片，非远程、非本地（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绘图没有完成
  }

4、wx.redirectTo等页面跳转，是否支持异步函数

很显然，是不支持的，比如你在页面跳转的同时，又要获取设备信息（获取设备信息后保存为全局），下个页面不一定会拿到设备信息这个全局变量，在体验版和正式版几乎完全表现为拿不到，开发版本基本上可以拿到，所以在开发的时候要注意这个问题