背景
小程序目前没有开始推广,所以不能提供源码和二维码。
直接进入主题,说坑吧。
坑
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等页面跳转,是否支持异步函数
很显然,是不支持的,比如你在页面跳转的同时,又要获取设备信息(获取设备信息后保存为全局),下个页面不一定会拿到设备信息这个全局变量,在体验版和正式版几乎完全表现为拿不到,开发版本基本上可以拿到,所以在开发的时候要注意这个问题
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。