您的位置：首页 > 移动开发 > 微信开发

2015最新微信接口分享标题、图片和描述自定义设置

2015-08-28 11:22 746 查看

方法1：

在内的最上面添加一张可见的300px*300px的图片（注意尺寸一定需要是300px*300px），然后在title标签里填写的内容就是分享时显示的标题内容。可参考：

<title>这里是分享的标题</title>
<body>
<div style="display:none;"><img src="..." alt="..." /></div>
……
</body>

但是这里会有一个问题，因为分享到朋友圈的时候，显示内容只有标题和图片，此方法可用，但如果分享给朋友或者分享到群里，需要显示标题、图片和描述，如果描述内容不设置，就会显示该分享的链接。所以要自定义描述内容的话就要调用微信提供的接口了，即方法2。

方法2：

首先需要一个认证的微信公众号，不然无法使用微信的jsapi。

一定要看官方文档：

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

根据文档，设置js接口安全域名和引入相关的js文件（http://res.wx.qq.com/open/js/jweixin-1.0.0.js）

接下来就是比较烦的权限验证了。建议这里采用异步操作，前端发起一个ajax请求获取后端的验证签名，

后端内容：

<?php
public function actionWxJson(){
$appid='你的微信公众号id';//appid
$gettoken=json_decode(file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET'),true);//通过公众号id和secret获得access_token
$wx_access_token=$gettoken['access_token'];//获得token值
$getticket=json_decode(file_get_contents('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$wx_access_token.'&type=jsapi'),true);//根据获得token获得公众号用于调用微信JS接口的临时票据
$ticket=$getticket['ticket'];//临时票据
$noncestr='Wm3WZYTPz0wzccnW';//一组随机的字符串
$wx_timestamp=time();//获得时间戳
$url=$_GET['url'];//获得传入的url
$signature=sha1('jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'×tamp='.$wx_timestamp.'&url='.$url);//生成签名字符串
$jsonarr=array('appId'=>$appid,'timestamp'=>$wx_timestamp,'nonceStr'=>$noncestr,'signature'=>$signature);
echo json_encode($jsonarr);//生成json数组返回
}
?>

注意：token通过appid获取，ticket票据通过token值获取，正常情况下获取的token值和ticket值有效期为7200s，并且这两个值有获取次数的限制，所以要对他们进行全局缓存（上面就不做判断了，直接获取，自己注意）。

前端：

var resourceurl=window.location.href;
var shareMsg={
title: '这里是分享的标题',
link: resourceurl,// 分享链接
imgUrl: '...', // 分享图标
desc:'...',//分享描述
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
}

$(document).ready(function(){

$.ajax({
type:"GET",
url:'http://...?url='+resourceurl,//访问WxJson的路径并以get方式传入url的值
datatype: "text"
success:function(data){
data=eval('('+data+')');
wx.config({
debug: false ,
appId:  data.appId ,
timestamp: data.timestamp ,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
});

wx.ready(function(){
wx.onMenuShareAppMessage({//分享给朋友
title:shareMsg.title,
desc:shareMsg.desc,
link: shareMsg.link, // 分享链接
imgUrl: shareMsg.imgUrl, // 分享图标
});
wx.onMenuShareTimeline({//分享到朋友圈
title:shareMsg.title,
desc:shareMsg.desc,
link: shareMsg.link, // 分享链接
imgUrl: shareMsg.imgUrl, // 分享图标
});
})
}
});
})

还有其他的分享接口可参考官方文档。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信分享自定义公众号

相关文章推荐

新的分享

章节导航