H5调用js-sdk配置微信分享
还没有名字 8/11/2021 微信分享
# 需要新做一个功能，H5页面微信分享出去显示一个带缩略图以及描述的小卡片，之前都是这样的,但是看起来不太正规，需要改进
# 一、绑定公众号安全域名
# 先登录公众号绑定js接口安全域名
# 然后根据提示把.txt文件保存在域名根目录下面，跟项目的index.html平级
# 二、安装以及使用JS-SDK（目前1.4或者1.6都操作成功了）
// 安装
npm install jweixin-module --save
// 在创建一个 `wechat.js文件` 里面放自定义分享的代码
import wx from 'jweixin-module' // 引入jssdk
import { getWxConfig } from '@/api/home.js'; // 封装的网络请求文件
export default {
//判断是否在微信中
isWechat: function() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
// console.log('是微信客户端')
return true;
} else {
// console.log('不是微信客户端')
return false;
}
},
//初始化sdk配置 这个上篇文章有详细讲解，就不赘述了
initJssdk: function(callback, url) {
//服务端进行签名
let data = {
url: (url) // 这里后端不需要encodeURIComponent 操作
}
getWxConfig(data).then(success => {
let res = success.data
if (res.code == 200) {
if (res.data) {
wx.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.noncestr,
signature: res.data.signature,
//这里把分享的apilist里加上分享的接口名称
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
]
});
//配置完成后，再执行分享等功能
if (callback) {
callback(res.data);
}
}
}
}).catch(err => {})
},
//this.$wx.share(data,url)封装后调用
//在需要自定义分享的页面中调用
share: function(data, url) {
//data是我们传递过来的需要分享的内容。
// url是当前页面路径, can是记录商品详情页路径，在分享链接出拼接好
let can = url.indexOf('productdetail') != -1 ? '#' + url.split('#')[1] : ''
console.log(url, can)
url = url ? url.split('#')[0] : window.location.href.split('#')[0];
//每次都需要重新初始化配置，才可以进行分享
this.initJssdk(function(callback) {
wx.ready(function() {
var shareObject = {
title: data.title || '标题',
desc: data.des || '描述',
link: url.split('?')[0] + can, //该链接域名与当前页面对应的公众号JS安全域名一致就行
imgUrl: data.img || '',// 分享图标
success: function(res) {
//业务回调
},
cancel: function(res) {
uni.showToast({
icon: 'none',
title: '分享失败!',
duration: 2000
})
}
};
//分享给朋友及分享到QQ
wx.onMenuShareAppMessage(shareObject);
//分享到朋友圈及分享到QQ空间
wx.onMenuShareTimeline(shareObject);
});
}, url);
},
}
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
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
# 三、main.js引入并全局注册
import wechat from './common/js/wechat.js'
// 全局注册
Vue.prototype.$wx = wechat
// 在页面中使用
this.$wx.share({
title: '标题',
}, url)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 四、最后效果
注意： 把链接给到后台签名加密时，他会将链接中
&转义成&在签名加密,导致我拿到signature的值与实际链接不一致导致分享失败，在用pc端分享是正常的，但手机不行