因为业务需求,需要开发公众号网页朋友圈分享,类似以下阅读文章以后进行分享,需要带上小标题,简介,图标,要做成这样的话,就要做微信网页开发,目前有两种解决方案,一种是第三方开放平台
(https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html),一种是公众号网页开发(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html),为了便携这里选取了公众号网页开发.
1,先进入微信公众平台(https://mp.weixin.qq.com/)——登陆公众号——设置——公众号设置——功能设置,如下这里需要后台进行设置安全域名,服务器设置,设置完成以后就可以进行分享开发了,这个是后台的,前端不需要处理
2,页面要引入微信jssdk在需要调用JS接口的页面引入如下JS文件,支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
这里是前台要做的,我们需要给后台传当前url链接,
//引入微信jssdk,这里引入的是1.4.0版本
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
//前端传后台需要进行encodeURIComponent()转换,而且需要把#后面的截掉,
var currentUrl = encodeURIComponent(window.location.href.split('#')[0])
var linkUrl='https://www.baidu.com/'
$.ajax({
url: "后台提供",
type: "POST",
contentType: "application/json",
async: false,
data: JSON.stringify({
signUrl: currentUrl
}),
success: function(res) {
var Ret = res.data.data.ret
wx.config({
debug: false,//调试模式可以打开,发布上线要改回
appId: Ret.appid,//注册公众号微信给的id
timestamp: Ret.timestamp, //时间戳
nonceStr: Ret.nonceStr, //随机数
signature: Ret.signature, //签名
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
// appId: '', // 必填,公众号的唯一标识
// timestamp: , // 必填,生成签名的时间戳
// nonceStr: '', // 必填,生成签名的随机串
// signature: '',// 必填,签名
jsApiList: [
//分享到调用的
'updateAppMessageShareData',
'updateTimelineShareData'
]
});
//这里发布的时候可以注释掉
// wx.checkJsApi({
// jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
// success: function(res) {
// console.log(res)
// }
// });
wx.ready(function() {
var shareData = {
title: '大部分人的听力都很厉害', //标题
desc: '测测你的耳朵有多牛', //描述
link: linkUrl, //需要分享的URL该链接域名或路径必须与当前页面对应的公众号JS安全域名一致(必须是安全域名下的链接,可以是二级链接)
imgUrl: "" //缩略图地址必须是线上图片
};
//这里做了分享给微信朋友和朋友圈,QQ好友和QQ空间,其他接口已经在1.4.0js版本废弃,请注意
wx.updateAppMessageShareData(shareData);
wx.updateTimelineShareData(shareData);
});
wx.error(function(res) {
alert(res.errMsg); //错误提示
});
},
error: function() {
alert('服务器发生错误');
}
});
</script>