[视频] 学习微信云托管服务的创建和管理，测试和灰度发布流程，服务相关设置的指导。

该功能主要是将你输入的文字或者网站亦或者上传的图片生成二维码，别人通过扫描二维码就可访问你输入的内容或者打开对应的网站亦或者图片。页面的模板和样式这里就不赘述了，直奔主题。如何通过js实现这些功能呢？ 一、监听用户输入 输入的文本或者网址/* 小程序端 js */ // 监听用户输入的文本 bindText: function (e) { this.setData({ textVal: e.detail.value }) }, // 监听用户输入的网站 bindWebsite: function (e) { this.setData({ websiteVal: e.detail.value.replace(/[\u4e00-\u9fa5]/g, '') }) }, 上传图片/* 小程序端 js */ // 上传图片 uploadImg: function() { const that = this dbUpload({ name: 'album', data: { openid: wx.getStorageSync('openid'), time: util.formatDate(new Date()) + ' ' + util.formatTime(new Date()) } }).then( async res=>{ if (res.url) { success('上传成功') that.setData({ uploadedImg: res.url, showImg: false }) } else { fail('上传失败！') } }) }, 图片生成二维码的思路：将图片传给后台，返回该图片的url及地址，然后将这个地址生成二维码使用。 textVal文本，websiteVal网址，uploadedImg图片地址 其中 dbUpload() 方法进行了封装，封装代码如下，这个小程序是云开发，小程序端可直接操作云开发后台数据库wx.cloud.uploadFile()   /* 小程序端 util.js封装 */ //添加或者更新数据 export const dbAdd = (param) => { if (param.loading) { wx.showLoading({ title: '正在处理...' }) } const promise = new Promise((resolve, reject) => { let control ={}; if (param.where){ //数据替换 control = db.collection(param.name).doc(param.where).update({ data: param.data }) }else{ //直接添加 control = db.collection(param.name).add({ data:param.data }) } control.then(res => { resolve(res) // tip('操作成功！') }) .catch(err=>{ tip('操作失败，请重试！') }) }) return promise } //上传图片 export const dbUpload = (param) => { const promise = new Promise((resolve, reject) => { // 待插入的集合名字 let nameStr = param.name wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { wx.showLoading({ title: '正在上传...' }) //文件名称 let filePath = res.tempFilePaths[0]; const name = parseInt(Math.random() * 1000000000); const cloudPath = nameStr + name + filePath.match(/\.[^.]+?$/)[0] if (param.fileId){ //更新文件得情况则先删除文件 wx.cloud.deleteFile({ fileList: [param.fileId] }) } //上传文件到服务器 wx.cloud.uploadFile({ cloudPath,//云存储图片名字 filePath//临时路径 }).then( async res=>{ const uploadedImg = await wx.cloud.getTempFileURL({ fileList: [{ fileID: res.fileID, }] }).then(res => { return res.fileList[0].tempFileURL }) if (param.data) { param.data['fileID'] = res.fileID; param.data['url'] = uploadedImg; //存储或者更新数据 const data = await dbAdd({ name: nameStr, where: param.where || null, data: param.data }); data['fileID'] = res.fileID; data['url'] = uploadedImg; return data } else { return uploadedImg } }).then(res=>{ resolve(res) }); } }) }) return promise } 在数据库中新建集合 album ，我这里已经新建好了。 [图片] 二、设置画布大小（及二维码容器） // 设置画布大小 setCanvasSize: function () { const size = {}; try { const res = wx.getSystemInfoSync(); const scale = 750 / 370; const width = res.windowWidth / scale; const height = width;//canvas画布为正方形 size.w = width; size.h = height; } catch (e) { // Do something when catch error console.log("获取设备信息失败" + e); } return size; }, 三、生成二维码 在生成二维码时，引入了一个js库，需要的请关注公众号留言哦！ const QR = require("../../../../utils/qrcode.js"); //调用插件中的draw方法，绘制二维码图片 createQrCode: function (str, canvasId, cavW, cavH) { QR.api.draw(str, canvasId, cavW, cavH); }, // 生成二维码 makeQrcode: function () { const active = this.data.active; const textVal = this.data.textVal.trim(); const websiteVal = this.data.websiteVal.trim(); if (active==0) { if (!textVal) return false; this.createQrCode(this.data.textVal, "qrcCanvas", this.size.w, this.size.h); } else if (active == 1) { if (!websiteVal) return false; this.createQrCode(this.data.websiteVal, "qrcCanvas", this.size.w, this.size.h); } else if(active == 2) { if (this.data.showImg) return false; this.createQrCode(this.data.uploadedImg, "qrcCanvas", this.size.w, this.size.h); } this.setData({ canvasHidden: false, }) }, 四、保存二维码至相册 通过画布 wx.canvasToTempFilePath() 生成图片 小程序api：wx.saveImageToPhotosAlbum()保存图片（需用户授权）  // 保存二维码 save: function () { const that = this; if (!that.data.canvasHidden) { wx.canvasToTempFilePath({ canvasId: 'qrcCanvas', success: (res) => { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: (res) => { success('保存成功') }, fail: (err) => { if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') { wx.showModal({ title: '提示', content: '您未授权，请点击底部按钮打开授权！', showCancel: false }) that.setData({ openSettingBtnHidden: false }) } } }) }, fail: (err) => { console.log(err) } }, that) } }, [图片] [图片] 识别小程序二维码体验功能

