移动端 H5 多平台分享实践

22,241

这篇文章写于 2018 年,部分方法可能已失效

圣诞节和元旦团队策划了两个活动,都涉及到了在多个平台下的分享,如何按照产品要求实现多平台下一致的分享效果,包括分享文案的动态生成,在没有客户端 Native 方法的帮助下是比较困难的。我们研究了很多分享方案,得到了一套较为完整的分享方案。

系统原生的分享

浏览器现在具备了一个新的实验性 API navigator.share,可以直接拉起系统原生的分享面板,需要网页支持通过 HTTPS 访问。例如:

const share = {
  title: '分享标题',
  text: '分享内容',
  url: '分享链接',
};

navigator.share(share);

这里也有一个示例项目:whut-recruit.netlify.app ,效果如下:

image.png

Share API 的具体使用可以参考:developer.mozilla.org/zh-CN/docs/…

微信的分享

微信下的分享通过调用微信提供的 JS-SDK 和引导用户点击右上角完成。 使用微信的 JS-SDK 需要引入如下 JS 文件:

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

设置分享内容的代码如下:

wx.config({
  debug: false,
  appId: '公众号的appid',
  timestamp: '时间戳',
  nonceStr: '随机字符串',
  signature: '签名',
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showOptionMenu', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem']
});

wx.ready(function() {
  const share = {
    title: '分享标题(朋友圈只显示标题)',
    desc: '分享内容',
    imgUrl: '图片URL',
    link: '分享链接(最好是后台JS安全域名)',
    success() {
      hideMaskLayer();  // 分享成功,隐藏引导用户分享的浮层
    },
    cancel() {
    }
  };
  wx.onMenuShareAppMessage(share);  // 微信好友
  wx.onMenuShareTimeline(share);  // 朋友圈
  wx.onMenuShareQQ(share);  // QQ
  wx.onMenuShareQZone(share);  // QQ空间
  wx.onMenuShareWeibo(share);  // 腾讯微博
});

其中 wx.config 中的参数由服务端得到,具体可参见微信的开发文档:developers.weixin.qq.com/doc/offiacc…

注意:必须在公众号后台设置 JS 安全域名,否则可能无法调用

效果如下:

引导用户分享 分享到朋友圈(自定义文案)

QQ/TIM 的分享

通过 JS API 分享

QQ(以下无特殊说明 TIM 下同样有效)下也有设置分享内容的 API,同样需要先引用 JSBridge 相关的文件:

<script src="https://open.mobile.qq.com/sdk/qqapi.js"></script>

设置分享内容的代码如下:

const share = {
  title: '分享标题,最大45字节',
  desc: '分享内容,最大60字节',
  image_url: '图片URL',
  share_url: '分享链接'
};
mqq.data.setShareInfo(share, callback);

需要注意的是:分享链接长度不能超过 120 字节,并且必须跟页面URL同一个域名,否则设置不生效;分享的图片最小需要 200 * 200,否则分享到 QQ 空间时会被过滤掉。

设置完分享内容后,可通过 API 调用唤起QQ的分享面板,免去引导的过程。

mqq.ui.showShareMenu();

还有一种方法,QQ提供了监听点击分享平台的事件,当点击Native分享面板中的分享平台时,会触发此事件,QQ默认的分享行为将不再执行。代码如下:

mqq.ui.setOnShareHandler(function (platform) {
  mqq.ui.shareMessage({
    title: '分享标题',
    desc: '分享内容',
    share_type: platform,
    share_url: '分享链接',
    image_url: '图片URL',
    sourceName: '掌上理工大',
    back: true
  }, function () {
  });
});

其中 platform 是分享平台类型,取值如下:

编号分享平台
0QQ好友
1QQ空间
2微信好友
3微信朋友圈

通过 meta 标签分享

QQ 也支持通过设置 meta 标签定义分享内容。通过定义 itemprop 可设置分享内容,同时为了更好的兼容其它平台,我们也引入了 Open Graph 标准。代码如下:

<meta itemprop="name" property="og:title" content="分享标题">
<meta property="og:url" content="分享链接">
<meta itemprop="image" property="og:image" content="图片URL">
<meta name="description" itemprop="description" property="og:description" content="分享描述">

需要注意的是,meta 标签需要是服务端渲染输出,通过 JS 生成或修改无效。

通过 URL Scheme 唤起QQ分享

