小程序实现生成二维码

小程序生成二维码方式很多，最简单的莫过于使用weapp-qrcode，直接引入其weapp.qrcode.min.js，详细实现如下:

1、github上下载weapp-qrcode，把weapp.qrcode.min.js引入到小程序中

下载地址：https://github.com/yingye/weapp-qrcode

weapp.qrcode.min.js文件位置位于:

1、首先在wxml里使用<canvas>标签，设置canvas-id

<canvas style="height: 300rpx;width: 300rpx;" canvas-id="myQrcode"></canvas>

 2、在js中引入小程序中的weapp.qrcode.min.js，utils是我weapp.qrcode.min.js放置的位置文件夹，路径根据自己weapp.qrcode.min.js的位置引入

const qrCode = require('../../utils/weapp.qrcode.min');

3、使用qrcode生成二维码

    qrCode({
      width: 100,  // 图片宽度
      height: 100, // 图片高度
      canvasId: 'myQrcode', // <canvas>标签中的canvas-id值
      text: '123456' , //图片中的内容，根据自己的需求进行设置设置
      // correctLevel: 1,  // //纠错等级
      // background : "#ffffff",//背景颜色  
      // foreground : "#000000",//前景颜色
    })

4、js中详细实现，代码如下:

// pages/test/index.js
const qrCode = require('../../utils/weapp.qrcode.min');
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    qrCode({
      width: 100,  // 图片宽度
      height: 100, // 图片高度
      canvasId: 'myQrcode', // <canvas>标签中的canvas-id值
      text: '123456' , //图片中的内容，根据自己的需求进行设置设置
      // correctLevel: 1,  // //纠错等级
      // background : "#ffffff",//背景颜色  
      // foreground : "#000000",//前景颜色
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

5、生成二维码如下: