微信、手机QQ和QQ空间的web app内置分享API代码

在腾讯移动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: ''
        }
    });
});

测试页面

20151010102926_j6CcOIQQKM

注意事项

  1. 由于手机QQ限制,分享URL必须与页面URL同一域名,否则设置不生效。
  2. 可根据当前页面的客户端环境,判断是否需要WX配置,减少不必要请求。

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流