一，先上岸微信民众号背景绑定js平安域名，不须要加http或https，概况百度。

二、信民众号背景设置服务器的IP为白名单，不然没法猎取access_token，概况百度

三、引入wx-js-sdk

1.运用script标签 http://res.wx.qq.com/open/js/…（支撑https）引入；
2.如果运用vue-cli脚手架东西，能够先npm install weixin-js-sdk -s 加载依靠包
以下已脚手架为例
.vue 文件中 import wx from ‘weixin-js-sdk’;

        getConfig(){    let that = this;
          this.$axios({
              url:that.api.shareUrl,//换成你现实要求的途径
              method:'post',
              data:{
                  url:window.location.href //猎取当前途径，注重途径平常不能写死，要求署名的途径和终究调取wx-sdk途径必需一致。
              }
          }).then(function (res) {
              let sign = res.data.data;//后端返回的微信的数据
              wx.config({
                  debug: true, // 开启调试形式,挪用的一切api的返回值会在客户端alert出来，若要检察传入的参数，能够在pc端翻开，参数信息会经由过程log打出，仅在pc端时才会打印。
                  appId: sign.appId, // 必填，民众号的唯一标识
                  timestamp: sign.timestamp, // 必填，天生署名的时刻戳
                  nonceStr: sign.nonceStr, // 必填，天生署名的随机串
                  signature: sign.signature, // 必填，署名，见附录1
                  jsApiList: [
                      'onMenuShareTimeline',
                      'onMenuShareAppMessage',
                      'hideMenuItems',
                      'showMenuItems',
                      'showAllNonBaseMenuItem',
                      'hideAllNonBaseMenuItem',
                      'startRecord',
                      'stopRecord',
                      'onVoiceRecordEnd',
                      'uploadVoice',
                      'downloadVoice',
                      'playVoice',
                      'onVoicePlayEnd',
                      'pauseVoice',
                      'stopVoice',
                      'openLocation',
                      'getLocation',
                      'chooseWXPay',
                      'onMenuShareQQ',
                      'scanQRCode',
                  ], // 必填，须要运用的JS接口列表，一切JS接口列表见附录2
              });
          }).catch(function (err) {
              
          })
        };
        初始化完成，以调起微信扫一扫为例
            scan(){
            let that =this;
            wx.ready(function() {
                wx.scanQRCode({
                    needResult : 1, // 默以为0，扫描效果由微信处置惩罚，1则直接返回扫描效果
                    success : function(res) {
                        var data = res.resultStr; // 当needResult 为 1 时，扫码返回的效果
                        var result  =data.split(',')[1];//返回的效果是码的范例+‘,’+内容，所以要以数组分割取第二个。
                      //处置惩罚本身的逻辑
                         
                    }
                });
            })
        }

四、重点来了，处理微信signature无效的题目

运用vue-router的网友都晓得，路由上带有#做路由的跳转，而#在发过去做微信考证的signature的时刻，#会被干掉，终究致使署名无效。比方你的途径是 www.a.com/#/scan 拿去署名，#被干掉今后，你运用www.a.com/#/scan，做wx.config signature是无效的。很多人都晓得要运用vue的history形式。
// 路由设置

const RouterConfig = {
    mode: 'history',
    routes: routers
};

比方你的域名是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找不到scan这个文件夹，所以返回404
so，设置 mode: ‘history’,还须要nginx设置合营。接见不到文件夹的时刻，

location / {
            if (!-e $request_filename){
                rewrite ^/(.*) /index.html last;
            }
          }

直接回到你的index.html并把参数带回来。处理一切题目

如果你的项目不是布置在根目次怎么办？
如果你的项目布置的目次是 /test/
vue router 的设置为

const RouterConfig = {
    mode: 'history',
    base:'test',
    routes: routers
};

nginx的设置为

 location /test/ {
    if (!-e $request_filename){
                rewrite ^/(.*) /test/index.html last;
            }
}