Tencent found on mobile web development platform for such a share components: support from outside the definition of micro-channel sharing, mobile QQ and QQ space. Now commonly used Baidu share is only suitable for use on a PC, to the era of the mobile share to micro letters, phone QQ and QQ space these can not achieve self-definition. With this component after it a lot easier and recommend it to everyone to use. In addition UC QQ browser and the browser also has its own built-API sharing settings, behind will share how to customize the sharing of these two.
Component address: http: //qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js
Components features:
Custom micro letters, phone QQ, QQ space to share content within the APP.
Component interface:
/ **
* custom interface
* @param opts customized content
* / setShareInfo ({
title: 'Share the title', // share the title
summary: 'share', // share
pic: 'http: //qzonestyle.gtimg. cn / aoi / sola / 20150617094556_OvfOpoRKRB.png ' , // share pictures
url:' http://qzs.qzone.qq.com/qzone/qzact/act/2015/father-day-m/index.html ', / / share links
// micro-channel authority to verify the configuration information, if not in the spread of micro-channel can be neglected
WXconfig: {
swapTitleInWX: to true, // whether the title of the content exchange (only circle of friends, because friends circle to show only the title)
appId: appId, / / public identification number unique
timestamp: timestamp, // generating a signature stamp
nonceStr: nonceStr, // signature generated random string
signature: signature // signature
}
});
Unused loader module:
<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>
Use 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: ''
}
});
});
Use 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: ''
}
});
});
Precautions:
As the mobile phone QQ limit, URL must share the same domain name and URL page, or setting does not take effect.
The current page may be the client environment, it determines whether to configure WX, reduce unnecessary request.