一、登录微信微信官方账号绑定js安全域名，无需添加http或https。详情请参考百度。

第二，服务器的IP在信微信官方账号后台设为白名单，否则无法获取access_token。详情，百度

第三，介绍wx-js-sdk

1.使用脚本标签http://res.wx.qq.com/open/js/jweixin-1.2.0.js(支持https)介绍；

2.如果使用vue-cli脚手架工具，可以先通过NPM安装weixin-js-SDK-S加载依赖包

以下面的脚手架为例

从' weixin-js-sdk '中导入wx。vue文件；

getConfig(){

让那个=这个；

这个。$axios({

Url:that.api.shareUrl，//带有您实际请求的路径

方法： '发布'，

数据：{

Url:window.location.href //要获取当前路径，请注意路径一般不能写死，请求签名的路径必须与最后调用wx-sdk的路径一致。

}

}).然后(函数(res) {

let sign=RES . data . data；//后端返回微信数据

wx.config({

调试：真。//打开调试模式，所有被调用的API的返回值都会在客户端告警上发出。如果您想查看传入的参数，您可以在电脑端打开它们，参数信息将通过日志打印出来，只打印在电脑端。

AppId: sign.appId，//必选，微信官方账号标识

时间戳：符号。时间戳//必选，生成签名的时间戳

non crest : sign . non crest，//必选，生成随机签名字符串

签名：签名。签名，//必需，已签名，见附录1

jsApiList: [

' onMenuShareTimeline '，

' onMenuShareAppMessage '，

hideMenuItems '，

showMenuItems '，

showAllNonBaseMenuItem '，

hideAllNonBaseMenuItem '，

'开始记录'，

停止记录'，

' onVoiceRecordEnd '，

上传语音'，

'下载语音'，

“playVoice”，

onVoicePlayEnd '，

' pauseVoice '，

'停止语音'，

' openLocation '，

' getLocation '，

'选择XPay '，

' onMenuShareQQ '，

'扫描二维码'，

]，//必选，要使用的JS接口列表。所有JS接口的列表见附录2

});

}).catch(函数(err) {

})

};

初始化完成，以微信扫为例

scan(){

让那个=这个；

wx.ready(function() {

wx.scanQRCode({

NeedResult : 1，//默认为0，扫描结果由微信处理，1直接返回扫描结果。

成功：功能(res) {

var data=res.resultStr//当needResult为1时，扫描代码返回的结果

var result=data.split('，')[1]；//返回的结果是代码的'，'类型的内容，所以第二个要用数组除。

//处理好自己的逻辑

}

});

})

}

四、重点是解决微信签名无效的问题

使用vue-router的用户知道路由上有#跳转，当#发送签名进行微信验证时，#会被杀死，最终导致签名无效。例如，你的路径是www.a.com/#/scan签署。#被杀后，你用www.a.com/#/scan.做wx.config签名无效。很多人都知道用vue的历史模式。

//路由配置

const RouterConfig={

模式： '历史'，

routes:路由器

};

比如你的域名是www.a.com，你的文件部署在根目录下，主页正常访问，你可以调整页面内部的路由，比如菜单等。没问题。但是一旦你直接访问www.a.com/scan，或者从主页菜单跳到www.a.com/sacn并刷新这个页面，你会发现你回到了404。

我们以nginx为例来分析一下这个问题。当你访问www.a.com的时候，nginx会在根目录下请求去index.html。没问题。使用菜单作为页面上的跳转页面没有问题，但是一旦你直接访问www.a.com/scan或刷新www.a.com/scan,nginx,你就找不到扫描文件夹，所以你返回到404。

因此，配置模式： '历史'需要nginx配置合作。当文件夹不可访问时，

位置/

if(！-e $request_filename){

重写^/(.*)/index . html last；

}

}

直接回到你的index.html，把参数带回来。解决所有问题

如果您的项目没有部署在根目录下怎么办？

假设您的项目部署目录是/test/

vue路由器的配置如下

const RouterConfig={

模式： '历史'，

base: '测试'，

routes:路由器

};

Nginx的配置如下

位置/测试/

if(！-e $request_filename){

重写^/(.*)/test/index . html last；

}

}

版权声明

本文的资源来自互联网，仅供学习和研究之用。版权属于该资源的合法所有者。本文仅用于学习、研究和交流目的。请注明出处、完整链接和原作者。如果原作者认为本网站侵犯了您的版权，请联系我们，我们将立即删除！

原标题

微信JS-SDK中共享、微信支付、vue.js扫描等签名失效解决方案