vue设置微信分享问题总结

安装jweixin依赖包

1
npm install jweixin-module --save

初始化微信分享

1
2
3
4
5
6
7
8
9
const jweixin = require('jweixin-module')
jweixin.config(
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
);

配置微信分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

function isPcBroswer () {
  let e = navigator.userAgent.toLowerCase()
    , t = "ipad" == e.match(/ipad/i)
    , i = "iphone" == e.match(/iphone/i)
    , r = "midp" == e.match(/midp/i)
    , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
    , a = "ucweb" == e.match(/ucweb/i)
    , o = "android" == e.match(/android/i)
    , s = "windows ce" == e.match(/windows ce/i)
    , l = "windows mobile" == e.match(/windows mobile/i);
  return !(t || i || r || n || a || o || s || l)
}

/**
 *
 * @param title {string} 分享标题
 * @param link {string} 分享链接，必须带有http或https
 * @param imgUrl {string} 分享链接的缩略图，必须能访问
 * @param desc {string} 分享的描述
 */
function jweixinShare(title, link, imgUrl, desc = '') {
  let shareLink = link && link !== '' ? link : window.location.href.split("#")
  // shareLink = shareLink.split('#')[0].split('?')[0]
  jweixin.ready(function () {
    if (isPcBroswer()) { // PC端需要使用旧版的api
      jweixin.onMenuShareTimeline({
        title: title || '分享标题',
        link: shareLink,
        imgUrl: imgUrl || "",
        success: function () {}
      });
      jweixin.onMenuShareAppMessage({
        title: title || '分享标题',
        desc: desc,
        link: shareLink,
        imgUrl: imgUrl || "",
        success: function () {},
        cancel: function () {}
      });
    } else { // 移动端使用新版的api
      jweixin.updateTimelineShareData({
        title: title || '分享标题',
        link: shareLink,
        imgUrl: imgUrl || "",
        success: function () {},
        cancel: function () {}
      });
      jweixin.updateAppMessageShareData({
        title: title || '分享标题',
        desc: desc,
        link: shareLink,
        imgUrl: imgUrl || "",
        success: function () {},
        cancel: function () {}
      });
    }
  });
  jweixin.error(function (res) {
    // console.log(res);
  });
}