微信公众号网页配置自定义分享内容
1. step1 在html页面或者在sciprt中引入JSSDK文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>或者
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
2. step2 调取接口获取config参数
$.ajax({
url: '获取config参数的接口地址',
type: "GET",
data: {params:{'url':'当前页面的地址'}},
success: function(res) {
console.log(res)
}
3.step3 在上面接口的成功回调参数里面配置wx.config
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,企业号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
})
4. 配置失败的可能原因(重要)
4.1:传给后台的地址中的&被浏览器解析成&了,导致后台生成签名的地址和当前地址不一致,使得签名无效,让后台使用sub_string(php适用)将&替换为&即可
4.2:'timestamp','nonceStr','appId'的类型必须为字符串且大小写严格,有的版本appId写成app_id注意即可
4.3:jsApiList中没有对应的权限----是对应的版本问题,有的方法在新版本已经废弃或者当前版本还没有该功能或权限 前往官网查看对应的版本包含的方法即可 推荐使用最新的API
官网API地址(点击前往)
5. step4 紧接wx.config后面在wx.readey配置自定义分享内容即可
wx.ready(function() {
//分享到朋友圈
wx.updateTimelineShareData({
title: '分享的标题',
link: '分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致',
imgUrl: '分享出去的图片',
success: function() {
// 用户点击了分享后执行的回调函数
},
cancel: function() {
}
})
//分享给朋友
wx.updateAppMessageShareData({
title: '分享的标题',
desc: '分享的描述',
link: '分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致',
imgUrl: '分享出去的图片',
type: '分享类型,music、video或link,不填默认为link',
dataUrl:'如果type是music或video,则要提供数据链接,默认为空',
success: function() {
// 用户点击了分享后执行的回调函数
},
cancel: function() {
}
})
})