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

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  
2    
3    

4        set content: 
5        
6        generate
7    
8    
9      save
10   
11  

其中第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