小程序的一些总结：画canvas和内嵌webview

前言

    作了一些小程序项目，着重记录一下小程序内嵌webview以及小程序画canvas遇到的一些坑。

小程序画canvas的坑

第一个坑，canvas没法画base64格式的二维码。

需求：前端将一些动态数据，以及动态生成的小程序二维码图片用canvas画出来，最后生成且可保存的一张图片。
前端显示二维码图片通常有两种方法：
    1.后端调用微信api，直接返回的二进制数据到前端会乱码，通常后端先将二进制数据转为base64格式数据，而后返回到前端。如果当普通的图片显示只须要设置图片：
        <image src="data:image/png;base64,图片base64数据"></image>
    2.后台在服务器上将二进制数据保存为一张图片，而后返回给前端一个二维码的绝对路径。
若后台由于各类缘由很差实现第2种，且第1种方法微信官方的回复是：真机上小程序的canvas没法绘制base64格式的图片，难道就没法在canvas里绘制二维码了？
    此时还有第3种方法就是利用小程序的文件系统FileSystemManager.writeFile()Api，将base64数据的图片写入到本地，以后去操做这个本地的图片。

第一步建立写入文件的文件夹

mkdir() {
    return new Promise((resolve, reject) => {
        this.fs.access({ // 先判断有没有resource目录
            path: `${wx.env.USER_DATA_PATH}/resource`, // wx.env.USER_DATA_PATH获取本地文件路径，开发者工具是:"http://usr",真机是:"wxfile://usr"
            success: (res) => {
                console.log('access:',res)
                resolve(res)
            },
            fail: (err) => {
                console.error('access:',err)
                // 不存在，建立一个文件夹
                this.fs.mkdir({
                    dirPath: `${wx.env.USER_DATA_PATH}/resource`,
                    success: (res) => {
                        console.log('mkdir:', res)
                        resolve(res)
                    }, 
                    fail: (err) => {
                        console.error(err)
                        reject(res)
                    }
                })
            }
        })
    })
}
复制代码

第二步将base64图片写入建立的文件夹

writeBase64Image() {
    return this.mkdir().then(() => {
        return new Promise((resolve, reject) => {
            this.fs.writeFile({
                filePath: `${wx.env.USER_DATA_PATH}/resource/${this.openId}.png`, // 能够用openId来命名此图片
                data: this.base64Code, //后台返回的base64编码的图片，不须要加'data:image/png;base64,'
                encoding: 'base64', // 存的文件类型的选择base64
                success:(res) => {
                    console.log('writeFile:', res)
                    resolve(res) 
                },
                fail:(err) => {
                    console.error('writeFile:',err)
                    reject(err)
                }
            })
        })
    })
}
复制代码

第三步得到图片的缓存临时地址

若是是绝对路径的网络图片，绘制图片前须要将图片缓存到本地，若是是写入的本地文件则能够直接绘制。

getImageSrc(src) {
        return new Promise((resolve, reject) => {
            // 若是是本地图片则直接返回;若是是网络路径的图片，则先缓存到本地，wx.getImageInfo或者wx.downloadFile得到本地临时路径
            !src.includes('https') ? resolve(src) :
                wx.getImageInfo({
                    src,
                    success(res) {
                        resolve(res) // res.path:返回的临时路径
                    },
                    fail(err) {
                        reject(err)
                    }
                })
        })
    },
复制代码

以后经过得到临时文件路径用canvas绘制图片。

之前遇到这个问题，绝对大多数的开发者都是采用后端返回图片绝对路径给前端，而第3种则能够前端去作保存图片的事，减小不少后端服务器的操做。

第二个坑，一些android机生成的canvas图片，文字样式混乱

尤为是华为P20，哈哈真真是bug神机了。 小程序的canvas组件是原生组件，原生组件脱离在 WebView 渲染流程外，对于频繁绘制而机型又绘制较慢时，就很容易样式错乱，解决方法就是生成图片时给必定时间的延迟。

// 在绘制canvas的回调里，导出生成的图片，若是是andriod则延迟500ms生成。若是500ms还会有样式问题，那就增长延迟时间。
ctx.draw(() => {
    // some code
    isAndroid && setTimeout(() => {
        wx.canvasToTempFilePath({
            // some code
        })
    },500)
    // some code
})
复制代码

第三个坑，在ios上只能绘制显示的canvas元素，若设置wx:if或hidden，在初始化时必须是显示的。

若是你想绘制一个隐藏的canvas元素(hidden=true)，将这个canvas转为图片保存，android下正常，ios下则不会绘制canvas。

其余的一些问题

用css3的旋转动画，在真机上没效果，最好使用wx.createAnimation代替；
canvas元素不能添加css动画，会很是的卡，即便使用wx.createAnimation代替，也是很卡。这个官方文档也有提到。

小程序内嵌webview的一些坑

第一个坑，判断是否在小程序环境内

若是app的首页以及一些其余页面是服务端渲染，那么官方的提供的方法，并不必定能判断准确，尤为在android下。
若是想经过，navigator.userAgent里的miniprogram字符串判断小程序，我劝你仍是放弃吧....，真机下miniprogram字符串时有时无，官方的回复永远都是这是最近出现的bug，会在后续版本修复......

// 在服务端渲染的页面下，下面的方法没法保证准确的判断，尤为在andriod下
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}
// 或者
wx.miniProgram.getEnv(function (res) {
  console.log(res.miniprogram) // true
})
复制代码

解决：1.将小程序标识拼在web-view的src属性上

<web-view src="https://XXXX.com?isMiniProgram=1"></web-view>
复制代码

第二个坑，微信浏览器和小程序会共用localStorage

微信浏览器内访问的是正常的H5，小程序内访问的是内嵌的webview下的H5，不少时候须要这俩个环境各有不一样的数据缓存，区分功能。 而微信在某次更新后就开始共用微信浏览器和小程序的storage了，也是哭哭啊。。。。

解决：若是只是一个页面打开的后续页面间互相传递数据，那么可使用sessionStorage去临时缓存数据而不用localStorage。

第三个坑，webview页面分享时，必定要将webview的url进行encode，不然会丢失参数，若是一次encode不行那就两次，两次不行就三次。。。

小程序的平台兼容性，仍是不错的，可是确实还存在不少的bug，只有不断地记录总结，才能避免本身和更多的人踩坑。