JSAPI

  • Since 9.6

    startShare

    唤起分享面板进行分享。
    分享的默认内容为服务端根据一定的规则自动抓取的当前页面内容而生成。
    可通过JSAPI入参传入onlySelectChannel的方式进行分享内容自定义,或通过meta标签进行自定义。

    注意:

    1. 无法直接控制显示的分享渠道列表,只能通过bizType入参来控制分享渠道列表的内容和排序。
    2. 唤起的分享面板第一栏才是分享渠道列表,第二栏为工具栏。如需自定义第二栏工具栏的内容,需要调用setToolbarMenu接口进行自定义。

    分享渠道名称列表

    目前已支持的分享渠道名分别为:

    "ALPContact" : 支付宝好友
    "ALPTimeLine" : 支付宝我的生活
    "ALPCommunity" : 支付宝生活圈
    "Weibo" : 新浪微博
    "DingTalkSession" : 钉钉
    "SMS" : 短信
    "Weixin" : 微信
    "WeixinTimeLine" : 微信朋友圈
    "QQ" : QQ
    "QQZone" : QQ空间
    "OpenInSafari" : 在浏览器中打开 (不支持onlySelectChannel)
    "Favorite" : 收藏 (不支持onlySelectChannel)
    

    使用方法

    AlipayJSBridge.call("startShare",{
      'bizType':'testShareBizType', // 业务标识,为空时将会显示默认的分享渠道列表。
      'onlySelectChannel':["ALPContact","Weixin"]  // 当用户选择该数组内指定的分享渠道时,仅返回渠道名,而不是真正开始分享  
    },function(data){
        console.log(data)
    });
    

    代码演示

    从meta读取分享信息

    
    <!--
    //钱包9.0开始支持 -->
    <meta name="Alipay:title" content="我是标题"/>
    <!--
    自定义图片
    //钱包8.6开始支持-->
    <meta name="Alipay:imgUrl" content="http://xxx/url/xxx.png"/>
    <!--
    自定义摘要
    //钱包8.6开始支持-->
    <meta name="Alipay:desc" content="我是摘要信息"/>
    <!--
    自定义链接
    //钱包10.0.0开始支持-->
    <meta name="Alipay:link" content="http://www.alipay.com"/>
    
    <h1>请点击右上角。。。,然后分享到相关渠道</h1>
    

    这种方法无法根据分享的渠道动态更换内容

    根据渠道进行自定义分享

    <h1>请点击按钮进行测试不同渠道分享</h1>
    
    <a href="javascript:void(0)" class="btn read">开始分享</a>
    
    <script>
    function ready(callback) {
      // 如果jsbridge已经注入则直接调用
      if (window.AlipayJSBridge) {
        callback && callback();
      } else {
        // 如果没有注入则监听注入的事件
        document.addEventListener('AlipayJSBridgeReady', callback, false);
      }
    }
    ready(function() {
      document.querySelector('.read').addEventListener('click', function() {
        AlipayJSBridge.call("startShare", {
          //当用户选择该数组内指定的分享渠道时,仅返回渠道名,而不是真正开始自动分享
          'onlySelectChannel': ["Weibo", "ALPContact", "ALPTimeLine", "SMS", "Weixin", "WeixinTimeLine", "QQ", "QQZone","DingTalkSession", "OpenInSafari", "Favorite"]
        }, function(data) {
          console.log("当前用户点击的分享渠道名为:"+data.channelName);
          //通过onlySelectChannel屏蔽掉自动分享功能后,自行调用shareToChannel接口进行单独分享
          AlipayJSBridge.call("shareToChannel", {
            name: data.channelName,
            param: {
              contentType: 'url',    //选填,目前支持支持"auto",text","image","url"格式(android分享组件不支持auto)
              title: '自定义分享的标题',
              content: '自定义分享的内容',
              iconUrl: 'https://zos.alipayobjects.com/rmsportal/CKajyImsyyUtTEkzEqcM.png',
              imageUrl: 'https://zos.alipayobjects.com/rmsportal/CKajyImsyyUtTEkzEqcM.png',
              captureScreen: false, //是否分享当前页面的截图
              url: 'https://m.taobao.com',
    
            }
          }, function(result) {
            console.log(result)
          });
        });
      });
    });
    </script>
    

    API

    AlipayJSBridge.call('startShare', {
      bizType, onlySelectChannel
    }, fn);
    

    入参

    名称类型描述必选默认值版本
    bizTypestring业务标识,为空时将会显示默认的分享渠道列表。N200000067
    onlySelectChannelarray当用户选择该数组内指定的分享渠道时,仅返回渠道名,而不是真正开始分享N
    fnfunction选择渠道后的回调N

    出参

    回调函数带入的参数result: {channelName, shareResult}

    名称类型描述版本
    channelNamestring用户选择的渠道名称9.6
    shareResultbool分享的结果9.6