weapp-qrcode-canvas-2d weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码（外部二维码）的js包。canvas 2d 接口支持同层渲染且性能更佳，建议切换使用，可大幅提升生成图片的速度。 仓库地址 weapp-qrcode-canvas-2d【码云gitee】 weapp-qrcode-canvas-2d【github】 [图片] 测试环境 微信小程序基础库版本：2.10.4 开发者工具版本：Stable 1.03.2101150 Usage 先在 wxml 文件中，创建绘制的 [代码]canvas[代码]，并定义好 [代码]width[代码], [代码]height[代码], [代码]id[代码] , [代码]type[代码] ，其中type的值必须为[代码]2d[代码] [代码]<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas> [代码] 安装方法1：直接引入 js 文件 直接引入 js 文件，使用 [代码]drawQrcode()[代码] 绘制二维码 [代码]// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目中。路径根据实际引用的页面路径自行改变 import drawQrcode from '../../utils/weapp.qrcode.esm.js' [代码] 安装方法2：npm安装 [代码]npm install weapp-qrcode-canvas-2d --save [代码] // 然后需要在小程序开发者工具中：构建npm [代码]import drawQrcode from 'weapp-qrcode-canvas-2d' [代码] 安装完成后调用 例子1：没有使用叠加图片 [代码]const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node // 调用方法drawQrcode生成二维码 drawQrcode({ canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, background: '#ffffff', foreground: '#000000', text: 'abc', }) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ canvasId: 'myQrcode', canvas: canvas, x: 0, y: 0, width: 260, height: 260, destWidth: 260, destHeight: 260, success(res) { console.log('二维码临时路径：', res.tempFilePath) }, fail(res) { console.error(res) } }) }) [代码] 例子2：使用叠加图片(在二维码中加logo) [代码]const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node var img = canvas.createImage(); img.src = "/image/logo.png" img.onload = function () { // img.onload完成后才能调用 drawQrcode方法 var options = { canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, paddingColor: '#fff', background: '#fff', foreground: '#000000', text: '123456789', image: { imageResource: img, width: 80, // 建议不要设置过大，以免影响扫码 height: 80, // 建议不要设置过大，以免影响扫码 round: true // Logo图片是否为圆形 } } drawQrcode(options) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ x: 0, y: 0, width: 260, height: 260, destWidth: 600, destHeight: 600, canvasId: 'myQrcode', canvas: canvas, success(res) { console.log('二维码临时路径为：', res.tempFilePath) }, fail(res) { console.error(res) } }) }; }) [代码] API drawQrcode([options]) options Type: Object 参数 必须 说明 示例 canvas 必须 画布标识，传入 canvas 组件实例 canvasId 非 绘制的[代码]canvasId[代码] [代码]'myQrcode'[代码] text 必须 二维码内容 ‘123456789’ width 非 二维码宽度，与[代码]canvas[代码]的[代码]width[代码]保持一致 260 padding 非 空白内边距 20 paddingColor 非 内边距颜色 默认与background一致 background 非 二维码背景颜色，默认值白色 [代码]'#ffffff'[代码] foreground 非 二维码前景色，默认值黑色 [代码]'#000000'[代码] typeNumber 非 二维码的计算模式，默认值-1 8 correctLevel 非 二维码纠错级别，默认值为高级，取值：[代码]{ L: 1, M: 0, Q: 3, H: 2 }[代码] 1 image 非 在 canvas 上绘制图片，层级高于二维码，v1.1.1+版本支持。具体使用见：例子2 [代码]{imageResource: '', width:80, height: 80, round: true}[代码]