微信公众号的扫一扫功能

查看文档

使用的是 weixin-js-sdk

安装：

npm install weixin-js-sdk --save

引入：

import wx from 'weixin-js-sdk'

第一步：配置wx.config

需要配置 wx.config，里面的参数一般由后端接口返回。

第二步：在ready里面去调扫一扫方法

在config信息验证之后，去执行ready方法。

则须把相关接口放在ready函数中调用来确保正确执行。

第三步：调用扫一扫

如果报错： config:invalid signature

如果出现 config: invalid signature，一般是config没有配对。签名不正确。
而签名不正确，可能是因为签名用的url不对。

注意： url 必须是当前调用这个扫一扫方法的页面的url。

可能会出现安卓可以拉起扫一扫，而iOS不行

在iOS大概率会出现url签名失败的问题。

具体代码:

App.vue:

created(){
    // 在App.vue中获取页面的url
    // 其原因: 是为了兼用iOS中获取页面进行签名, 导致签名失败的问题
    window.localStorage.setItem('scanUrl', window.location.href.split('#')[0])
},

在具体拉起扫一扫的页面：

methods: {
	// 拉起扫一扫
	do(){
    	let self = this;
        let u = navigator.userAgent, app = navigator.appVersion;
	    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let purl = '';
        if (isIOS) {
        	purl = encodeURIComponent(window.localStorage.getItem('scanUrl'))
        } else {
        	purl = encodeURIComponent(window.location.href.split('#')[0])
        }
        let params = {
        	url: purl
        };
        getWxConfig(params).then(res => {
            let {appId, timestamp, nonceStr, signature} = res.data;
            wx.config({
            	debug: true,
                appId,
                timestamp,
                nonceStr,
                signature,
                jsApiList: [
                    'checkJsApi',
                    'scanQRCode'
                ]
            });
            wx.ready(function(){
            	// 判断当前客户端版本是否支持指定JS接口
                wx.checkJsApi({
                    jsApiList: ['scanQRCode'],
                    success: function (res) {
                    	
                        // 为了兼容iOS扫一扫, 必须把wx.scanQRCode放在wx.ready的回调函数里面
                        wx.scanQRCode({
                        	//...
                        });
                    }
                });
            });
        }, err => {});
    }
}

参考： vue中调用微信扫一扫功能（兼容IOS）