移動端H5多平臺分享實踐

聖誕節和元旦團隊策劃了兩個活動，都涉及到了在多個平臺下的分享，如何按照產品要求實現多平臺下一致的分享效果，包括分享文案的動態生成，在沒有Native的幫助下是比較困難的。咱們研究了不少分享方案，獲得了一套較爲完整的分享方案。

1 微信的分享

微信下的分享經過調用微信提供的JS-SDK和引導用戶點擊右上角完成。 使用微信的JS-SDK須要引入以下js文件：

<script src="//res.wx.qq.com/open/js/jweixin-1.3.1.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: function() {
            hideMaskLayer();  // 分享成功，隱藏引導用戶分享的浮層
        },
        cancel: function() {
        }
    };
    wx.onMenuShareAppMessage(share);  // 微信好友
    wx.onMenuShareTimeline(share);  // 朋友圈
    wx.onMenuShareQQ(share);  // QQ
    wx.onMenuShareQZone(share);  // QQ空間
    wx.onMenuShareWeibo(share);  // 騰訊微博
});
複製代碼

其中wx.config中的參數由服務端獲得，具體可參見微信的開發文檔： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 注意在公衆號後臺設置JS安全域名 效果以下：

2 QQ/TIM的分享

2.1 經過JS API分享

QQ（如下無特殊說明TIM下一樣有效）下也有設置分享內容的API，一樣須要先引用JSBridge相關的文件：

<script src="//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	微信朋友圈

2.2 經過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生成或修改無效。

2.3 經過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=' + 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);
複製代碼

其中分享的參數在拼入URL中時須要Base64編碼。爲了支持TIM下的分享，咱們引入了延時函數，若是喚起QQ失敗該定時器將會執行喚起TIM，喚起成功離開了此頁面將不會執行。QQ和TIM均安裝時優先喚起QQ。 效果以下：

2.4 經過分享組件的URL實現

QQ空間提供了分享組件（可參見：https://connect.qq.com/intro/share），經過分析該組件可獲得分享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下可免登直接分享。 效果以下：

3 微博的分享

3.1 經過分享組件的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不共存。 效果以下：

3.2 經過微博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。

具體可參見：微博開放平臺

3.3 經過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');
複製代碼

2. setSharingContent

該API可設置分享的內容。

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

3. 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便可實現分享。具體可參見微博的開發文檔： open.weibo.com/wiki/輕應用H5新…

4 支付寶的分享

支付寶一樣提供了JS API，能夠很方便的設置分享內容和喚起Native分享面板；不足之處在於不支持分享到QQ、微信等平臺。 使用支付寶的JS-SDK須要引入以下js文件：

<script src="//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() {
});
複製代碼

效果以下：

5 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	分享面板

調起分享面板的效果以下：

調起微博：

6 QQ瀏覽器的分享

QQ瀏覽器也提供了JS API調用Native的分享，一樣支持喚起分享面板、生成二維碼和分享到具體平臺。 首先須要引入以下JS文件：

<script src="//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	分享面板

調起分享面板的效果以下：

7 掌上理工大的分享

掌上理工大是咱們團隊開發的一款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會取當前頁面截圖做爲分享圖片。