首先登录微信公众号后台绑定js安全域名，不需要加http或者https，百度一下细节。2.信任公众号后台设置服务器IP为白名单，否则无法获取access_token，详见百度3.引入wx-js-sdk1。使用脚本标签http://res.wx.qq.com/open/js/...（支持https）介绍；2.如果使用vue-cli脚手架工具，可以先npminstallweixin-js-sdk-s加载依赖包。以下是脚手架的示例。在vue文件中，importwxfrom'weixin-js-sdk'；getConfig(){让那个=这个；this.$axios({url:that.api.shareUrl,//替换成你实际请求的路径method:'post',data:{url:window.location.href//获取当前路径。注意路径不能硬编码，请求签名的路径必须和最终调用wx-sdk的路径一致}}).then(function(res){letsign=res.data.data;//WeChat后台返回的数据wx.config({debug:true,//开启debug模式，所有调用的API的返回值都会在客户端告警，查看传入的参数可以在PC端，参数信息会通过log打印出来，而且只会在PC端打印。appId:sign.appId,//必填，公众号的唯一标识timestamp:sign.timestamp,//必填，生成签名的时间戳nonceStr:sign.nonceStr,//必填，生成签名的随机串signature:sign.signature,//必填，签名，见附录一'onVoiceRecordEnd','uploadVoice','downloadVoice','playVoice','onVoicePlayEnd','pauseVoice','stopVoice','openLocation','getLocation','chooseWXPay','onMenuShareQQ','scanQRCode',],//必填，需要使用的JS接口列表，所有JS接口列表见附录2});}).catch(function(err){})};以微信扫一扫为例scan(){letthat=this;wx.ready(function(){wx.scanQRCode({needResult:1,//默认0，扫描结果由微信处理，直接返回1扫描结果成功:function(res){vardata=res.resultStr;//当needResult为1时，扫码返回的结果varresult=data.split(',')[1];//返回的结果为码的类型+','+内容，所以第二个要按数组划分//自己处理逻辑}});})}第四，重点是解决微信签名无效的问题。使用vue-router的网友都知道，路由上有#用于路由跳转，当#发送到签名进行微信验证时，#会被杀死，最终签名失效。比如你的路径是www.a.com/#/scan，拿去签名。#杀掉后，你使用www.a.com/#/scan，wx.config签名无效。很多人都知道用vue的历史模式。//路由配置constRouterConfig={mode:'history',routes:routers};比如你的域名是www.a.com，你的文件部署在根目录下，首页访问正常，使用内部页面调整路由，比如Menu等，没问题。但是直接访问www.a.com/scan，或者从home菜单跳转到www.a.com/sacn刷新这个页面，会发现返回404，下面以nginx为例分析一下问题。访问www.a.com时，nginx请求根目录下的index.html，没问题。使用页面上的菜单作为跳转页面是没有问题的，但是一旦直接访问www.a。com/scan，或者刷新www.a.com/scan，nginx找不到scan文件夹，所以返回404so，配置方式：'history'，还需要nginx配置。当文件夹无法访问时，location/{if(!-e$request_filename){rewrite^/(.*)/index.htmllast;}}直接返回到你的index.html并带回参数。解决所有问题如果你的项目没有部署在根目录下怎么办？如果你项目部署的目录是/test/vuerouter配置是constRouterConfig={mode:'history',base:'test',routes:routers};nginx配置是location/test/{if(!-e$request_filename){rewrite^/(.*)/test/index.htmllast;}}
