這篇文章寫于 2018 年朴沿，部分方法可能已失效

圣誕節(jié)和元旦團(tuán)隊(duì)策劃了兩個(gè)活動(dòng)乒验，都涉及到了在多個(gè)平臺(tái)下的分享，如何按照產(chǎn)品要求實(shí)現(xiàn)多平臺(tái)下一致的分享效果海蔽，包括分享文案的動(dòng)態(tài)生成钥组，在沒有客戶端 Native 方法的幫助下是比較困難的输硝。我們研究了很多分享方案，得到了一套較為完整的分享方案程梦。

系統(tǒng)原生的分享

瀏覽器現(xiàn)在具備了一個(gè)新的實(shí)驗(yàn)性 API navigator.share点把，可以直接拉起系統(tǒng)原生的分享面板，需要網(wǎng)頁(yè)支持通過 HTTPS 訪問屿附。例如：

const share = {
  title: '分享標(biāo)題',
  text: '分享內(nèi)容',
  url: '分享鏈接',
};

navigator.share(share);

這里也有一個(gè)示例項(xiàng)目：https://whut-recruit.netlify.app 郎逃，效果如下：

系統(tǒng)原生分享

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

微信的分享

微信下的分享通過調(diào)用微信提供的 JS-SDK 和引導(dǎo)用戶點(diǎn)擊右上角完成。
使用微信的 JS-SDK 需要引入如下 JS 文件：

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

設(shè)置分享內(nèi)容的代碼如下：

wx.config({
  debug: false,
  appId: '公眾號(hào)的appid',
  timestamp: '時(shí)間戳',
  nonceStr: '隨機(jī)字符串',
  signature: '簽名',
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showOptionMenu', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem']
});

wx.ready(function() {
  const share = {
    title: '分享標(biāo)題（朋友圈只顯示標(biāo)題）',
    desc: '分享內(nèi)容',
    imgUrl: '圖片URL',
    link: '分享鏈接（最好是后臺(tái)JS安全域名）',
    success() {
      hideMaskLayer();  // 分享成功拿撩，隱藏引導(dǎo)用戶分享的浮層
    },
    cancel() {
    }
  };
  wx.onMenuShareAppMessage(share);  // 微信好友
  wx.onMenuShareTimeline(share);  // 朋友圈
  wx.onMenuShareQQ(share);  // QQ
  wx.onMenuShareQZone(share);  // QQ空間
  wx.onMenuShareWeibo(share);  // 騰訊微博
});

其中 wx.config 中的參數(shù)由服務(wù)端得到衣厘，具體可參見微信的開發(fā)文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

注意：必須在公眾號(hào)后臺(tái)設(shè)置 JS 安全域名，否則可能無法調(diào)用

效果如下：

引導(dǎo)用戶分享

分享到朋友圈（自定義文案）

QQ/TIM 的分享

通過 JS API 分享

QQ（以下無特殊說明TIM下同樣有效）下也有設(shè)置分享內(nèi)容的API压恒，同樣需要先引用JSBridge相關(guān)的文件：

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

設(shè)置分享內(nèi)容的代碼如下：

const share = {
    title: '分享標(biāo)題影暴，最大45字節(jié)',
    desc: '分享內(nèi)容，最大60字節(jié)',
    image_url: '圖片URL',
    share_url: '分享鏈接'
};
mqq.data.setShareInfo(share, callback);

需要注意的是：分享鏈接長(zhǎng)度不能超過120字節(jié)探赫，并且必須跟頁(yè)面URL同一個(gè)域名型宙，否則設(shè)置不生效；分享的圖片最小需要200 * 200伦吠，否則分享到QQ空間時(shí)會(huì)被過濾掉妆兑。
設(shè)置完分享內(nèi)容后魂拦，可通過API調(diào)用喚起QQ的分享面板，免去引導(dǎo)的過程搁嗓。

mqq.ui.showShareMenu();

還有一種方法芯勘，QQ提供了監(jiān)聽點(diǎn)擊分享平臺(tái)的事件，當(dāng)點(diǎn)擊Native分享面板中的分享平臺(tái)時(shí)腺逛，會(huì)觸發(fā)此事件荷愕，QQ默認(rèn)的分享行為將不再執(zhí)行。代碼如下：

