在腾讯移动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: '父爱,在你看不到的地方1',
summary: '父爱如山,感觉不到只因身在此山中2',
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配置,减少不必要请求。