微信公众号H5自定义分享

微信公众号H5自定义分享

微信分享,咋一看好像很复杂,实则非常简单。只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

image

一、获取基本信息

找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp、noncestr和signature。

二、实现

1、页面引入JS-SDK文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

1
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2、基本配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
wx.config({
debug:false,
// 是否开启调试模式
appId: appid,
//appid
timestamp: timestamp,
// 时间戳
nonceStr: noncestr,
// 随机字符串
signature: signature,
// 签名
jsApiList:[
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone' ]
// 需要使用的JS接口列表
})
3、使用
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
wx.ready(function() {
// 分享给好友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
doShareDone()
},
cancel: function () {
doShareCancel()
}
})

// 分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享标题
link: link,// 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
doShareDone()
},
cancel:function () {
doShareCancel()
}
})
})
// 分享成功回调
function doShareDone(){
console.log('分享成功')
}
// 取消分享回调
function doShareCancel(){
console.log('取消了分享')
}

三、调试

wx.config里的debug字段设置为true时,就可以进行调试。
调试要用到微信开发者工具,选择公众号网页项目,输入页面地址就可以了。

四、遇到的问题及解决方案

微信JS-SDK说明文档的附录5里有大部分问题的解决方案,在这里我列出我遇到的几个上面没有给出解决方案的。

1、Uncaught TypeError: Cannot read property ‘config’ of undefined

解决:html页面单独引入了sdk,并且组件统一也引入了一遍sdk,导致问题,删除其中之一。

2、Uncaught (in promise) TypeError: Cannot read property ‘ready’ of undefined

解决:同问题1。

3、invalid signature

解决:如果文档里的方法都没有解决这个问题,还有一种方法,先设置一种最基础的配置,使其config ok,然后再设置一遍自己需要的有各种参数的分享文案,这样能绕过配置,成功分享。说的可能有点拗口,简单点理解就是,页面只要有一个config成功的配置,就可以再继续配置其它分享,哪怕这个分享配置的signature无效。

五、项目实战—世界杯分享

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
getSign();

//分享
var current_url = window.location.href;
var title = "CIMES2018世界杯球迷狂欢节,猜比分,赢手机!";
var content = "活动时间:2018.5.23-6.13";
var shareImage = 'http://world-cup.highset.cn/static/worldcup/images/share.jpg';

function getSign(){
//分享获取签名时间戳appid
$.ajax({
type:'GET',
url : "http://world-cup.highset.cn/wechat/sign",
async:false,
dataType:'json',
data:{url:current_url},
success:function(data,textStatus){
//console.log("data>>>",data);
//alert("data.signature>>>",data.signature);
console.log("data.appid>>>",data.appid);
console.log("data.timestamp>>>",data.timestamp);
console.log("data.noncestr>>>",data.noncestr);
console.log("data.signature>>>",data.signature);
if(textStatus == "success"){//success
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appid, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.noncestr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见附录1
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function(){
console.log("+++++++++++++++++++++========>>");
share();
var audio = document.getElementById('bgsound');
audio.play();
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发>时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
}
}
})
}

function share(){
//分享到朋友圈
wx.onMenuShareTimeline({
title: title , // 分享标题
desc: content , // 分享描述
link: 'http://world-cup.highset.cn/worldcup/', // 分享链接
imgUrl: shareImage, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

//分享给朋友
wx.onMenuShareAppMessage({
title: title , // 分享标题
desc:content, // 分享描述
link: 'http://world-cup.highset.cn/worldcup/', // 分享链接
imgUrl: shareImage, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
console.log("分享成功========>>");
},
cancel: function () {
// 用户取消分享后执行的回调函数
console.log("分享成功========>>");

}
});

//分享到qq
wx.onMenuShareQQ({
title: title, // 分享标题
desc:content, // 分享描述
link: 'http://world-cup.highset.cn/worldcup/', // 分享链接
imgUrl: shareImage, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享到qq空间
wx.onMenuShareQZone({
title:title, // 分享标题
desc:content, // 分享描述
link: 'http://world-cup.highset.cn/worldcup/', // 分享链接
imgUrl: shareImage, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
}

wx.error(function(res) {
//alert(res.errMsg);
});
-------------已经触及底线 感谢您的阅读-------------

本文标题:微信公众号H5自定义分享

文章作者:趙小傑~~

发布时间:2018年06月18日 - 00:00:00

最后更新:2019年09月16日 - 19:34:10

原始链接:https://cnsyear.com/posts/b50b75c1.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%