Noiseless Praying Mantis

    tencent-share
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

    设置分享信息

    背景介绍(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

    Keywords

    Install

    npm i tencent-share

    DownloadsWeekly Downloads

    7

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    38.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • xiaowenzi