小程序生成二维码并保存到本地

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
 文件，创造显示的框架

<view class="container">
 <canvas class="canvas-code"canvas-id="canvas" style="background:#fff;width: 200px;height: 200px;"/>
 <form bindsubmit='generate'>
   <view><text>set content: </text></view>
   <input type='text' name='content' class="tl-price-input"></input>
   <button form-type='submit' class="g_button">generate</button>
 </form>
 <view class="modal-button">
   <button bindtap='savePic' class="g_button">save</button>
 </view>
</view>

其中第2行是用来显示二维码的位置。第3行的表单可以根据内容生成二维码 (绑定了generate 方法)。第9行按钮是保存图片的功能 (绑定了savePig 方法)。页面显示基本如下(你的可能没有css样式，不重要)：

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到本地。