vue-cli脚手架中微信支付二维码的生成 vue-qriously

vue-cli脚手架中微信支付二维码的生成 vue-qriously

---

vue-qriously 介绍

插件源码地址：https://github.com/theomessin/vue-qriously

代码案例

• 安装

npm install vue-qriously --save-dev

• main.js 配置

import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

• vue文件中

 <template>
    <qriously :value="initQCode" :size="138"/>     
    <!-- initQCode: 是你在你的vue实例中定义好的变量   
    size:是这个Canvas的大小，这里要根据你的视觉稿来决定-->
</template>

<script>
    export default {
     
     
        name: 'app',
        data() {
     
     
            return {
     
     
                initQCode: '自定义的值'
            }
        }
    }
</script>

• JS中

格式是：data: "weixin://wxpay/bizpayurl?pr=Gp1TW0200"
将后台返回的数据直接复制给data中initQCode即可