快捷導(dǎo)航

微信小程序動態(tài)生成二維碼的實現(xiàn)代碼

更新時間：2018年07月25日 14:54:51 作者：She_lock

這篇文章主要介紹了微信小程序動態(tài)生成二維碼的實現(xiàn)代碼,需要的朋友可以參考下

效果圖如下：

實現(xiàn)

wxml

<!-- 存放二維碼的圖片-->
<view class='container'>
  <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
</view>
<!-- 畫布，用來畫二維碼，只用來站位，不用來顯示-->
<view class="canvas-box">
  <canvas hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas" />
</view>

wxss

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.container image {
  width: 686rpx;
  height: 686rpx;
  background-color: #f9f9f9;
}
.canvas-box {
  position: fixed;
  top: 999999rpx;
  left: 0;
}

js

var QR = require("../../../lib/qrcode.js");
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    canvasHidden: false,
    imagePath: '',
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    //option為上個頁面?zhèn)鬟f過來的參數(shù)
    var jiaoyanCode = 'sorry,jiaoyanCode is loss';
    if (options) {
      jiaoyanCode = options.jiaoyanCode;
    }
    console.log(jiaoyanCode);
    var size = this.setCanvasSize(); //動態(tài)設(shè)置畫布大小 
    this.createQrCode(jiaoyanCode, "mycanvas", size.w, size.h);   
  },
  //適配不同屏幕大小的canvas
  setCanvasSize: function() {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 686; //不同屏幕下canvas的適配比例；設(shè)計稿是750寬 686是因為樣式wxss文件中設(shè)置的大小
      var width = res.windowWidth / scale;
      var height = width; //canvas畫布為正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("獲取設(shè)備信息失敗" + e);
    }
    return size;
  },
  /**
   * 繪制二維碼圖片
   */
  createQrCode: function(url, canvasId, cavW, cavH) {
    //調(diào)用插件中的draw方法，繪制二維碼圖片
    QR.api.draw(url, canvasId, cavW, cavH);
    setTimeout(() => {
      this.canvasToTempImage();
    }, 1000);
  },
  /**
   * 獲取臨時緩存照片路徑，存入data中
   */
  canvasToTempImage: function() {
    var that = this;
    //把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑。
    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);
      }
    });
  },
  /**
   * 點擊圖片進行預(yù)覽
   */
  previewImg: function (e) {
    var img = this.data.imagePath;
    console.log(img);
    wx.previewImage({
      current: img, // 當(dāng)前顯示圖片的http鏈接
      urls: [img] // 需要預(yù)覽的圖片http鏈接列表
    });
  },
})

qrcode.js 可以去這里下載。

詳細(xì)源碼請查看 https://github.com/demi520/wxapp-qrcode

總結(jié)

以上所述是小編給大家介紹的微信小程序動態(tài)生成二維碼的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: