Vue使用QrCode插件生成二維碼

一、安裝

cnpm  i  qrcodejs2  --save

二、基本使用

• 安裝成功後，在package.json裏面增長如下內容

         

• 在相應的Vue組件中引入qrcode插件

  import QRCode from "qrcodejs2";

• 在html中增長相應的DOM結構

  <div id="qrcode"></div>

• 在methods定義方法

  /**
   * [qrcode  生成動態二維碼]
   * @param {type}
   * @return {[type]}         [description]
   */
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        render: "canvas", //也能夠替換爲table
        width: 122,
        height: 122,
        text: this.qrcodeAddress, // 二維碼地址
        colorDark: "#000",
        colorLight: "#fff"
      });
    },

• 在data裏面定義二維碼所包含的地址屬性

  qrcodeAddress: ""

• 在mounted函數裏面定義相應的參數（若是想掃描二維碼直接下載，text直接用二地址就好，而且到此結束，若是想先掃描打開一個頁面在提示下載，進行美化操做，則須要地址一併進行如下操做）

  /*url: 'http://10.x.xx.xxx:xxxx/downloadPackage?type=1',*/
  //text: 'http://10.xx.xx.xxx:xxxx/app.html',
  const textConfig = require("../../../../config/test.config.js");
  const publicPath =
      process.env.NODE_ENV === "production"
      ? textConfig.PRO_PUBLIC_PATH
      : textConfig.DEV_PUBLIC_PATH;
  1、this.qrcodeAddress = window.location.origin + publicPath + "app.html";//app.html是第二個項目，即多頁面
  2、this.qrcodeAddress = window.location.origin + publicPath + "/user/sysconfig/downloadPackage?type=1"
  this.qrcode();//調用二維碼方法

三、二維碼深刻美化操做

• 先看一下目錄結構：app爲掃描二維碼以後的優化頁面

           

• 在app頁面渲染的組件內寫入如下代碼

  <template>
    <div class="app-download">
      <!-- pc -->
      <img :src="pcUrl" class="phone-logo" v-if="phoneFlag === 0">
      <!-- android -->
      <img :src="androidUrl" class="phone-logo" v-if="phoneFlag === 1">
      <!-- ios -->
      <img :src="iphoneUrl" class="phone-logo" v-if="phoneFlag === 2">
      <!-- 下載連接 -->
      <a :href="href" id="a">
        <el-button type="primary" class="btn-download">
          {{loadFont}}
        </el-button>
      </a>
    </div>
  </template>
  <script>
  import dossierConfig from '@/config/dossier.config'
  import axios from 'axios'
  export default {
    name: 'app',
    data() {
      return {
        phoneFlag: 0, //0-pc 1-android 2-iphone
        isWeChat: false,
        pcUrl: require('./assets/images/pc.png'),
        androidUrl: require('./assets/images/android.png'),
        iphoneUrl: require('./assets/images/iphone.png'),
        href: '',
        loadFont: 'PC下載',
      }
    },
    mounted() {
      const UA = window.navigator.userAgent.toLowerCase()
      const isAndroid = UA && UA.indexOf('android') > 0
      const isIOS = UA && /iphone|ipad|ipod|ios/.test(UA)
      const isWeChat = UA && /micromessenger/.test(UA)
      this.isWeChat = isWeChat
      this.phoneFlag = isAndroid ? 1 : isIOS ? 2 : 0
      this.loadFont = isAndroid ? 'Android下載' : isIOS ? 'IOS下載' : this.loadFont
      this.href = ‘下載地址'
      $('#a').click(() => {
        if (this.isWeChat) {//微信端
          alert('請在瀏覽器內打開！')
          return false
        }
        if (this.phoneFlag === 2) {
          alert("ios下載功能暫時未開放！")
          return false
        }
      })
    },
  }
  </script>

  View Code

四、遇到的問題

　　尚無