一種移動(dòng)端H5運(yùn)營(yíng)活動(dòng)技術(shù)方案的設(shè)計(jì)與實(shí)現(xiàn)

張夢(mèng)元

摘要：移動(dòng)互聯(lián)網(wǎng)時(shí)代，H5線上活動(dòng)是企業(yè)常用的營(yíng)銷(xiāo)手段。這類型的活動(dòng)特點(diǎn)是時(shí)效短、變化快、低時(shí)延。如何快速開(kāi)發(fā)和發(fā)布并保證頁(yè)面的可靠性，對(duì)企業(yè)有重要的現(xiàn)實(shí)意義。該文采用開(kāi)發(fā)JSSDK的方式，將活動(dòng)業(yè)務(wù)需要的基礎(chǔ)接口進(jìn)行封裝，并保其穩(wěn)定性和跨平臺(tái)性，從而讓開(kāi)發(fā)活動(dòng)頁(yè)面時(shí)只需關(guān)注業(yè)務(wù)邏輯本身，達(dá)到提高質(zhì)量和效率的目的。

關(guān)鍵詞：JSSDK;H5;跨平臺(tái);營(yíng)銷(xiāo)活動(dòng)

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）18-0185-02

開(kāi)放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1 背景

移動(dòng)互聯(lián)網(wǎng)時(shí)代，H5線上活動(dòng)是企業(yè)常用的營(yíng)銷(xiāo)手段[1-2]，如抽獎(jiǎng)、降價(jià)促銷(xiāo)等。這類型的活動(dòng)特點(diǎn)是時(shí)效短、變化快、低時(shí)延[3]。H5能很好滿足以上要求，并具有成本低、傳播快等特點(diǎn)。因此，大多數(shù)活動(dòng)采用H5頁(yè)面來(lái)實(shí)現(xiàn)。但由于客戶端市場(chǎng)的碎片化，給H5頁(yè)面造成了一定兼容性問(wèn)題，這會(huì)導(dǎo)致體驗(yàn)差異從而造成客戶流失[4]。另外，大多數(shù)活動(dòng)需要客戶端提供一些本地接口（如振動(dòng)）能力才能實(shí)現(xiàn)，或者提供一些接口來(lái)優(yōu)化流程（如登錄信息）。最后，大部分公司都有多個(gè)不同App在線上運(yùn)營(yíng)，即使同一個(gè)應(yīng)用也存在著Android和iOS版本。這樣一來(lái)，企業(yè)面臨同一H5頁(yè)面需要在不同端適配的問(wèn)題。大流量型App企業(yè)通常會(huì)開(kāi)發(fā)H5頁(yè)面發(fā)布平臺(tái)，并以此來(lái)創(chuàng)造廣告收入。但中小型，特別是非流量型App企業(yè)則不具備這樣的成本優(yōu)勢(shì)。本文主要討論一種滿足跨平臺(tái)、跨應(yīng)用、高復(fù)用、低成本和高效率發(fā)布H5活動(dòng)技術(shù)方案，使得移動(dòng)應(yīng)用在發(fā)布H5活動(dòng)時(shí)，能避免前文提到的痛點(diǎn)。

2 整體設(shè)計(jì)

本文重點(diǎn)分析實(shí)現(xiàn)JSSDK與JsBridge兩層。

3 JSSDK的分析與設(shè)計(jì)

JSSDK實(shí)現(xiàn)對(duì)前端核心接口的封裝，使得前端只需專注活動(dòng)業(yè)務(wù)。需要滿足如下需求：包含常用的活動(dòng)相關(guān)接口，大部分情況下無(wú)需擴(kuò)展;足夠精簡(jiǎn)，以便減少代碼量，減少非必要的依賴;引用簡(jiǎn)單方便;穩(wěn)定可靠、運(yùn)行高效，同時(shí)向后兼容;可調(diào)試、可擴(kuò)展;安全。

3.1 JSSDK引用形式

