阅读 1117

第一次做vue微信分享

一、安装

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