微信小程序之生成二維碼

最近項目中涉及到小程序的生成二維碼，非常頭疼，通過屢次摸索，整理出了本身的一些思想方法，若有不足，歡迎指正。

首先徹底按照小程序的結構依次填坑。

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)
          }
        }) 
      }
    })
  },