通過(guò)webpack將JSSDK構(gòu)建為一個(gè)umd bundle，自動(dòng)適配所有形式的模塊。提供CDN和NPM兩種引用方式，方便用戶集成開(kāi)發(fā)。

3.2 JSSDK的接口設(shè)計(jì)

1）JSSDK配置接口

使用接口前需進(jìn)行配置調(diào)用，詳細(xì)設(shè)計(jì)如下：

config（{

debug： true， // 開(kāi)啟調(diào)試模式，客戶端會(huì)顯示完整的調(diào)試日志

appId： "123456"， // 頁(yè)面的唯一標(biāo)識(shí)

digest： ""，//頁(yè)面hashcode

timestamp： "1617189094"，// 簽名的時(shí)間戳

signature： ""， // 應(yīng)用簽名字符串

apiList： ["showToast"，"share"] // 頁(yè)面需用到的相關(guān)jssdk接口

}）;

2）通用回調(diào)接口

接口回調(diào)采用異步方式，當(dāng)需要調(diào)用完native函數(shù)后，對(duì)頁(yè)面進(jìn)行相應(yīng)的更新，可以在調(diào)用參數(shù)對(duì)象中加入如下js函數(shù)：

success函接對(duì)象，如：

success： function（res） {

//res是json對(duì)象，包含native回傳參數(shù)信息，具體參數(shù)細(xì)節(jié)在不同接口中分別定義

}

其他函數(shù)回調(diào)包括fail，complete，cancel等使用方式同success。其中fail定義為接口調(diào)用失敗情況，complete定義為執(zhí)行結(jié)束情況，cancel定義為調(diào)用取消的情況。

3）用戶接口

用戶接口包括獲取用戶登錄態(tài)，獲取用戶信息和跳轉(zhuǎn)登錄注冊(cè)等接口。頁(yè)面可以通過(guò)用戶登錄態(tài)接口獲取登錄態(tài)信息，這可避免在客戶端登錄的情況下，要求用戶在頁(yè)面進(jìn)行二次登錄問(wèn)題。如果客戶端沒(méi)有登錄，則可以直接在頁(yè)面跳轉(zhuǎn)到客戶端登錄頁(yè)面，從而使用戶的體驗(yàn)變流暢。具體獲取登錄接口態(tài)如下

checkLogin（{

success： function （res） {

var isLogin = res.isLogin // 是否登錄

}

}）;

res為本地代碼回調(diào)參數(shù)。內(nèi)容包括是否登錄、登錄用戶昵稱、性別、圖形等必要的用戶信息。跳轉(zhuǎn)登錄接口與獲取用戶信息類似，如果需要處理錯(cuò)誤，則加上fail回調(diào)即可。

4）基礎(chǔ)接口

基礎(chǔ)接口包括獲取版本信息、獲取客戶端信息、判斷接口可用和配置擴(kuò)展等。頁(yè)面端可以根據(jù)版本和客戶端信息設(shè)計(jì)不同業(yè)務(wù)流程。

5）設(shè)備接口

設(shè)備接口包括分享接口、掃碼接口、獲取設(shè)備信息接口、獲取網(wǎng)絡(luò)信息接口、振動(dòng)與地理位置接口、上傳和下載圖片接口。這些接口包基本涵蓋H5活動(dòng)需要接口，使H5頁(yè)面能夠?qū)崿F(xiàn)大部分原生應(yīng)用能夠?qū)崿F(xiàn)的場(chǎng)景。

6）界面接口

界面接口包含關(guān)閉界面接口、顯示和隱藏菜單接口、顯示隱藏標(biāo)題欄接口。這些接口使H5頁(yè)面能夠無(wú)感知地嵌入到客戶端頁(yè)面中。

3.3 JSSDK的安全驗(yàn)證

