vue 微信內調起掃一掃

想了解更多可查看微信開發文檔

1.安裝　

cnpm install weixin-js-sdk --save

 

2.引入import

   a.可在main.js使用原型鏈全局使用

   b.也可以直接在所需組件引入

 

3.封裝方法，方便調用

// 引入微信jdk
import wx from 'weixin-js-sdk';
import utils from './index';
import router from '@/router/index.js';
export default {
    // 微信掃一掃
    wxScanCode(that, url) {
        // 獲取微信掃一掃配置
        that.$ajax.order.getWxConfig({
            data: {
                url: url,
            },
            success: res => {
                let _res = res.data;
                wx.config({
                    debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                    appId: _res.appId, // 必填，公眾號的唯一標識
                    timestamp: _res.timestamp, // 必填，生成簽名的時間戳
                    nonceStr: _res.nonceStr, // 必填，生成簽名的隨機串
                    signature: _res.signature, // 必填，簽名
                    jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表
                });
                wx.ready(function() {
                    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
                    wx.scanQRCode({
                        needResult: 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
                        scanType: ['qrCode'], // 可以指定掃二維碼還是一維碼，默認二者都有
                        success: function(res) {
                           // 成功處理
                        },
                    });
                });
                wx.error(function(res) {
                    console.log(res);
                    // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
                });
            },
        });
    },
};

 

 

ps:注意獲取簽名的url，前端提供，如果有轉碼，后端需相應解碼

encodeURIComponent(location.href.split('#')[0])