3

背景

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

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

clipboard.png

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等页面跳转,是否支持异步函数

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

七王国
326 声望39 粉丝