微信小程序点击生成二维码功能

先看效果：

第一步：将需要的js文件 weapp.qrcode.js放置到utils中

第二步：wxml：

<view>
  <button bindtap='createQrcode' type="primary">生成二维码</button>
  <canvas id='qrcode' type="2d" style='width:300rpx;height:300rpx;margin-top: 30rpx;margin-left: 100rpx;' ></canvas>
</view>

 第三步：JS

import QRCode from '../../utils/weapp.qrcode'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    qrCodeLink:'微信小程序生成二维码，你会了吗？',
    qrcodePath:'哪里不会点哪里'
  },
// 生成二维码
createQrcode() {
  var that = this;
  const query = wx.createSelectorQuery()
  query.select('#qrcode')
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      var canvas = res[0].node
 
      // 调用方法drawQrcode生成二维码
      QRCode({
        canvas: canvas,
        canvasId: 'qrcode',
        text: that.data.qrCodeLink,
      })
 
      // 获取临时路径（得到之后，想干嘛就干嘛了）
      wx.canvasToTempFilePath({
        canvasId: 'qrcode',
        canvas: canvas,
        x: 0,
        y: 0,
        success(res) {
          // console.log('二维码临时路径：', res.tempFilePath)
          that.setData({
            qrcodePath: res.tempFilePath
          })
          console.log('二维码临时路径：', that.data.qrcodePath)
        },
        fail(res) {
          console.error(res)
        }
      })
    })
},
 
})

到这里，生成二维码功能就已经实现了

但是，你通过扫描这个二维码，发现不是跳转的链接，而是一段文字？

别慌，那是因为你 data 中的 qrCodeLink 二维码生成内容就是文字

只要你将这个参数改成链接就能正常跳转了        (#^.^#)