廣告容易被植入惡意代碼[5]，因此JSSDK安全至關(guān)重要?？蛻舳送ㄟ^(guò)域名、appId和簽名來(lái)識(shí)別接口調(diào)用合法性。如果用戶的域名沒(méi)有注冊(cè)，或者appId與簽名沒(méi)有通過(guò)客戶端安全效驗(yàn)，則H5頁(yè)面無(wú)法調(diào)用本地接口。另外，H5調(diào)用JSSDK接口前，必須用全局對(duì)象調(diào)用config接口后才能調(diào)用接口列表中的接口。

3.4 JSSDK的版本兼容與接口擴(kuò)展

JSSDK版本需向后兼容。JSSDK通過(guò)config接口新增擴(kuò)展接口名。native根據(jù)接口規(guī)范，很容易通過(guò)原有JsBridge橋通訊協(xié)議實(shí)現(xiàn)擴(kuò)展接口，中間JSSDK與JsBridge無(wú)需修改。

4 JsBridge

JsBridge是連接原生層和JavaScript的橋梁，是實(shí)現(xiàn)整個(gè)應(yīng)用框架的基礎(chǔ)部分，它包含native與JS兩個(gè)方向調(diào)用。

JS調(diào)用native一般有四種通信方案：第一，在webview中對(duì)頁(yè)面請(qǐng)求進(jìn)行攔截，執(zhí)行按特定規(guī)則映射的native函數(shù)。第二，對(duì)webview的彈窗進(jìn)行攔截，將彈窗參數(shù)按特定規(guī)則映射的native函數(shù)。第三，通過(guò)調(diào)用webview提供的函數(shù)進(jìn)行上下文注入，如蘋(píng)果scriptMessageHandler函數(shù)、安卓addJavascriptInterface函數(shù)等。第四，攔截webview的console.log函數(shù)，按特定規(guī)則映射native函數(shù)。不論是那種方法，除方法三外，本質(zhì)都是利用webview基礎(chǔ)接口去執(zhí)行額外的代碼邏輯。通用的實(shí)現(xiàn)方式是設(shè)置字符串映射規(guī)則，如：jsapi：//group/method？params，將js函數(shù)映射到native函數(shù)，達(dá)到調(diào)用native方法目的。本文不限定使用哪種方式，只要能提供本地調(diào)用即可。這樣可以方便客戶端開(kāi)發(fā)者基于公司的技術(shù)棧去選擇其中一種或者多種技術(shù)方案進(jìn)行實(shí)現(xiàn)。

4.1 JsBridge設(shè)計(jì)

JsBridge要按照J(rèn)SSDK定義的接口規(guī)范實(shí)現(xiàn)所有的接口，避免不同平臺(tái)調(diào)用結(jié)果不一致問(wèn)題。但可以選擇使用任何一種JS調(diào)用native方式和任何一種native調(diào)用js方式，無(wú)論開(kāi)發(fā)者面對(duì)的是否為同一應(yīng)用或者同一平臺(tái)。但一般來(lái)說(shuō)都會(huì)進(jìn)過(guò)下面的流程。

1）JS調(diào)用native一般流程：

第一步：定義JS函數(shù)與native函數(shù)映射規(guī)則。

第二步：在入口處置入映射判斷邏輯，如果調(diào)用過(guò)程符合攔截規(guī)則，進(jìn)入第三步，否則不處理。

第三步：編碼回調(diào)函數(shù)并將回調(diào)編碼和其他參數(shù)傳入本地函數(shù)調(diào)用。

第四步：實(shí)現(xiàn)本地函數(shù)執(zhí)行，執(zhí)行結(jié)果進(jìn)行封裝。

第五步：執(zhí)行回調(diào)流程。

2）native調(diào)用JS一般流程：

第一步：JSSDK給頁(yè)面注入通用回調(diào)函數(shù)callJS（Json json）。該步驟無(wú)需前端額外實(shí)現(xiàn)，在開(kāi)發(fā)H5頁(yè)面時(shí)引入JSSDK即可實(shí)現(xiàn)該步驟。

第二步：native調(diào)用callJS函數(shù)，調(diào)用時(shí)需要回傳回調(diào)編碼。具體調(diào)用方法可以參照上文JS調(diào)用native方式。

