在使用微信分享(包括微信api里的其他方法)之前,需要有一些准备、比如要准备 appId、timestamp、nonceStr、signature 这四个数据,只有在有这四个字段后,我们才可以去使用微信的一些方法和功能,
但这些东西是不能写死的,得是活的,所以就麻烦后端同学配合了一下,将数据帮忙生成了一下,但在调研阶段还是使用的手动生成,生成后他把得到的这几个字段发给我,我拿到后放到对应的位置就可以了。但是在开发的时候,这个就要改成一个接口,通过ajax给我返回这些我需要的数据,当接口返回的数据被放到下面代码中放的字段位置后,如果不报错,就说明是ok的了。
准备工作代码:
js"> wx.config({
debug: false, // 为true时,就是调试模式,会弹出一些信息,正确、错误都会弹。
appId: ''xxxxxxxxx'', // 必填,公众号的唯一标识
timestamp: ''1537372373'', // 必填,生成签名的时间戳
nonceStr: ''sjwufnskfnskjfhjksfkjsfkjshfwk'', // 必填,生成签名的随机串
signature: " 1ejsjsdjffklj0dj3uds3h3e",// 必填,签名,
// 必填,把要使用的方法名放到这个数组中。
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone'
]
});
这里需要注意的是,signature这个字段一定要生成正确,不然的话,就会报signature无效,就没法使用微信方法了,这个签名的生成需要根据当前页面url去生成,所以,一定要保证url的正确。
微信分享开放的几个方法有:分享给朋友、分享到朋友圈、分享到QQ、分享到QQ空间这四个方法,其他的暂时没有开放。
如何自定义分享内容呢?
js">wx.ready(function(){
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone'
],
success: function (res) {
// alert(JSON.stringify(res));
}
});
}
这里是校验jsApiList的,如果可以使用,就会弹出xxxx:true这种提示,说明是可以使用这些方法的。
js"> // 分享到朋友圈
wx.onMenuShareTimeline({
title:"宏远时代体育", // 分享标题
link:'', // 分享链接
imgUrl:"xxxxxxxxx",
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
// alert(JSON.stringify(res));
}
});
js">// 分享给朋友
wx.onMenuShareAppMessage({
title:"宏远时代体育", // 分享标题
desc:'第一届SuperBA宏超篮球联赛,快来关注吧!', // 分享描述
link:'', // 分享链接
imgUrl: "xxxxxxxxxxxxxxx", // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
js"> // 分享到QQ
wx.onMenuShareQQ({
title: "宏远时代体育", // 分享标题
desc: '第一届SuperBA宏超篮球联赛,快来关注吧!', // 分享描述
link: '', // 分享链接
imgUrl: "xxxxxxxxxxxxxxx", // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
js"> // 分享到QQ空间
wx.onMenuShareQZone({
title: "宏远时代体育", // 分享标题
desc: '第一届SuperBA宏超篮球联赛,快来关注吧!', // 分享描述
link: '', // 分享链接
imgUrl: "xxxxxxxxxxxxxxx", // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
以上四个就是目前微信开放的几个分享方法,都有一个共同点,就是可以自定义title、图片等字段,区别是分享给朋友、qq、qq空间的时候,可以自定义分享描述,但是分享到朋友圈是没有这个字段的, 这个没有自定义分享的链接,因为分享的就是当前页面,如果写了自定义链接以后,就无法二次分享了,因为这个链接写死的话,分享出去的地址,微信会默认增加参数,分别是fom(分享到哪里)和isappinstalled(代表用户是否安装了app)。
除了签名那块的问题之外,需要注意的几个问题:
1、苹果手机分享出去的时候,是有isappinstalled参数的,但是安卓手机分享出去,就只有form字段,没有isappinstalled字段的。
这个问题是因为我们有个需求,就是要区分是不是分享出去的链接,如果是,就显示个东西,当时开发测试时,只用了苹果手机去测,所以链接里面是两个参数都有,写了个判断就是有form并且有isappinstalled,后来在安卓上测试时,并没有执行这个判断里要执行的程序,就看了一下分享链接,果然没有isappinstalled,所以以后使用的时候要注意一下这一点。
2、分享到qq的时候,有时候是不会有自定义的图片的,他会默认去显示该公众号的二维码,这里也需要注意下。
3、一定要注意的是,微信公众号一定一定要配置js安全域名,否则分享是有问题的。比如自定义的一些内容无法显示。