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])