第一次做vue微信分享

安丹
3,606 阅读3分钟

一、安装

cnpm install weixin-js-sdk --save-dev

二、引入JS文件

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

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

三、创建wx.jsapi.js文件，main.js 引入

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

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

四、遇到的坑：

1、eslint编译报错，wx undefined

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

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

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

2、link要为安全域名的url

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

3、分享图标路径imgUrl

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

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

4、要求分享的时候，无论在哪个页面分享，均分享首页

所以对分享的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('/') + '/';
}

5、在获取开发的url时，做了encodeURIComponent处理

这块需要和开发协商，是否需要做处理；

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

五、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后阿姨，微笑的人运气不会太差，前进的脚步可以放大。😁😁😁

avatar
文章
阅读
粉丝