微信小程序生成帶參二維碼——並通過掃碼獲取二維碼的參數

注意：保證當前小程序要有線上版本

通過url拼接參數。http://***.com?id=123

這種方式要利用一個插件（https://github.com/adventurewithme/chajian裏面的qrcode.js）。

要轉換的這個url必須要在微信公衆平臺配置了掃普通鏈接二維碼打開小程序，如下圖：

測試連接是開發人員測試用的，跳轉至測試版本的小程序，如果，轉換的url不是測試連接，那麼就會跳轉到線上版本的小程序。並且有一個缺點，只能跳轉到下圖配置的小程序功能頁面。

wxml部分：

<view class="container-box">
    <view class="img-box">
        <image mode="scaleToFill" src="{{imagePath}}"></image>
    </view>
</view>

在js部分要先引入插件：var QR = require("../../utils/qrcode.js");

var QR = require("../../utils/qrcode.js");
Page({
  data:{
    imagePath:'',
    placeholder: 'https://www.baidu.com?name=test123'//這裏的連接換成自己的，並且已經在微信公衆平臺配置掃普通鏈接二維碼打開小程序
  },
  onLoad:function(options){
    // 頁面初始化 options爲頁面跳轉所帶來的參數
    var size = this.setCanvasSize();//動態設置畫布大小
    var initUrl = this.data.placeholder;
    this.createQrCode(initUrl, "mycanvas", size.w, size.h);
    

  },
  //適配不同屏幕大小的canvas
  setCanvasSize:function(){
    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:function(url,canvasId,cavW,cavH){
    //調用插件中的draw方法，繪製二維碼圖片
    QR.api.draw(url,canvasId,cavW,cavH);
    setTimeout(() => { this.canvasToTempImage();},1000);
    
  },
  //獲取臨時緩存照片路徑，存入data中
  canvasToTempImage:function(){
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: function (res) {
          var tempFilePath = res.tempFilePath;
          console.log(tempFilePath);
          that.setData({
              imagePath:tempFilePath,
             // canvasHidden:true
          });
      },
      fail: function (res) {
          console.log(res);
      }
    });
  },
 
})

這樣頁面上就生成了一個普通二維碼。

當placeholder與測試連接相同的時候，掃這個二維碼就跳轉至測試版本的小程序，placeholder與測試連接不同，則跳轉至線上版本的小程序。

獲取這個placeholder後拼接的參數的方式是：在打開的這個頁面的onLoad函數裏面獲取options。

即：

上面這張圖是小編的url只拼接了一個參數id，如果拼接了多個參數，需要按照情況處理。

如此就得到了url中的id。

通過微信開發文檔將頁面轉換爲帶參數的小程序碼（一定要保證當前小程序有線上版本）

參考文檔：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html

注意：這種方式是一直會跳轉到線上版本的小程序。

小編全程通過前端請求，所以要將微信開發者工具調爲不校驗合法域名。

1. 首先我們需要獲取小程序的access_token

getaccess(){
    var that=this;
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential',
      data: {
        appid: '你的appid',
        secret: '你的小程序密鑰'
      },
      success:function(res){
        that.getcode(res.data.access_token)
      }
    })
  },

2.將要轉換的頁面和參數轉換爲小程序碼。

請求微信的接口的時候請求方式爲post，要注意設置相應的數據格式爲arraybuffer，請求完畢後將數值轉換爲base64。

  getcode(access_token){
    var that=this;
    var scene='id=123&name=jack';//拼接你要添加的參數
    wx.request({
      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + access_token,
      data: {
        scene: scene,
        page: 'pages/logs/logs',//線上的小程序一定要有這個頁面
      },
      method:'POST',
      responseType: 'arraybuffer',
      success:function(res){
        var src2 = wx.arrayBufferToBase64(res.data);  //對數據進行轉換
        that.setData({
          src2
        })
      }
    })
  },

base64在wxml上面顯示方式爲：

<image src="data:image/png;base64,{{src2}}" style="width:750rpx;height:750rpx"></image>

上面就得到了當前頁面小程序的帶參二維碼。

掃碼獲取這個二維碼攜帶的參數的方式是，在pages/logs/logs頁面的onLoad函數裏面獲取options。

即：

 onLoad: function (options) {
    this.setData({
      scene: decodeURIComponent(options.q)
    })
  },

此時可以得到q爲“id=123&name=jack”。