第三步：解析回調(diào)參數(shù)，獲取回調(diào)函數(shù)編碼。

第四步：根據(jù)編碼執(zhí)行相應(yīng)的回調(diào)函數(shù)。

上述流程省略了接口安全性檢測(cè)邏輯，這部分內(nèi)容在本文2.3接口安全驗(yàn)證部分進(jìn)行了比較詳細(xì)的描述。

5 關(guān)鍵技術(shù)

5.1 跨平臺(tái)

第一，通過(guò)JSSDK與JsBridge將抽象接口層與實(shí)現(xiàn)層分離，使得相同的接口在不同的客戶端能穩(wěn)定使用，H5能保持不變。

充分發(fā)揮H5快速開(kāi)發(fā)特點(diǎn)，同時(shí)保證不同端的體驗(yàn)一致性。

第二，JsBridge提供統(tǒng)一跨進(jìn)程通訊協(xié)議，使客戶端只需要對(duì)自己的平臺(tái)進(jìn)行實(shí)現(xiàn)，無(wú)需處理中間調(diào)用邏輯。

5.2 輕量可擴(kuò)展接口

接口只關(guān)注H5活動(dòng)相關(guān)業(yè)務(wù)場(chǎng)景，并進(jìn)行嚴(yán)格測(cè)試，保證核心邏輯代碼文檔，避免導(dǎo)致宿主程序的崩潰。同時(shí)減小JSSDK文件大小，保證加載和運(yùn)行速度。

5.3 安全性

擴(kuò)展H5能力后接口安全性非常關(guān)鍵，因此在JSSDK和JsBridge層需加入安全保護(hù)機(jī)制。通過(guò)驗(yàn)證H5的域名信息和appId，過(guò)濾掉非法調(diào)用并進(jìn)行上報(bào)追蹤，以保證用戶信息安全。

5.4 穩(wěn)定可調(diào)試

整個(gè)接口得到集中測(cè)試，保證核心邏輯的穩(wěn)定可靠。同時(shí)，增加JSSDK與JsBridge調(diào)試模式，使開(kāi)發(fā)過(guò)程能輸出詳細(xì)的日志，定位開(kāi)發(fā)問(wèn)題。

6 結(jié)束語(yǔ)

本文分析了移動(dòng)端H5活動(dòng)發(fā)布遇到的相關(guān)問(wèn)題，確定基于JSSDK實(shí)現(xiàn)方案，并完成JSSDK的接口設(shè)計(jì)與實(shí)現(xiàn)，同時(shí)給出JsBridge實(shí)現(xiàn)方式。通過(guò)使用JSSDK，開(kāi)發(fā)H5活動(dòng)變得更加簡(jiǎn)單高效。同時(shí)，提升了用戶體驗(yàn)，給中小企業(yè)提供了一種節(jié)約開(kāi)發(fā)與發(fā)布成本方案。

參考文獻(xiàn)：

[1] 劉玎璇.H5廣告的傳播效果與發(fā)展策略分析[J].科技傳播，2019，11（1）：1-2，10.

[2] 陳瑩.探析新媒體廣告?zhèn)鞑ツＪ竭\(yùn)作[J].傳媒論壇，2021，4（2）：79-80.

[3] 周瑜嫄.移動(dòng)端HTML5廣告的受眾體驗(yàn)設(shè)計(jì)研究[D].無(wú)錫：江南大學(xué)，2016.

[4] Yao Y，Zhao W X，Wang Y，et al.Version-Aware Rating Prediction for Mobile App Recommendation[J].ACM Transactions on Information Systems，2017，35（4）：1-33.

[5] 王持恒，陳晶，蘇涵，等.基于宿主權(quán)限的移動(dòng)廣告漏洞攻擊技術(shù)[J].軟件學(xué)報(bào)，2018，29（5）：1392-1409.

【通聯(lián)編輯：謝媛媛】