h5调用微信扫一扫功能（vue版本）

1.引入微信sdk

npm i weixin-js-sdk

2.在文件引入

import wx from "weixin-js-sdk";

3.下面代码块是通过config接口注入权限验证配置 参考文档sdk：步骤三

developers.weixin.qq.com/doc/offiacc…

//config 对象的参数是通过接口拿，这里省略掉调用接口请求
let config = {
    "signature": "",
    "nonceStr": "",
    "timestamp": "",
    "appid": ""
};
if (config && Object.keys(config).length) {
    wx.config({
        debug: false,
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appid,
        // 必填，公众号的唯一标识
        timestamp: config.timestamp,
        // 必填，生成签名的时间戳
        nonceStr: config.nonceStr,
        // 必填，生成签名的随机串
        signature: config.signature,
        // 必填，签名
        jsApiList: ["checkJsApi", "scanQRCode"] // 必填，需要使用的JS接口列表
    });
    wx.error(function(res) {
        alert("出错啦====" + JSON.stringify(res));
    });
    wx.ready(function() {
        wx.checkJsApi({
            jsApiList: ["scanQRCode"],
            // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function(info) {
                alert("检测是否可用" + JSON.stringify(info));
            },
            fail: function() {
                alert("error" + JSON.stringify(error));
            }
        });
    });
}

4.调用微信扫一扫sdk

scanCode() {
    wx.scanQRCode({
        needResult: 1,  // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
            alert(JSON.stringify(res));
            let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            alert(JSON.stringify(result));
            
        },
        fail: function(err) {
            // alert("err" + JSON.stringify(err));
        }
    });
},

参考文档 developers.weixin.qq.com/doc/offiacc…

H5 调用微信扫一扫功能

h5调用微信扫一扫功能（vue版本）