createqrcodephp技巧_微信小轨范前端根据内容生成二维码Qrcode

文章目录 [+]

项目中天生的样例

1、须要下载封装好的qrcode的js文件，下载地址：夸克网盘分享。

createqrcodephp技巧_微信小轨范前端根据内容生成二维码Qrcode

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) } },