微信小程序实战教程1503---生成二维码

在微信小程序中，如果我们可以自己将指定内容生成二维码，出示给别人，将是一个比较有用的功能。但是微信小程序API中，目前暂时还没有这个功能，但是我们可以通过变通的方法，来实现这一功能。

本文所提到的方法，是受到这篇博文的启发（http://blog.youkuaiyun.com/sinat_17775997/article/details/53608479），但是具体实现细节有些不同，读者可以结合那篇博文以及配套的开源项目（https://github.com/demi520/wxapp-qrcode），加深对这一主题的理解。

我们首先定义需要生成二维码的内容，这个内容可以由用户来输入，程序刚一进入时，就显示缺省值的二维码。

我们首先定义界面元素：

<view class="container">
  <!-- 生成二维码 -->
  <view class="input-row">
      <label>内容</label>
      <input value='{{qrcStr}}' class="qrcInput" bindblur="onQrcStrBlur" type="text" maxlength="255" 
                placeholder="{{qrcPhld}}"/>
  </view>
  <button class="genQrcBtn" type="primary" bindtap="onGenQrc">生成二维码</button>

  <view class="img-box">
      <canvas bindtap="onPreviewQrc" hidden="{{canvasHidden}}" 
                style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="qrcCanvas"/>
  </view>
</view> 
<view hidden="{{maskHidden}}" class="mask"></view>
<view class="canvas-box"></view>

在格式定义文件（*.wxss）中，添加如下配套格式文件：

.container {
  padding-top: 0rpx;
}

.img-box {
  padding: 32rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;
  position: relative;
}

.img-box image {
  width: 686rpx;
  height: 686rpx;
  background-color: #f9f9f9;
}

.input-row{
    margin: 30rpx auto;
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 32rpx; 
    background-color: #fff;
    font-size: 34rpx;
    color: #000;
}

.input-row input {
  margin-left: 100rpx;
  flex: 1;
}

.qrcInput {
  border: 1rpx solid #e5e5e5;
}

.genQrcBtn {
  width:686rpx;
  margin: 60rpx auto;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3; 
  width: 100%;
  height: 100%;
  opacity: 0;
}

下面我们来定义页面中用到的变量，在页面程序文件中（*.js）的Page对象的data属性内，定义如下变量：

Page({
  data: {
    qrcStr: '',
    qrcPhld: '维康云u=1001',
    maskHidden:true,
    imagePath:'',
  },
  canvasId: "qrcCanvas",
......

下面是在页面程序文件（*.js）文件的Page对象中，添加onReady函数，在其中获取到屏幕尺寸，并将缺省内容生成二维码，并绘制到界面上：

onReady: function() {
  	this.size = this.setCanvasSize();//动态设置画布大小
    this.createQrCode(this.data.qrcPhld, this.canvasId, this.size.w, this.size.h);
  },

这里面用到两个Page对象的函数，我们先来看获取Canvas尺寸的函数：

//适配不同屏幕大小的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(str,canvasId,cavW,cavH){
    //调用插件中的draw方法，绘制二维码图片
    QR.qrApi.draw(str,canvasId,cavW,cavH);

  },

上面的代码中需要在页面程序文件（*.js）文件顶部引入qrcode.js，如下所示：

var QR = require("../../utils/qrcode.js");

具体的文件大家可以到https://github.com/demi520/wxapp-qrcode的utils目录中下载。

如果上面的程序没有问题，读者运行上述程序，应该就可以显示出缺省内容的二维码了，如下图所示：

下面我们来完成用户输入指定内容，点击生成二维码按钮，生成指定内容的二维码图片。我们先来获取用户输入的要用于生成二维码的内容：

onQrcStrBlur: function(e) {
    this.setData({qrcStr: e.detail.value});
  },

因为我们在页面中定义的输入框失去焦点的函数为onQrcStrBlur，在这里我们取出输入框内容，赋给变量qrcStr。

当用户点击生成二维码按钮时，我们将指定内容生成二维码绘制到界面中：

onGenQrc: function(e) {
    this.createQrCode(this.data.qrcStr, this.canvasId, this.size.w, this.size.h);
  }

截止目前为止，我们就成功实现了在微信小程序中，为指定内容生成二维码图片的功能，在这里我们实际上借用了Canvas将二维码绘制到了界面上。关于微信小程序的Canvas，可以涉及的内容非常多，大量可以重点关注一下，可以做出很多非常有意思的应用。

如果大家觉得光看文字不过瘾，或者还有不明白的地方，建议大家看一下优快云学院“小程序实战教程”（http://edu.youkuaiyun.com/course/detail/3009）第15章的第3个视频内容，老师将带领大家一步一步实现这一功能。