在微信小程序开发项目中，后端返回的api接口数据中，有一个支付页面，这个支付页面网址在小程序中是打不开的，需要生成二维码让客户扫描支付，客户扫描二维码就会打开支付页面，支付项目金额！
项目中生成的样例
1、需要下载封装好的qrcode的js文件，下载地址：夸克网盘分享。
2、在我们需要在使用的页面将qrcode.js文件引入
import * as QRCode from '../../utils/qrcode.js'
3、首先微信小程序wxml文件中写入canvas标签
<canvas canvasId="myCanvas" style="width: 450rpx;height: 450rpx;background:#fff;margin: 0 auto;"></canvas>
4、如果有中文的话，需要一个方法来解决中文乱码的问题（没有可不写）
toUtf8(str) { //解决中文乱码的问题 var out, i, len, c; out = ""; len = str.length; //文本域值的长度 for (i = 0; i < len; i ) { c = str.charCodeAt(i); //返回值是UTF-16的代码单元值 0-65535之间的整数 参数：大于等于0（如果小于0或者等于大于字符串的长度 则返回nan） // console.log('cc',c); if ((c >= 0x0001) && (c <= 0x007F)) { out = str.charAt(i); // 从一个字符串中返回指定的字符 // console.log('out',out); //就是文本域的值 } else if (c > 0x07FF) { out = String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out = String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out = String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out = String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out = String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; },
5、 获取可使用屏幕的宽高度的方法（px）
// 获取可使用窗口的框高度getWindowWH(){ var seeWH = {} // 往seeWH对象中新增窗口宽高度两个属性 try { const res = wx.getSystemInfoSync()// 获取设备信息 var w = res.windowWidth / (750 / 450) //可使用窗口的宽度 var h = res.windowWidth / (750 / 450) //可使用窗口的高度 seeWH.w = w seeWH.h = h } catch (e) { // Do something when catch error console.log('获取设备信息失败', e); } return seeWH},
6、创建画布的方法
// 创建画布 接收传递过来的几个实参drawCanvas(e,n,t,i){ var that=this // e:代表文本域的值 // n：canvasID // t：可使用窗口的宽度 // i：可使用窗口的高度 // that.data.bgVal：背景颜色 默认：#fff // that.data.clVal ：前景颜色 默认：#000 //这里的 drawQrcode.api.draw 是引入封装好的js文件进来里面 的 draw方法 QRCode.api.draw(e,n,t,i,"","", that.data.bgVal, that.data.clVal)},
7、 用画布内容区域生成导出一个指定的大小图片 的方法
createImage(){ var that = this wx.canvasToTempFilePath({ canvasId:"myCanvas", //必选 success(res){ // 生成好了关闭loading效果 wx.hideLoading() console.log(res.tempFilePath) } })},
8、点击生成二维码按钮事件
// 点击生成二维码 createQRCode() { var that=this // 有文本域的值 提示loading效果 wx.showLoading({ title: "生成中" }) // 获取可使用宽高度 let obj= that.getWindowWH() // 调用创建画布的方法，传递参数 that.drawCanvas('https://www.vipshare8.com/', "myCanvas", obj.w, obj.h) setTimeout(()=>{ //调用 把当前画布内容导出生成指定大小的图片 that.createImage() },300) } },
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。