1. 首先在 app.json的pages里添加generate页面，保存后自动生成generate文件
"pages": [
"pages/index/index",
"pages/generate/generate",
"pages/scan/scan",
"pages/setting/setting",
"pages/logs/logs"
]
如上列表的第二个元素pages/generate/generate，可以不用注意其他元素。
2. 完善generate.wxml文件，创造显示的框架
1 <view class="container">
2 <canvas class="canvas-code"canvas-id="canvas" style="background:#fff;width: 200px;height: 200px;"/>
3 <form bindsubmit='generate'>
4 <view><text>set content: </text></view>
5 <input type='text' name='content' class="tl-price-input"></input>
6 <button form-type='submit' class="g_button">generate</button>
7 </form>
8 <view class="modal-button">
9 <button bindtap='savePic' class="g_button">save</button>
10 </view>
11 </view>
其中第2行是用来显示二维码的位置。
第3行的表单可以根据内容生成二维码 (绑定了generate 方法)。
第9行按钮是保存图片的功能 (绑定了savePig 方法)。
页面显示基本如下(你的可能没有css样式，不重要)：
example.png
3. 完善generate.js文件，添加互动
generate.js 文件添加了两个方法，generate 和 savePig。分别为第二部绑定的方法
generate: function (e) {
let content
// 获取输入的 content 内容
content = e.detail.value.content
// console.log(key)
if (content) {
// 生成二维码 这里的QRCode方法下面有讲解
var qrcode = new QRCode('canvas', {
text: content,
width: 200,
height: 200,
padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
callback: (res) => {
// console.log(res.path)
// 接下来就可以直接调用微信小程序的api保存到本地 将图片地址保存到 postUrl
this.setData({
postUrl: res.path
})
}
})
// console.log(qrcode)
} else {
// 如果用户输入的 content 为空，弹出警告
wx.showToast({
title: 'content不能为空',
duration: 2000
})
}
},
// 保存二维码功能
savePic: function () {
wx.saveImageToPhotosAlbum({
filePath: this.data.postUrl,
success: function (data) {
wx.showToast({
title: '图片保存成功',
icon: 'success',
duration: 2000
})
}
})
}
这里需要注意，我们调用的new QRCode() 方法需要导入一个js文件
在 generate.js 文件的最上方加一行import QRCode from './weapp-qrcode.js'
然后我们从github上下载这个weapp-qrcode.js文件。注意只要这个文件就可以，不需要下载整个项目。将weapp-qrcode.js文件放到generate目录下即可。
4. 演示
目标：将 哈哈 内容生成二维码
输入哈哈，点击generate生成二维码。也可以save到本地。
23232.png