还可以通过 URL Scheme 唤起QQ进行分享,该方法的好处在于可以在非 QQ 环境下唤起 QQ 实现分享,缺点在于不能设置分享图片。代码如下:

const share = {
  title: '分享标题',
  desc: '分享内容',
  share_url: '分享链接'
};
const url_scheme = '//share/to_fri?src_type=web&version=1&file_type=news&share_id=1103437993&title=' + atob(share.title) + '&thirdAppDisplayName=5o6M5LiK55CG5bel5aSn&url=' + atob(share.share_url) + '&description=' + atob(share.desc);
location.assign('mqqapi:' + url_scheme);
setTimeout(function() {
  location.assign('timapi:' + url_scheme);
}, 2000);

其中分享的参数在拼入URL中时需要 Base64 编码。为了支持 TIM 下的分享,我们引入了延时函数,如果唤起 QQ 失败该定时器将会执行唤起 TIM,唤起成功离开了此页面将不会执行。QQ 和 TIM 均安装时优先唤起 QQ。效果如下:

唤起的Native分享

通过分享组件的URL实现

QQ 空间提供了分享组件,通过分析该组件可得到分享URL的参数。代码如下:

const share = {
  title: '分享标题',
  desc: '分享内容',
  image_url: ['图片URL'],
  share_url: '分享链接'
};
let image_urls = share.image_url.map(function(image) {
  return encodeURIComponent(image);
});
location.replace('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(share.share_url) + '&site=掌上理工大&title=' + share.title + '&pics=' + image_urls.join('|') + '&summary=' + share.desc);

其中可支持多图片的分享,图片 URL 用竖线分隔。 该方法优点在于同样支持非 QQ 环境下的分享。非 QQ 下用户登录后即可分享,QQ 下可免登直接分享。效果如下:

QQ空间分享组件

微博的分享

通过分享组件的 URL 实现

微博同样提供了分享组件,通过分析 URL 可得到分享参数。代码如下:

const share = {
  title: '分享标题',
  image_url: '图片URL',
  share_url: '分享链接'
};
location.replace('https://service.weibo.com/share/share.php?url=' + encodeURIComponent(share.share_url) + '&title=' + share.title + '&appkey=277159429&&ralateUid=1855112015&pic=' + share.image_url + '&searchPic=true');

其中 appKey 参数可选,如果设置微博将会显示分享来源为key对应的应用名称(应用可在 open.weibo.com/ 注册);ralateUid 参数可选,指定微博用户 ID,会在微博尾部 at 此用户;searchPic 用于控制是否自动爬取页面的图片,和 pic不共存。效果如下:

微博分享组件

通过微博 API 自动发送微博

微博提供了API可通过服务端调用接口直接发送一条微博。

POST api.weibo.com/2/statuses/…

参数如下:

必选类型及范围说明编号
access_tokenstring采用 OAuth 授权方式为必填参数,OAuth 授权后获得。
statusstring用户分享到微博的文本内容,必须 URL Encode,文本中不能包含“#话题词#”,同时文本中必须包含至少一个分享的URL,且该 URL 的域名需要在后台设置。
picbinary用户分享到微博的图片,仅支持 JPEG、GIF、PNG 图片,上传图片大小限制为 5M。上传图片时,POST方式提交请求,需要采用multipart/form-data编码方式。
ripstring开发者上报的操作用户真实 IP,例如:211.156.0.1。

具体可参见:微博开放平台

通过 JS API 分享

微博同样有提供JS-SDK可供调用Native的方法,在使用前需要在微博开放平台申请轻应用,并设置安全域名。 使用微信的JS-SDK需要引入如下js文件:

<script src="//tjs.sjs.sinajs.cn/open/thirdpart/js/jsapi/mobile.js"></script>

同样需要先设置初始化参数。

WeiboJS.init({
  appkey : '轻应用key',
  debug: false,
  timestamp: '时间戳',
  noncestr: '随机字符串',
  signature: '签名',
  scope: ['openMenu', 'setMenuItems', 'menuItemSelected', 'setSharingContent']
}, function() {
});

有 3 个关于分享的 JS API 可供使用。

  1. openMenu

该API可调起Native的分享面板。

WeiboJS.invoke('openMenu');
  1. setSharingContent

该API可设置分享的内容。

WeiboJS.invoke('openMenu', {
  icon: share.title,
  desc: share.desc,
  icon: share.image_url
});
  1. invokeMenuItem

该API可以直接触发分享面板中点击相应菜单项。

WeiboJS.invoke('invokeMenuItem', { 
  code: platform
});

其中 platform 是分享平台类型,取值如下:

编号分享平台
1001微博
1002微博好友圈
1003微博私信
1004微信好友
1005微信朋友圈
1006微米好友
1007微米圈
1008来往(点点虫)好友
1009来往(点点虫)动态
1010QQ好友
1011QQ空间
1101短信
2001系统浏览器
2002复制链接

通过使用API 1 + API 2(最佳)或API 2 + API 3即可实现分享。具体可参见微博的开发文档: open.weibo.com/wiki/轻应用H5新…

支付宝的分享

支付宝同样提供了JS API,可以很方便的设置分享内容和唤起 Native 分享面板;不足之处在于不支持分享到QQ、微信等平台。

使用支付宝的 JS-SDK 需要引入如下js文件:

<script src="https://a.alipayobjects.com/g/h5-lib/alipayjsapi/3.0.6/alipayjsapi.inc.min.js"></script>

代码如下:

const share = {
  title: '分享标题',
  content: '分享内容',
  image: '图片URL',
  url: '分享链接',
  captureScreen: false,
  showToolBar: false
};
ap.share(share, function() {
});

效果如下:

支付宝Native分享

UC 浏览器的分享

UC 浏览器也提供了 JS API 调用 Native 的分享,支持唤起分享面板和分享到具体平台。代码如下:

const share = {
  title: '分享标题',
  desc: '分享内容',
  image_url: '图片URL',
  share_url: '分享链接'
};
const isiOS = /(iPhone|iPad|iPod)/.test(navigator.userAgent);  // 判断应用平台
if (isiOS) {
  if (ucbrowser.web_shareEX) {
    ucbrowser.web_shareEX(
      JSON.stringify({
        title: share.title,
        content: share.desc,
        sourceUrl: share.share_url,
        imageUrl: share.image_url,
        source: '掌上理工大',
        target: platform
      })
    )
  } else {
    ucbrowser.web_share(share.title, share.desc, share.share_url, platform, '', '掌上理工大', share.image_url);
  }
}
else ucweb.startRequest('shell.page_share', [share.title, share.desc, share.share_url, platform, '', '掌上理工大', share.image_url]);

其中 platform 是分享平台类型,取值如下:

Android编号iOS编号分享平台
'WechatFriends''kWeixinFriend'微信好友
'WechatTimeline''kWeixin'微信朋友圈
'QQ''kQQ'QQ好友
'Qzone''kQZone'QQ空间
'SinaWeibo''kSinaWeibo'微博
undefinedundefined分享面板

调起分享面板的效果如下:

UC分享面板

调起微博:

UC调起微博

QQ 浏览器的分享

QQ 浏览器也提供了 JS API 调用 Native 的分享,同样支持唤起分享面板、生成二维码和分享到具体平台。

首先需要引入如下 JS 文件:

<script src="https://jsapi.qq.com/get?api=app.share"></script>

代码如下:

browser.app.share({
    title: share.title,
    description: share.desc,
    url: share.share_url,
    img_url: share.image_url,
    from: '掌上理工大',
    to_app: platform
});

其中 platform 是分享平台类型,取值如下:

编号分享平台
1微信好友
8微信朋友圈
4QQ好友
3QQ空间
11微博
5更多
7生成二维码
10复制链接
undefined分享面板

调起分享面板的效果如下:

QQ浏览器分享面板

掌上理工大的分享

掌上理工大是我们 Token 团队开发的一款 App。我们同样通过 JSBridge 提供了分享能力。掌上理工大的 WebView 容器会在页面加载前注入 token 对象,包含了分享接口,Native 端使用了友盟 SDK 执行具体的分享逻辑。该分享方式优点在于采用了 Native 的分享方式,通过调用 QQ、微信、微博各个平台给 App 开放的分享能力,分享的体验最佳,并且可以在 QQ 等平台中准确的显示分享来源。 分享接口:

token.invokeShare(share.title, share.share_url, platform);

其中 platform 是分享平台类型,取值如下:

编号分享平台
0调用分享面板
1微信好友
2微信朋友圈
3QQ好友
4QQ空间
5新浪微博

Native 会取当前页面截图作为分享图片,不支持指定。