在腾讯移动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配置，减少不必要请求。

关键词：网站建设

转载请注明来自:https://www.kufan.cn/news/136.html

上一篇：网站设计底部页脚也要很讲究

下一篇：移动手机端表单设计与构思