微信H5页面自定义分享
第一:引入 微信jssdk文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
第二:通过ajax获取appid等鉴权信息
$.ajax({
url: url + '/wap/wapApi/GetWxConfig',
data: 'uri=' + window.location.href,
dataType: 'json',
success: function(res) {
console.log(res.data.appId)
alert(JSON.stringify(res.data))
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.stamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage"], // 必填,需要使用的JS接口列表
});
wx.ready(function() {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.onMenuShareAppMessage({
title: '分享标题', // 分享标题
desc: '分享描述', // 分享描述
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://taoqikid-cms.shenliangzhu.bevateachers.com/share_video/images/beva.png', // 分享图标
type: 'link',
dataUrl: '',
success: function(res) {
console.log(res)
},
cancel: function(res) {
console.log(res)
}
})
});
}
});
第三:问题说明
【问题 01】:config 配置错误
原因:在通过 ajax 获取config 等信息的时候,没有对 data 参数做处理,需要添加键值 { uri = window.location.href }
【问题 02】:配置完成后,微信开发者工具调试成功,但是真机调试失败
原因:在分享的 “配置” 中,link 需要配置在获取 config 信息时候的传入的 uri (即,当前页面的url),
imgUrl 最好是当前域名下的图片,否则容易出现图片缺失状况。
近期评论