微信小程序之生成二维码

最近项目中涉及到小程序的生成二维码，很是头疼，经过多次摸索，整理出了自己的一些思想方法，如有不足，欢迎指正。

首先完全按照小程序的结构依次填坑。

pages--index.wxml

<view class="wrap">
  <view>导游姓名：<text>{{guide.name}}</text></view>
</view>

<view class="wrapCode">
  <view>导游证号：<text>{{guide.id}}</text></view>
</view>

<view class="erCode">
  <canvas style="width: 650rpx;height: 650rpx;margin:80rpx auto;" canvas-id="qrcCanvas"/>
</view>

<button formType="submit" class="login-btn" hover-class="none" bindtap='saveQrImg'>保存二维码到手机相册</button>   

对于其他标签 以及结构我想应该不必多说了吧，但是canvas是重点，敲黑板。。。

pages--index.js

Page({
  data: {
      aaa:'aaa://',//这个参数根据自己不同的需求自己定义
      guide:{
        id:'',
        name:''
      },
      canvasId: "qrcCanvas",// canvas的Id 因为下面用的到
  },

由于我的页面是跳转的 也就是在上个页面输入的相关信息，然后跳转到这个页面中的，所以在onLoad()函数中接收下参数

onLoad: function (option) {
    this.setData({
      guide:option,
    })
  },

那下面就是最重要的了

onReady: function () {
    let size = this.setCanvasSize();//动态设置画布大小
    let http = this.data.hlj+this.data.guide.id;
    console.log(http);
    this.createQrCode(http, this.data.canvasId, size.w, size.h);  
  },

  setCanvasSize(){
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 686;//不同屏幕下canvas的适配比例；设计稿是750宽  
      var width = res.windowWidth / scale;
      var height = width;//canvas画布为正方形  
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error  
      console.log("获取设备信息失败" + e);
    }
    return size;  
  },

  createQrCode(str, canvasId, cavW, cavH){
    QR.api.draw(str, canvasId, cavW, cavH);  
  },

  saveQrImg(){
    // let http = this.data.hlj + '510301198801305998';
    //把canvas转成图片 成功返回url
    wx.canvasToTempFilePath({
      canvasId: 'qrcCanvas',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail: function (res) {
            console.log(res)
          }
        }) 
      }
    })
  },

 

转载于:https://www.cnblogs.com/wzy0526/p/8274431.html