5分钟实现微信小程序绘制二维码

Posted 2022-08-12 北极光之夜。

一.话不多，直接先看效果：

    🌷🌷🌷 hello呀，大家，真是好久不见。在我们日常生活中，经常使用微信小程序亮健康码，那么就好奇前端怎么实现的，其实也并不难，下面5分钟带你快速实现~ 本文效果是 绘制出二维码，且5秒时间到后自动刷新。如下（可自己美化样式呦）：

二.详细实现：

1. 安装插件：

二维码的绘制主要靠 weapp-qrcode-canvas-2d 这个插件完成，到终端安装插件并构建npm：

npm install weapp-qrcode-canvas-2d --save

然后在 js 文件导入：

import drawQrcode from 'weapp-qrcode-canvas-2d'

2. 先定义基本标签：

<!--index.wxml-->
<view class="container">
<!-- 展示二维码插件的标签（必须） -->
  <canvas type="2d" style="width: 350rpx; height: 350rpx;" id="myQrcode"></canvas>
  <!-- 倒计时标签 -->
  <view class="refresh">
  <!-- 时间通过变量countDown变化 -->
      <text style="color:rgb(79, 181, 253);">countDowns</text>
      <text>后自动刷新</text>
    </view>
</view>

3. 开始js逻辑书写，先定义变量：

  data: 
    interval: null, //定时器
    countDown: 5,//刷新倒计时,
  ,

4. 开始书写方法，先写绘制二维码的方法，详细看注释：

固定写法，可以直接复制用，改个把参数的值便好：

  //绘制二维码
  draw() 
    //设置text为二维码码值，一般通过接口获取后赋值
      let text = '123123' + Math.random(0,100);
   //设置倒计时为5秒
      this.setData(
        countDown: 5,
      )
      const query = wx.createSelectorQuery()
      let that = this
      query.select('#myQrcode')
        .fields(
          node: true,
          size: true
        )
        .exec(async (res) => 
          let canvas = res[0].node
          var img = canvas.createImage();
          //二维码中间那个小logo的地址
         img.src = 'https://profile.csdnimg.cn/D/5/5/1_luo1831251387'
          img.onload = function () 
            // img.onload完成后才能调用 drawQrcode方法
            var options = 
              canvas: canvas,
              canvasId: 'myQrcode',
              width: 350, 
              padding: 30,
              paddingColor: '#fff',
              background: '#fff',
              foreground:'rgb(0, 178, 106)' ,
              //值
              text: text,
              image: 
                imageResource: img,
                width: 70, // logo图片大小 建议不要设置过大，以免影响扫码
                height: 70, // 建议不要设置过大，以免影响扫码
                round: true // Logo图片是否为圆形
              
            
            drawQrcode(options)
            // 获取临时路径（得到之后，想干嘛就干嘛了）
            wx.canvasToTempFilePath(
              x: 0,
              y: 0,
              width: 350,
              height: 350,
              destWidth: 600,
              destHeight: 600,
              canvasId: 'myQrcode',
              canvas: canvas,
              success(res) 
                console.log('二维码临时路径为：', res.tempFilePath)
              ,
              fail(res) 
                console.error(res)
              
            )
          ;
        )
  ,

5. 实现定时后刷新二维码，详细看注释：

  //倒计时刷新
  countDown() 
    if (this.data.countDown == 0) 
      this.draw()
      return;
    
    let now = this.data.countDown - 1;
    this.setData(
      countDown: now
    )
  ,

6. 最后，一进页面就调用绘制与倒计时方法：

  onLoad: function (options) 
    //计算时间
    this.setData(
      interval: setInterval(() => 
        this.countDown();
      , 1000),
    )
  ,

…以上便是实现的全过程啦，是5分钟左右把~

三.完整代码：

完整js文件代码：

// index.js
// 获取应用实例
//npm install weapp-qrcode-canvas-2d --save


const app = getApp()

import drawQrcode from 'weapp-qrcode-canvas-2d'

Page(
  /**
   * 页面的初始数据
   */
  data: 
    interval: null, //定时器
    countDown: 5,//刷新倒计时,
  ,
  //倒计时刷新
  countDown() 
    if (this.data.countDown == 0) 
      this.draw()
      return;
    
    let now = this.data.countDown - 1;
    this.setData(
      countDown: now
    )
  ,
  //绘制二维码
  draw() 
    //设置text为二维码码值，一般通过接口获取后赋值
      let text = '123123' + Math.random(0,100);
   //设置倒计时为5秒
      this.setData(
        countDown: 5,
      )
      const query = wx.createSelectorQuery()
      let that = this
      query.select('#myQrcode')
        .fields(
          node: true,
          size: true
        )
        .exec(async (res) => 
          let canvas = res[0].node
          var img = canvas.createImage();
          //二维码中间那个小logo的地址
         img.src = 'https://profile.csdnimg.cn/D/5/5/1_luo1831251387'
          img.onload = function () 
            // img.onload完成后才能调用 drawQrcode方法
            var options = 
              canvas: canvas,
              canvasId: 'myQrcode',
              width: 350, 
              padding: 30,
              paddingColor: '#fff',
              background: '#fff',
              foreground:'rgb(0, 178, 106)' ,
              //值
              text: text,
              image: 
                imageResource: img,
                width: 70, // logo图片大小 建议不要设置过大，以免影响扫码
                height: 70, // 建议不要设置过大，以免影响扫码
                round: true // Logo图片是否为圆形
              
            
            drawQrcode(options)
            // 获取临时路径（得到之后，想干嘛就干嘛了）
            wx.canvasToTempFilePath(
              x: 0,
              y: 0,
              width: 350,
              height: 350,
              destWidth: 600,
              destHeight: 600,
              canvasId: 'myQrcode',
              canvas: canvas,
              success(res) 
                console.log('二维码临时路径为：', res.tempFilePath)
              ,
              fail(res) 
                console.error(res)
              
            )
          ;
        )
  ,


  onLoad: function (options) 
    //计算时间
    this.setData(
      interval: setInterval(() => 
        this.countDown();
      , 1000),
    )





  ,

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () 

  ,

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () 



    this.draw()
  ,

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () 

  ,

  /**
   * 生命周期函数--监听页面卸载
   */

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () 

  ,

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () 

  ,

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () 

  
)

四.总结：

😆😆😆
那么，下次见了，溜了溜了~

我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~