mqq.ui.setOnShareHandler(function (platform) {
    mqq.ui.shareMessage({
        title: '分享標(biāo)題',
        desc: '分享內(nèi)容',
        share_type: platform,
        share_url: '分享鏈接',
        image_url: '圖片URL',
        sourceName: '掌上理工大',
        back: true
    }, function() {
    });
});

其中platform是分享平臺(tái)類型棍矛，取值如下：

通過 meta 標(biāo)簽分享

QQ也支持通過設(shè)置meta標(biāo)簽定義分享內(nèi)容安疗。通過定義itemprop可設(shè)置分享內(nèi)容，同時(shí)為了更好的兼容其它平臺(tái)够委，我們也引入了Open Graph標(biāo)準(zhǔn)荐类。代碼如下：

<meta itemprop="name" property="og:title" content="分享標(biāo)題">
<meta property="og:url" content="分享鏈接">
<meta itemprop="image" property="og:image" content="圖片URL">
<meta name="description" itemprop="description" property="og:description" content="分享描述">

需要注意的是，meta標(biāo)簽需要是服務(wù)端渲染輸出茁帽，通過js生成或修改無效玉罐。

通過URL Scheme喚起QQ分享

還可以通過URL Scheme喚起QQ進(jìn)行分享，該方法的好處在于可以在非QQ環(huán)境下喚起QQ實(shí)現(xiàn)分享脐雪，缺點(diǎn)在于不能設(shè)置分享圖片厌小。代碼如下：

const share = {
    title: '分享標(biāo)題',
    desc: '分享內(nèi)容',
    share_url: '分享鏈接'
};
const url_scheme = '//share/to_fri?src_type=web&version=1&file_type=news&share_id=1103437993&title=' + Base64.encode(share.title) + '&thirdAppDisplayName=5o6M5LiK55CG5bel5aSn&url=' + Base64.encode(share.share_url) + '&description=' + Base64.encode(share.desc);
location.assign('mqqapi:' + url_scheme);
setTimeout(function() {
  location.assign('timapi:' + url_scheme);
}, 2000);

其中分享的參數(shù)在拼入U(xiǎn)RL中時(shí)需要Base64編碼。為了支持TIM下的分享战秋，我們引入了延時(shí)函數(shù)，如果喚起QQ失敗該定時(shí)器將會(huì)執(zhí)行喚起TIM讨韭，喚起成功離開了此頁(yè)面將不會(huì)執(zhí)行脂信。QQ和TIM均安裝時(shí)優(yōu)先喚起QQ。
效果如下：

喚起的Native分享

通過分享組件的URL實(shí)現(xiàn)

QQ空間提供了分享組件（可參見：https://connect.qq.com/intro/share）透硝，通過分析該組件可得到分享URL的參數(shù)狰闪。代碼如下：

