VUE使用JS-SDK实现微信分享好友功能（通过点击控件触发）

微信JSSDK官方开发文档

微信分享有很多种 这里只记录了分享好友功能

1、通过npm安装微信的js-sdk

npm install weixin-js-sdk

2、在main.js里引用或在需要分享的页面引用

import wx from 'weixin-js-sdk';

3、在页面创建时候先注入配置信息（必须）！

//生命周期我就创建了
created() {
     var payUrl = window.location.href;//当前分享的页面Url
        getWxjsSign({ //调用后台接口 获取相关参数
          url: payUrl
        }).then(res => {
          if (res.returnCode == '200') {
            if (res.response.code == '200') {
              var data = res.response.sign;
              var appId = data.appId;
              var timestamp = data.timestamp;
              var nonceStr = data.nonceStr;
              var signature = data.signature;
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名，见附录1
                jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'hideMenuItems']// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              });
              wx.ready(function () {
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
                // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
                // 则须把相关接口放在ready函数中调用来确保正确执行。
                // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
              });
            } else {
              
            }
          }
        })
    },

4、点击分享按钮之后

wxShare() {
        //获取分享支付的url
        weixinpayProxy({
          orderSn: this.sn
        }).then(res => {
          if (res.returnCode == '200') {
            if (res.response.code == '200') {
              var mwebUrl = res.response.url;
              var imgUrl = 'http://img.3hmlg.com/imageSearch/upload/image/202003/a28dc203-baef-482e-82f2-6019cbe70111.png'
              wx.hideMenuItems({
                menuList: ['menuItem:share:timeline',
                  'menuItem:share:qq',
                  'menuItem:share:QZone',
                  'menuItem:share:email',
                  'menuItem:openWithQQBrowse',
                  'menuItem:openWithSafari'
                ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
              });
              wx.updateAppMessageShareData({
                title: '请帮我付款', // 分享标题
                desc: '请帮我付款，谢谢你。', // 分享描述
                link: mwebUrl, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () {
                },
                cancel: function () {
                  // 用户取消分享后执行的回调函数
                },
                fail: function (res) {
                  alert('分享失败！！' + res)
                }
              });
            } else {
              
            }
          }
        })
      },

到这里是不能直接分享的（就是不会出现微信官方分享的页面）、需要自己点击右上角3个点 ··· 我这边处理是自己加了个提示页面 引导用户去点击分享

 到这里基本是成功了，但是从其他页面进入到需要分享的页面：

安卓在进行页面跳转是会刷新当前url，ios端不会，所以这里有可能导致签名失败。

简单粗暴点 如果我们在A页面到B页面（需要做分享的页面）直接用window.location.href='...url'来跳转。