移動端H5多平臺分享實踐

Crazy_Urus發表於2018-01-19

聖誕節和元旦團隊策劃了兩個活動，都涉及到了在多個平臺下的分享，如何按照產品要求實現多平臺下一致的分享效果，包括分享文案的動態生成，在沒有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可供使用。

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即可實現分享。具體可參見微博的開發文件： 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會取當前頁面截圖作為分享圖片。

移動端裝置管理平臺 atx server2實踐
2019-06-16
Server
【騰訊 TMQ】從 0 到 1：打造移動端 H5 效能測試平臺
2017-05-11
MQH5
案例實踐｜Apache Pulsar 在移動雲智慧運維平臺的實踐
2022-03-02
Apache運維
H5移動端彈幕動畫實現
2018-08-22
H5動畫
[譯] 使用 Flutter 實現跨平臺移動端開發
2018-08-02
Flutter
移動端適配-實踐篇
2020-01-04
移動端防抓包實踐
2022-12-15
H5移動端開發
2019-02-16
H5
H5實現移動端複製文字功能
2020-07-22
H5
移動端H5實現圖片上傳
2017-07-03
H5
分享移動端app與h5的產品差別(一)
2019-11-30
APPH5
資料共享交換平臺的實踐分享
2022-12-05
Flutter + Dart三端一體化動態化平臺實踐
2023-02-21
FlutterDart
react移動端適配方案實踐
2018-12-22
React
移動端H5多頁開發拍門磚經驗
2018-05-22
H5
阿里技術分享：閒魚IM基於Flutter的移動端跨端改造實踐
2021-07-05
阿里Flutter跨端
H5實現移動端語音錄製功能
2019-02-19
H5
移動端H5 實現0.5px邊框
2020-10-16
H5
移動端h5視訊方案
2019-03-14
H5
移動端『H5周曆元件』
2018-04-22
H5元件
吃透移動端 H5 響應式佈局｜深入原理到目前最佳實踐方案
2019-12-15
H5
H5移動端獲獎無縫滾動動畫實現
2018-06-21
H5動畫
移動端跨平臺開發的深度解析
2019-03-04
微信分享(移動web端)
2019-02-17
Web
移動端APP元件化架構實踐
2023-11-06
APP元件化架構
中國移動磐舟磐基平臺基於KubeEdge的落地實踐
2022-04-14
支付寶移動端動態化方案實踐
2018-11-16
移動端H5預載入方案
2019-06-04
H5
Flutter:移動端跨平臺技術演進之路
2019-11-21
Flutter
TypeScript, Angular 和移動端的跨平臺開發
2017-12-19
TypeScriptAngular
轉轉業務資料校驗平臺實踐分享
2023-04-12
DCOS實踐分享(3)：基於Mesos 和 Docker企業級移動應用實踐分享
2016-06-14
Docker
宜信智慧監控平臺建設實踐|分享實錄
2019-11-20
移動端手勢庫設計與實踐
2019-03-01
Lighthouse與Google的移動端最佳實踐
2019-03-03
Go
移動端常鍵使用分享
2018-03-01
活動運營自動化平臺實踐
2019-06-05
移動端H5拉起手機相機
2019-06-04
H5

移動端H5多平臺分享實踐

1 微信的分享

2 QQ/TIM的分享

2.1 通過JS API分享

2.2 通過meta標籤分享

2.3 通過URL Scheme喚起QQ分享

2.4 通過分享元件的URL實現

3 微博的分享

3.1 通過分享元件的URL實現

3.2 通過微博API自動傳送微博

3.3 通過JS API分享

4 支付寶的分享

5 UC瀏覽器的分享

6 QQ瀏覽器的分享

7 掌上理工大的分享

相關文章