vue微信分享

发表于 更新于 分类于 本文字数： 4k 阅读时长 ≈ 4 分钟

vue微信分享

1.页面中引入微信分享JS文件 或者 执行npm install weixin-js-sdk --save命令安装js包

1
2
3
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- or -->
`npm install weixin-js-sdk --save`安装

原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。
请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口。

2.微信分享方法相关配置，新建文件wechat.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// 微信分享
import wx from "weixin-js-sdk";
//请求封装见[vue-axios请求-封装](http://www.guoxh.com/blog/2019/03/26/vue-axios%E8%AF%B7%E6%B1%82-%E5%B0%81%E8%A3%85/)
import { request } from '../js/request';

const requestget = new request();
//判断环境，因为二次分享Android和ios有不同的bug//测试发现只有设置了路由会有问题，#/在微信中会被截断，导致分享链接和传入API的链接不一样
let href;
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        href = encodeURIComponent(window.location.href);
    } else {
        href = window.location.href;
    }		
    requestget.Get({ url: '/getWxConfig', data: { "url": href } }).then((data) => {
        weixinConfigData = data.data;
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: weixinConfigData.appid,// 必填，公众号的唯一标识
            timestamp: weixinConfigData.timestamp,// 必填，生成签名的时间戳
            nonceStr: weixinConfigData.noncestr,// 必填，生成签名的随机串
            signature: weixinConfigData.signature,// 必填，签名
            jsApiList: [
                'checkJsApi',
                'updateAppMessageShareData',
                'updateTimelineShareData',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'hideMenuItems',
                'showMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'translateVoice',
                'startRecord',
                'stopRecord',
                'onRecordEnd',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'uploadVoice',
                'downloadVoice',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideOptionMenu',
                'showOptionMenu',
                'closeWindow',
                'scanQRCode',
                'chooseWXPay',
                'openProductSpecificView',
                'addCard',
                'chooseCard',
                'openCard'
            ]
        });
    }).catch((e) => {

    })
}

class wechatShareApi {
    wxShare(param) {
        wx.ready(function () {
            // 分享给朋友及“分享到QQ
            wx.updateAppMessageShareData({
                desc: param.descContent,
                title: param.shareTitle,
                link: param.lineLink,
                imgUrl: param.imgUrl,
                trigger: function (res) {
                    //alert('用户点击发送给朋友');
                },
                success: function (res) {
                    // alert('已分享');

                },
                cancel: function (res) {
                    //alert('已取消');
                },
                fail: function (res) {
                    //alert(JSON.stringify(res));
                }
            });

            // 分享到朋友圈及“分享到QQ空间”
            wx.updateTimelineShareData({
                desc: param.descContent,
                title: param.friendTitle == undefined ? param.shareTitle : param.friendTitle,
                link: param.lineLink,
                imgUrl: param.imgUrl,
                trigger: function (res) {
                    //alert('用户点击发送给朋友');
                },
                success: function (res) {
                    //alert('已分享');

                },
                cancel: function (res) {
                    //alert('已取消');
                },
                fail: function (res) {
                    // alert(JSON.stringify(res));
                }
            });

        });
    }
}
export {
    wechatShareApi
}

3.在指定组件中引入公共微信分享方法文件`wechat.js`；就可以调用分享方法
import {wechatShareApi} from "../assets/js/wechat"
const weApi = new wechatShareApi();
//微信分享参数
weApi.wxShare({
    shareTitle: "这是微信分享的标题", 
    descContent: "这是微信分享的描述文案", 
    lineLink: location.href, 
    imgUrl: "这是微信分享的图片" 
})

附录：获取权限签名的算法