小程序的一些摘要：绘制画布和内联webview

我做了一些小程序项目，专注于小程序嵌入式webview和小程序 canvas遇到的一些坑。

小程序画canvas的坑

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

要求：前端绘制一些动态数据，并使用画布动态生成小程序 QR码图像，最后生成并保存图片。

有两种方法可以在前端显示QR码图像：

1.后端调用微信api，直接返回前端的二进制数据将出现乱码。通常，后端首先将二进制数据转换为base64格式数据，然后返回到前端。如果是普通图像显示，则只需设置图像：

2.后台将二进制数据保存为服务器上的图片，然后返回前端QR码的绝对路径。

如果由于种种原因第二种背景不好，第一种方法微信官方回复是：真机上的小程序画布无法绘制base64格式的图片，你不能在画布上画出二维码吗？

此时，第三种方法是使用文件系统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) 沈阳app开发

=＆GT; {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 get local临时路径！src.includes（'https'）？resolve（src）: wx.getImageInfo（{src，success（res）{resolve（res）//res.path:返回临时路径}，失败（错误） ）{拒绝（错误）}}）}）}，复制代码

然后通过获取临时文件路径用画布绘制图片。

过去，这个问题已经解决了。绝大多数开发人员使用后端将图像的绝对路径返回到前端，而第三种类型可以使用后端来保存图像并减少许多后端服务器的操作。

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

特别是华为P20，哈哈真的是一台bug机。 小程序的canvas组件是一个本机组件。本机组件不在WebView呈现过程中。对于频繁绘图而且模型绘制缓慢，很容易混淆。解决方案是延迟图像的生成。

//在绘制画布的回调中，导出生成的图像，如果它是andriod，则延迟500ms生成。如果在500ms内出现模式问题，请延长延迟时间。 Ctx.draw（（）=＆gt; {//一些代码isAndroid＆amp;＆amp; setTimeout（（）=＆gt; {wx.canvasToTempFilePath（{//some code}）}，500）//一些代码}）复制代码

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

如果你想绘制一个隐藏的画布元素（hidden=true），将画布转换为图片，android是正常的，ios不会绘制画布。

其他的一些问题

使用css3旋转动画，对真机没有影响，最好用wx.createAnimation代替;

canvas元素无法添加css动画，它会非常卡，即使你使用wx.createAnimation代替它，它也很卡。还提到了这份官方文件。

小程序内嵌webview的一些坑

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

如果应用程序的主页和其他一些页面是服务器端呈现，那么提供的官方方法可能不准确，尤其是在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属性上复制代码

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

微信浏览器访问普通H5，小程序访问嵌入式webview下的H5。在许多情况下，这两个环境需要不同的数据缓存来区分功能。在某次更新后，微信开始共享微信浏览器和小程序存储，并且它正在哭泣。

解决方案：如果只有页面打开的页面相互传递数据，则可以使用sessionStorage临时缓存数据而不是localStorage。