在腾讯移动web开发平台上发现这么一个分享组件:支持自定义微信、手机QQ和QQ空间的对外分享功能。现在常用的百度分享只适合在PC上使用,到了移动的时代了,分享到微信,手机QQ和QQ空间这几个却无法实现自定义。有了这个组件之后就方便许多了,推荐给大家使用。另外UC浏览器和QQ浏览器也有自己的内嵌API分享设置,后面将会分享如何在这两个中自定义分享的内容。
组件地址:http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js
组件功能:
定制微信,手机QQ,QQ空间APP内的分享内容。
组件接口:
/** * 定制接口 * @param opts 定制内容 */setShareInfo({ title: '分享标题', // 分享标题 summary: '分享内容', // 分享内容 pic: 'http://qzonestyle.gtimg.cn/aoi/sola/20150617094556_OvfOpoRKRB.png', // 分享图片 url: 'http://qzs.qzone.qq.com/qzone/qzact/act/2015/father-day-m/index.html', // 分享链接 // 微信权限验证配置信息,若不在微信传播,可忽略 WXconfig: { swapTitleInWX: true, // 是否标题内容互换(仅朋友圈,因朋友圈内只显示标题) appId: appId, // 公众号的唯一标识 timestamp: timestamp, // 生成签名的时间戳 nonceStr: nonceStr, // 生成签名的随机串 signature: signature // 签名 } });
未使用模块加载器:
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script> <script type="text/javascript"> setShareInfo({ title: '分享标题', summary: '分享内容', pic: 'http://qzonestyle.gtimg.cn/aoi/sola/20150617094556_OvfOpoRKRB.png', url: 'http://qzs.qzone.qq.com//qzone/qzact/act/2015/father-day-m/index.html', WXconfig: { swapTitleInWX: true, appId: '', timestamp: '', nonceStr: '', signature: '' } });</script>
使用seajs:
seajs.use('http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js', function(setShareInfo) { setShareInfo({ title: '分享标题', summary: '分享内容', pic: 'http://qzonestyle.gtimg.cn/aoi/sola/20150617094556_OvfOpoRKRB.png', url: 'http://qzs.qzone.qq.com//qzone/qzact/act/2015/father-day-m/index.html', WXconfig: { swapTitleInWX: true, appId: '', timestamp:'', nonceStr: '', signature: '' } }); });
使用requirejs:
require(['http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js'], function(setShareInfo) { setShareInfo({ title: '分享标题', summary: '分享内容', pic: 'http://qzonestyle.gtimg.cn/aoi/sola/20150617094556_OvfOpoRKRB.png', url: 'http://qzs.qzone.qq.com//qzone/qzact/act/2015/father-day-m/index.html', WXconfig: { swapTitleInWX: true, appId: '', timestamp:'', nonceStr: '', signature: '' } }); });
注意事项:
由于手机QQ限制,分享URL必须与页面URL同一域名,否则设置不生效。
可根据当前页面的客户端环境,判断是否需要WX配置,减少不必要请求。