Vue-cli项目中二维码插件的使用

一、使用场景

1. 在微信支付场景中，需要调用二维码插件来生成二维码。首先梳理一下微信支付的流程：
2. 在确定使用微信支付的时候，会把当前订单的订单号发给后台开发人员；
3. 后台开发人员利用订单号去数据库中查询订单信息，比如商品名称、订单金额等，还有一些微信官方要求的信息，整合这些信息之后后台开发人员就会将这些数据发送给微信官方，微信官方接收到请求后，返回一个携带了支付必要信息的链接给后台开发人员；
4. 后台开发人员将微信官方提供的字符链接返回给前端开发人员，利用二维码插件将这个链接生成一个二维码展示到页面中，用户使用微信扫描二维码生成插件便可以进行支付了。

技术点：二维码生成插件的使用。这里介绍一款常用的功能插件——QRCode

二、QRCode插件的使用

首先第一步：安装插件，运行以下命令：npm install qrcode --save

使用插件生成二维码的示例代码（子组件Erweima.vue）：

<template>
  <div>
      <h2>扫一扫二维码进入百度首页</h2>
      <!-- 生成二维码区域 -->
      <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import Vue from "vue"
// 引入QRcode插件
import QRCode from "qrcode"
Vue.use(QRCode)
export default {
    name:'Erweima',
    data(){
        return{

        }
    },
    methods:{
        useqrcode(){
            var canvas=document.getElementById("canvas");
            QRCode.toCanvas(canvas,"http://www.baidu.com",function(error){
                if(error){
                    console.log(error);
                }else{
                    console.log("success!");
                }
            });
        }

    },
    mounted(){
        // 组件挂载的时候，调用生成二维码函数
        this.useqrcode();
    }

}
</script>

<style>

</style>

父组件App.vue：

<template>
  <div id="app">
    <Erweima></Erweima>
  </div>
</template>

<script>
import Erweima from '@/components/Erweima.vue'
export default {
  components: { Erweima },
  name: 'App',
  data(){
    return{
      
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行效果截图：