移动端 H5 多平台分享实践

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

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

系统原生的分享

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

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

navigator.share(share);

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

Share API 的具体使用可以参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/share

微信的分享

微信下的分享通过调用微信提供的 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 中的参数由服务端得到，具体可参见微信的开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

注意：必须在公众号后台设置 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 是分享平台类型，取值如下：

编号	分享平台
0	QQ好友
1	QQ空间
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对应的应用名称（应用可在 https://open.weibo.com/ 注册）；ralateUid 参数可选，指定微博用户 ID，会在微博尾部 at 此用户；searchPic 用于控制是否自动爬取页面的图片，和 pic不共存。效果如下：

微博分享组件

通过微博 API 自动发送微博

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

POST https://api.weibo.com/2/statuses/share.json

参数如下：

	必选	类型及范围	说明编号
access_token	是	`string`	采用 OAuth 授权方式为必填参数，OAuth 授权后获得。
status	是	`string`	用户分享到微博的文本内容，必须 URL Encode，文本中不能包含“#话题词#”，同时文本中必须包含至少一个分享的URL，且该 URL 的域名需要在后台设置。
pic	否	`binary`	用户分享到微博的图片，仅支持 JPEG、GIF、PNG 图片，上传图片大小限制为 5M。上传图片时，POST方式提交请求，需要采用`multipart/form-data`编码方式。
rip	否	`string`	开发者上报的操作用户真实 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 可供使用。

openMenu

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

WeiboJS.invoke('openMenu');

setSharingContent

该API可设置分享的内容。

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

invokeMenuItem

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

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

其中 platform 是分享平台类型，取值如下：

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

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

支付宝的分享

支付宝同样提供了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'	微博
undefined	undefined	分享面板

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

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	微信朋友圈
4	QQ好友
3	QQ空间
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	微信朋友圈
3	QQ好友
4	QQ空间
5	新浪微博

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

查看原文阅读 23959 赞 233 收藏 166 评论 13