设置分享信息

背景介绍(Background)

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

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

从0.1.0到1.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