【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况

微信小程序，在使用canvas画海报的时候，会导致个别用户无法生成的情况，你们可以尝试把绘画某些块的代码注释掉再进行扫码调试，我前几天就遇到个别客户无法生成商品海报的情况，刚开始是以为上一个同事留的坑，当我重构画海报的页面代码以后，还是出现这种问题。

我在这里提醒开发者们，如果出现设备兼容性问题，请各位开发者不要使用真机调试，因为真机调试可以解决90%以上设备兼容性的问题，可以用扫码预览打开调试进行调试，今天我说的这个问题坑了我2天！电脑上无法复现无法绘画的问题，无奈之下只能让客户配合我这边把有问题的代码注释掉让客户扫码进去以后截图给我看看是什么效果，最终发现了问题，就是在绘画微信用户昵称的时候出现了问题，因为客户微信昵称第六个字符是带表情的，这里注意一下，不是canvas不能绘画表情，是因为我处理了到第五个字的时候就截取用省略号显示，比如：我是微信名.... 这里正好第六个字符是表情，我这边用了substr(0,6)字符串截取前面5个字符进行绘画导致最后draw的时候出现绘画不出海报，这个问题控制台不会有任何报错，下面是错误的截取用户名称代码：

// 检查用户名称第一行大于5个字换行
let username = this.position.drawUserName.content
// username是用户名称 包含表情，不能用substr进行截取 否则绘画海报出现空白  无任何报错
let onelineusername = username.substr(0,6)

最后用了如下解决办法：

先把微信表情过滤掉再换成subString(0,5)进行截取，完美解决！！！

// 过滤微信表情
let username = this.drawUserName.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");
// 截取前面五个字符然后省略号显示
let onelineusername = username.substring(0,5)

【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况相关推荐

小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
微信小程序canvas画价格走势图（六）
到上一篇,可以说,所有的工作已经完成了,那为什么还会有第六篇呢?因为,客户改需求了,UI设计图改了,我也就不得不改代码,画一个新的版本出来.我在大功告成,开始写第一篇的时候突然改的,我也就准备加一篇来 ...
微信小程序canvas画价格走势图（三）
今天继续更新在微信小程序上用canvas画价格走势图.上一篇讲了图上主要的部分,也就是折线图的绘制.假如我在我的绘图主函数中只调用了绘制折线图的函数,效果是这样的: 可以说除了作为坐标背景的<i ...
微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
微信小程序canvas 画圆形带刻度进度条
.canvas_1{ position: absolute; width: 120rpx; height: 120rpx; background: rgba(255, 00, 0, 0.0); } & ...
微信小程序canvas画图案列,实现生成头像并保存,小程序新版canvas变化,小程序中canvas注意事项
你一定见过很多制作头像的小程序,无论是国庆的红旗,圣诞的帽子,还是疫情的口罩,都可以用小程序生成应景的头像,那么具体的代码是怎么实现的呢?前些天帮别人做了一个生成姓氏头像的功能,里面的实现原理基本一致 ...
微信小程序canvas画价格走势图（五）
最近比较忙,所以趁着今年的最后一个周末,来把最后两篇完结掉.这是倒数第二篇了,这一篇的内容很简单,讲的是细节的绘制,也就是底部的刻度线和日期的绘制,以及一个小小的总结. 目前我们完成了canvas的准 ...
微信小程序--canvas 画海报转发好友下载本地
获取本地手机的屏幕宽高(宽高需要按照自己实际需求计算) toCanvas() {let that = thiswx.getSystemInfo({success: function(res) {con ...
圆头像微信小程序绘图_微信小程序canvas画圆头像
wxml: wxss: canvas{ width:375px; height:100px } js const headImge = 'https://ss0.bdstatic.com/70cFvH ...

【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况

【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况相关推荐

最新文章

热门文章