微信内分享H5网页时默认发出去是链接,如果要想分享时带有标题、描述和图片,需要进行如下设置:
首先要有个公众号,公众号里获取到appid和appsecret,然后将后端服务器的IP设置到IP白名单里,将需要分享的H5网页的域名设置到公众号的JS安全域名里。以下是代码部分:
前端:
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
function hady1(){
$.ajax({
type:"POST",
url:'/wxshare.php', //请求的后端地址
data: {url: window.location.href},
success:function(result){
// console.log(result);
// 检测是否拥有权限
// wx.checkJsApi({
// jsApiList: ['updateAppMessageShareData'], // 需要检测的 JS 接口列表,所有 JS 接口列表见附录2,
// success: function(res) {
// alert(JSON.stringify(res));
// }
// });
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: result.data.appid, // 必填,公众号的唯一标识
timestamp: result.data.time, // 必填,生成签名的时间戳
nonceStr: result.data.nonceStr, // 必填,生成签名的随机串
signature: result.data.signature,// 必填,签名,见附录1
jsApiList: ['updateAppMessageShareData','updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
let title = '换成您要分享的标题';
let description = '换成您要分享的描述';
let link = location.href;
let cover = '换成您要分享的图片路径';
wx.ready(function(){
//发送给朋友
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: description, // 分享描述
link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: cover, // 分享图标
success: function () {
// alert('分享成功');
},
cancel: function () {
// alert('取消分享了');
}
});
//分享到朋友圈
wx.updateTimelineShareData({
title: title, // 分享标题
link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: cover, // 分享图标
success: function () {
// 设置成功
}
});
});
}
});
}
$(document).ready(function(){
hady1();
});
</script>
后端代码share.php:
// header("Access-Control-Allow-Origin: *"); //解决跨域
// header('Access-Control-Allow-Methods:POST'); // 响应类型
// header('Access-Control-Allow-Headers:*'); // 响应头设置
header('Content-type: application/json; charset=utf-8');
$data = array();
$data['time'] = time();
$data['appid'] = '替换成您的公众号appid'; //appid
$data['secret'] = '替换成您的公众号secret'; //secret
$res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$data['appid']."&secret=".$data['secret']); //获得access_token
$ress = json_decode($res,True);
$access_token = $ress['access_token'];// 取出 至于存储代码就不列举了
$js = file_get_contents("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi");
$jss = json_decode($js,True);
$jsapi_ticket = $jss['ticket'];// 取出JS凭证, 至于存储代码就不列举了
//开始签名算法了
$sign = array();
$sign['noncestr'] = 'W99WZY08z0wzcjjkl'; //随意字符串 一会要传到JS里去.要求一致
$sign['jsapi_ticket'] = $jsapi_ticket;
$sign['timestamp'] = $data['time'];
$sign['url'] = $_POST['url'];//获取URL
ksort($sign);
$signature = '';
foreach($sign as $k => $v){
$signature .= $k.'='.$v.'&';
}
$signature = substr($signature, 0, strlen($signature)-1);
$data['signature'] = sha1($signature);// 必填,签名,见附录1
$data['nonceStr'] = $sign['noncestr'];
$response = array('code' => 0, 'message' => '请求成功', 'data' => $data);
echo json_encode($response);