第一次作vue微信分享

1、安装

cnpm install weixin-js-sdk --save-dev
复制代码

2、引入JS文件

在index.html页面引入微信开发须要的js文件：

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
复制代码

3、建立wx.jsapi.js文件，main.js 引入

个人wx.jsapi.js文件是在src下的api目录下的，而后在main.js中引入下面的代码：

import WXConfig from './api/wx.jsapi' // 微信分享
Vue.prototype.WXConfig = WXConfig;
复制代码

4、遇到的坑：

一、eslint编译报错，wx undefined

在js代码里直接用wx来写代码，会报undefined错误，eslint编译通不过。咱们直接将wx改成window.wx，奇迹ok了。赶忙上网找有没有一块儿碰见这问题的小伙伴： vue 微信分享设置踩坑

安心了，找到共鸣的赶脚！😏

在js代码里直接用wx来写代码，会报undefined错误，eslint编译通不过。 这个的解决方法有两种， 一种是禁止eslint检测  在js最前面加一段注释。 /* eslint-disable */ 另外一种是，用window.wx 代替wx使用

二、link要为安全域名的url

分享的地址须要设置为白名单，也就是当前分享的url要是安全域名下的；

三、分享图标路径imgUrl

分享图标路径imgUrl，须要设置为服务器上的地址，目前作法是将share图片，放在dist的根目录下。

最开始放在项目下，发现这块打包后，路径不对了，而后想到放在打包后的文件中，直接放在服务器上，同事建议我放static中，可是发现不行，由于npm run build，会从新生成这个文件，图片依旧会消失，因此放在根目录下。

四、要求分享的时候，不管在哪一个页面分享，均分享首页

因此对分享的link作了处理，默认只分享首页：

function getUrl(url) {
    var arrUrl = url.split('/');
    var newUrl = [];
    for (var i = 0; i < arrUrl.length - 1; i++) {
        newUrl.push(arrUrl[i]);
    }
    return newUrl.join('/') + '/';
}
复制代码

五、在获取开发的url时，作了encodeURIComponent处理

这块须要和开发协商，是否须要作处理；

请注意 encodeURIComponent() 函数 与 encodeURI()函数的区别之处，前者假定它的参数是 URI的一部分（好比协议、主机名、路径或查询字符串）。所以 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

5、wx.jsapi.js中，附上代码

mport axios from 'axios'

export default {
  wxShowMenu: function() {
    const url = 'XXX.json?url=' + encodeURIComponent(window.location.href.split('#')[0]);
    function getUrl(url) {
      var arrUrl = url.split('/');
      var newUrl = [];
      for (var i = 0; i < arrUrl.length - 1; i++) {
        newUrl.push(arrUrl[i]);
      }
      return newUrl.join('/') + '/';
    }
    axios.post(url).then(function(res) {
      var getMsg = res.data;
      window.wx.config({
        debug: false, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
        appId: getMsg.appid, // 必填，公众号的惟一标识
        timestamp: getMsg.timestamp, // 必填，生成签名的时间戳
        nonceStr: getMsg.noncestr, // 必填，生成签名的随机串
        signature: getMsg.signature, // 必填，签名，见附录1
        jsApiList: [ // 必填，须要使用的JS接口列表，全部JS接口列表见附录2
          'onMenuShareTimeline', // 分享给好友
          'onMenuShareAppMessage', // 分享到朋友圈
          'onMenuShareQQ',
          'onMenuShareQZone',
          'onMenuShareWeibo'
        ]
      });
      window.wx.ready(function() {
        var shareConfig = {
          title: 'title', // 分享标题
          desc: 'desc', // 分享描述
          link: getUrl(window.location.href.split('#')[0]), // 分享连接，该连接域名需在JS安全域名中进行登记
          imgUrl: getUrl(window.location.href.split('#')[0]) + 'share.jpg', // 分享图标
          type: 'link', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 若是type是music或video，则要提供数据连接，默认为空
          success: function() {
            // 用户确认分享后执行的回调函数
          },
          cancel: function() {
            // 用户取消分享后执行的回调函数
          }
        };
        console.info('微信分享参数：' + JSON.stringify(shareConfig));
        window.wx.onMenuShareTimeline(shareConfig);
        window.wx.onMenuShareAppMessage(shareConfig);
        window.wx.onMenuShareQQ(shareConfig);
        window.wx.onMenuShareQZone(shareConfig);
        window.wx.onMenuShareWeibo(shareConfig);
      });
      window.wx.error(function(res) {
        console.log(res);
      });
    })
  }
}
复制代码

写在最后：感谢对我帮助过的小伙伴，以及不埋怨个人low的同事们，谢谢大家！文中若有错误，请大牛们帮忙指正，感谢！

ps：一个在前端路上努力的90后阿姨，微笑的人运气不会太差，前进的脚步能够放大。😁😁😁