移动端H5做自定义微信分享功能

最近做一个移动端H5的项目,里面需要用户将结果分享给别人,这就涉及到微信右上角的三个点自定义分享功能,下面给大家说说注意的点以及流程

1.首先一定要有一个以企业名义开通的微信公众号,因为只有企业微信号才有权限去调用分享接口

2.对于分享功能,微信要求需要给访问的ip配置白名单,要不然会在后台处理程序的时候报错,ip不在白名单内,配置ip的地方如图所示

2.引入jssdk.js,具体参考步骤以及文件下载地址请到https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

3.在自定义分享的时候需要用到企业微信公众号的appid和appsercet,其中appid在前端代码需要使用,后台不仅需要appid,还需要appsecret,后台通过这两个参数去做算法处理,给前端返回签名,appid和appsecret在上图配置ip白名单的上面

下面是前端请求签名以及自定义分享接口的具体代码

$.ajax({
type:'GET',
url:'你的地址',
data: {
"current_url":window.location.href//传给后台的参数,即当前页的url
},
dataType:'json',
timeout: 2000,
success: function(data){
// console.log(data);
wx.config({
debug: false, //调试阶段建议开启,这里在调试的时候最好打开,打开后你在调用分享的时候会自动给你弹出一些弹窗,方便调试代码使用,可以跟踪是哪一步出问题
appId: '微信公众号的appid',//APPID
timestamp: data.timestamp,//后台返回的时间戳timestamp
nonceStr: data.noise_str,//后台返回的随机数nonceStr
signature: data.signature,//后台返回的签名signature
//需要调用的方法接口,这里有个注意的地方,我之前看别人的博客发现好多都过时了,接口都被微信废弃了,所以大家如果在调试的时候,如果出现api不通,就去官网看文档,要不然找问题毫无头绪
jsApiList: ['updateAppMessageShareData','updateTimelineShareData']
});
/* wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
alert('error',res);
}); */
wx.ready(function(){

//这个是微信给提供的校验接口是否可用

/* wx.checkJsApi({
jsApiList: ['updateAppMessageShareData','updateTimelineShareData'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
}); */
wx.updateTimelineShareData({
title: '朋友圈分享标题', // 分享标题
link: window.location.href.split('htmls')[0]+'htmls/share.html?work_id='+show_data.work_id, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致,这里的链接根据自己项目地址去拼接
imgUrl: "朋友圈分享图标", // 分享图标,绝对路径
success: function () {
// alert("朋友圈分享成功")
// 用户点击了分享后执行的回调函数
},
fail: function(res) {
// alert(res,3333333)
if(res.errMsg.indexOf('function not exist') > -1){
alert('版本过低请升级')
}
}
});
wx.updateAppMessageShareData({
title: '发送给朋友的标题', // 分享标题
desc: '发送给朋友的分享描述', // 分享描述
link: window.location.href.split('htmls')[0]+'htmls/share.html?work_id='+show_data.work_id, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致,同上
imgUrl: "发送给朋友的分享图标", // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// alert("朋友分享成功")
// 用户点击了分享后执行的回调函数
}
})
});
},
error:function(xhr,type){
new Error('Ajax error!')
}
});

好啦,以上就是最新的微信自定义分享功能的实现,具体哪里不会可以私信~~

原文地址:https://www.cnblogs.com/shenwh/p/14818895.html