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

[复制链接]
查看: 2863|回复: 9
  • 萌哒
    2018-11-19 14:03
  • 发表于 2019-1-23 14:20:16 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

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

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

    需求:前端将一些动态数据,以及动态生成的小程序二维码图片用canvas画出来,最后生成且可保存的一张图片。
    前端显示二维码图片一般有两种方法:
    1.后端调用微信api,直接返回的二进制数据到前端会乱码,一般后端先将二进制数据转为base64格式数据,然后返回到前端。若是当普通的图片显示只需要设置图片:

    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属性上

    <span class="hljs-tag"></span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"web-view/span>复制代码第二个坑,微信浏览器和小程序会共用localStorage

    微信浏览器内访问的是正常的H5,小程序内访问的是内嵌的webview下的H5,很多时候需要这俩个环境各有不同的数据缓存,区分功能。 而微信在某次更新后就开始共用微信浏览器和小程序的storage了,也是哭哭啊。。。。
    解决:如果只是一个页面打开的后续页面间互相传递数据,那么可以使用sessionStorage去临时缓存数据而不用localStorage。
    发表于 2019-1-24 13:35:22 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复

    使用道具 举报

    发表于 2019-1-31 05:25:29 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复

    使用道具 举报

    发表于 2019-1-31 05:56:38 | 显示全部楼层
    珍惜生命,果断回帖。
    回复

    使用道具 举报

    发表于 2019-1-31 05:56:55 | 显示全部楼层
    我只是路过打酱油的
    回复

    使用道具 举报

    发表于 2019-1-31 07:10:08 | 显示全部楼层
    这个帖一般般,还可以哦。
    回复

    使用道具 举报

    发表于 2019-1-31 13:37:09 | 显示全部楼层
    么有分,谁能送我点积分啊::>_<::
    回复

    使用道具 举报

    发表于 2019-1-31 13:47:43 | 显示全部楼层
    额,看不懂在说神马~@_@
    回复

    使用道具 举报

    发表于 2019-1-31 15:59:40 | 显示全部楼层
    正需要,支持楼主大人了!
    回复

    使用道具 举报

    发表于 2019-2-10 06:35:51 | 显示全部楼层
    回的人少,我来小顶一下
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

     
     
    技术支持
    在线客服
    售后交流群瑞恩社区™售后</font><br><span>交流
    工作时间:
    8:00-18:00
    客服热线:
    15368564009
    微信扫一扫
    返回顶部 关注微信 下载APP 返回列表