const share = {
    title: '分享標(biāo)題',
    desc: '分享內(nèi)容',
    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用豎線分隔濒生。
該方法優(yōu)點(diǎn)在于同樣支持非QQ環(huán)境下的分享埋泵。非QQ下用戶登錄后即可分享，QQ下可免登直接分享罪治。
效果如下：

QQ空間分享組件

微博的分享

通過分享組件的URL實(shí)現(xiàn)

微博同樣提供了分享組件丽声，通過分析URL可得到分享參數(shù)。代碼如下：

const share = {
    title: '分享標(biāo)題',
    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參數(shù)可選觉义，如果設(shè)置微博將會(huì)顯示分享來源為key對(duì)應(yīng)的應(yīng)用名稱（應(yīng)用可在 https://open.weibo.com/ 注冊(cè)）雁社；ralateUid參數(shù)可選，指定微博用戶id晒骇，會(huì)在微博尾部at此用戶霉撵；searchPic用于控制是否自動(dòng)爬取頁(yè)面的圖片磺浙，和pic不共存。
效果如下：

微博分享組件

通過微博API自動(dòng)發(fā)送微博

微博提供了API可通過服務(wù)端調(diào)用接口直接發(fā)送一條微博徒坡。

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

參數(shù)如下：

具體可參見：微博開放平臺(tái)

通過 JS API 分享

微博同樣有提供JS-SDK可供調(diào)用Native的方法浮入，在使用前需要在微博開放平臺(tái)申請(qǐng)輕應(yīng)用龙优，并設(shè)置安全域名。
使用微信的JS-SDK需要引入如下js文件：

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

同樣需要先設(shè)置初始化參數(shù)事秀。

WeiboJS.init({
    appkey: '輕應(yīng)用key',
    debug: false,
    timestamp: '時(shí)間戳',
    noncestr: '隨機(jī)字符串',
    signature: '簽名',
    scope: ['openMenu', 'setMenuItems', 'menuItemSelected', 'setSharingContent']
}, function() {
});

有3個(gè)關(guān)于分享的JS API可供使用彤断。

1. openMenu

該API可調(diào)起Native的分享面板。

WeiboJS.invoke('openMenu');

2. setSharingContent

該API可設(shè)置分享的內(nèi)容易迹。

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

3. invokeMenuItem

該API可以直接觸發(fā)分享面板中點(diǎn)擊相應(yīng)菜單項(xiàng)宰衙。

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

其中platform是分享平臺(tái)類型，取值如下：

通過使用API 1 + API 2（最佳）或API 2 + API 3即可實(shí)現(xiàn)分享睹欲。具體可參見微博的開發(fā)文檔：
http://open.weibo.com/wiki/輕應(yīng)用H5新版JS

支付寶的分享

支付寶同樣提供了JS API供炼，可以很方便的設(shè)置分享內(nèi)容和喚起Native分享面板；不足之處在于不支持分享到QQ窘疮、微信等平臺(tái)袋哼。
使用支付寶的JS-SDK需要引入如下js文件：

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

代碼如下：

const share = {
    title: '分享標(biāo)題',
    content: '分享內(nèi)容',
    image: '圖片URL',
    url: '分享鏈接',
    captureScreen: false,
    showToolBar: false
};
ap.share(share, function() {
});

效果如下：

支付寶Native分享

UC 瀏覽器的分享

UC 瀏覽器也提供了JS API調(diào)用Native的分享，支持喚起分享面板和分享到具體平臺(tái)考余。代碼如下：

const share = {
    title: '分享標(biāo)題',
    desc: '分享內(nèi)容',
    image_url: '圖片URL',
    share_url: '分享鏈接'
};
const isiOS = /(iPhone|iPad|iPod)/.test(navigator.userAgent);  // 判斷應(yīng)用平臺(tái)
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是分享平臺(tái)類型先嬉，取值如下：

調(diào)起分享面板的效果如下：

UC分享面板

調(diào)起微博：

UC調(diào)起微博

QQ 瀏覽器的分享

QQ 瀏覽器也提供了JS API調(diào)用Native的分享，同樣支持喚起分享面板楚堤、生成二維碼和分享到具體平臺(tái)疫蔓。
首先需要引入如下JS文件：

<script src="http://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是分享平臺(tái)類型含懊，取值如下：

調(diào)起分享面板的效果如下：

QQ瀏覽器分享面板

掌上理工大的分享

掌上理工大是我們團(tuán)隊(duì)開發(fā)的一款A(yù)pp。我們同樣通過JSBridge提供了分享能力衅胀。掌上理工大的WebView容器會(huì)在頁(yè)面加載前注入token對(duì)象岔乔，包含了分享接口，Native端使用了友盟SDK執(zhí)行具體的分享邏輯滚躯。該分享方式優(yōu)點(diǎn)在于采用了Native的分享方式雏门，通過調(diào)用QQ、微信掸掏、微博各個(gè)平臺(tái)給App開放的分享能力茁影，分享的體驗(yàn)最佳，并且可以在QQ等平臺(tái)中準(zhǔn)確的顯示分享來源（掌上理工大）丧凤。
分享接口：

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

其中platform是分享平臺(tái)類型募闲，取值如下：

Native會(huì)取當(dāng)前頁(yè)面截圖作為分享圖片。