tencent-share

该模块集成了微信、QQ、腾讯新闻客户端、腾讯视频客户端的分享API,可以设置分享的标题、描述、图片和链接

Usage no npm install needed!

<script type="module">
  import tencentShare from 'https://cdn.skypack.dev/tencent-share';
</script>

README

设置分享信息

背景介绍(Background)

version size

该模块集成了微信、QQ、腾讯新闻客户端、腾讯视频客户端的分享 API,可以设置分享的标题、描述、图片和链接。

请注意: 当前功能只能在*.qq.com域名的网页中使用,其他域名调用当前模块是没有效果的。

0.1.01.0.0进行了较大版本的更新,必须使用new关键创建实例,然后使用实例调用相关的方法,同时可以监听微信的分享事件。

安装(Install)

使用 npm:

$ npm install tencent-share

使用 bower:

$ bower install tencent-share

使用 yarn:

$ yarn add tencent-share

使用 jsDelivr 的 CDN 地址:

<script src="https://cdn.jsdelivr.net/npm/tencent-share"></script>

使用 unpkg 的 CDN 地址:

<script src="https://unpkg.com/tencent-share"></script>

使用方式(Usage)

以 es6 为例:

import Share from "tencent-share";

// 分享信息
const shareData = {
    title: "读腾讯新闻,助力公益事业,让你的时间更有意义",
    desc: "上腾讯新闻,捐阅读时长做公益,一起为爱聚力",
    img: "http://mat1.gtimg.com/news/qqnews/qqspring/img/logo.png",
    link: window.location.href,
};
const share = new Share(shareData); // 可以在初始化时即传入要设置的分享信息,也可以不传入

share.setShareInfo(shareData); // 可以调用setShareInfo单独设置分享信息

传入的参数

参数 类型 说明
title string 分享的标题
desc string 副标题,或者描述
img string 小图标,尺寸一般为 120*120
link string 分享的链接

方法

设置分享信息

设置动态链接的功能已内置,开发者无需单独设置。不过设置的分享链接 link 要符合一定的条件才能触发:

链接里必须含有/show/_{string}/的字符,random 才能被替换

同时,分享的链接也可以是相对路径的链接了,这时模块会自动获取当前页面的域名进行拼接,例如:

let link1 = "https://gh.prize.qq.com/show/_abc/answer/wzryrank.html"; // 可转换动态链接 https://gh.prize.qq.com/show/_9dd3ljwq75lq/answer/wzryrank.html

let link2 = "/show/_abc/answer/wzryrank.html"; // 可转换动态链接(假设当前域名为gh.prize) https://gh.prize.qq.com/show/_9dd3ljwq75lq/answer/wzryrank.html

let link3 = "https://gh.prize.qq.com/h5/answer/wzryrank.html"; // 原样返回 https://gh.prize.qq.com/h5/answer/wzryrank.html

因此,若要分享动态链接时,可以像上面的例子中,show 后面的字符写死带有下划线的字符串的即可。

setShareInfo

实例调用该方法可以重新设置页面的分享信息,之前的信息会被覆盖。该方法会自动根据 UA 设置微信、QQ、腾讯新闻客户端、腾讯视频客户端的分享信息。

share.setShareInfo({
    title: "读腾讯新闻,助力公益事业,让你的时间更有意义",
    desc: "上腾讯新闻,捐阅读时长做公益,一起为爱聚力",
    img: "http://mat1.gtimg.com/news/qqnews/qqspring/img/logo.png",
    link: window.location.href,
});

在初始化时,调用的即是当前方法设置分享信息。

setShareInWx

该方法只能在微信中设置分享信息。

type:单独设置某个分享渠道的分享信息,非必传:

  • friends : 分享给好友
  • timeline : 分享到朋友圈
  • qq : 分享给 QQ 好友
  • qzone : 分享到 QQ 空间
setShareInWx(shareData); // 设置所有的分享渠道
setShareInWx(shareData, type); // 单独设置

setShareInQQ

该方法只能在QQ中设置分享信息。

setShareInQQ(shareData);

setShareInNews

该方法只能在新闻客户端新闻客户端极速版中设置分享信息。

setShareInNews(shareData);

setShareInVideo

该方法只能在腾讯视频客户端中设置分享信息。

setShareInVideo(shareData);

新闻客户端专有的方法

shareToApp

直接单独拉起某个分享渠道,这个方法只能在使用 setShareInfo 或者 setShareInNews 方法后,才能调用,否则无法使用。

type: 拉起的分享渠道:

friends | timeline | qq 这 3 个参数是为了方便使用微信 jsapi 的同学。

type 对应的渠道
wechatFriend 或 friends 微信好友
moments 或 timeline 微信朋友圈
qqFriend 或 qq 手 Q 好友
qzone QQ 空间
weibo 新浪微博
// @params {string} type
shareToApp(type);

showBigImageShareMenu

分享图片。

这里传入的是图片的 cdn 地址,base64 的会被客户端拒绝

// @params {string} imgurl
showBigImageShareMenu(imgurl);

show

拉起分享面板。

这个方法与 shareToApp 不同的在于,该方法会拉起客户端的分享面板,让用户再点击选择某个分享渠道;而 shareToApp 省去了展示分享浮层并由用户选取渠道的步骤。

show(); // 无参数

setActionBtn

设置 webview 右上角的样式。

type: 纯数字。

type 说明
0 不显示
1 显示为分享按钮
2 显示为刷新按钮
setActionBtn(0);

维护者(Maintainers)

wenzi0github

贡献者(Contributing)

协议(License)

MIT