張夢元

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

關鍵詞：JSSDK;H5;跨平臺;營銷活動

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）18-0185-02

開放科學（資源服務）標識碼（OSID）：

1 背景

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

2 整體設計

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

3 JSSDK的分析與設計

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

3.1 JSSDK引用形式

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

3.2 JSSDK的接口設計

1）JSSDK配置接口

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

config（{

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

appId： "123456"， // 頁面的唯一標識

digest： ""，//頁面hashcode

timestamp： "1617189094"，// 簽名的時間戳

signature： ""， // 應用簽名字符串

apiList： ["showToast"，"share"] // 頁面需用到的相關jssdk接口

}）;

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

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

success函接對象，如：

success： function（res） {

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

}

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

3）用戶接口

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

checkLogin（{

success： function （res） {

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

}

}）;

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

4）基礎接口

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

5）設備接口

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

6）界面接口

界面接口包含關閉界面接口、顯示和隱藏菜單接口、顯示隱藏標題欄接口。這些接口使H5頁面能夠無感知地嵌入到客戶端頁面中。

3.3 JSSDK的安全驗證

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

3.4 JSSDK的版本兼容與接口擴展

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

4 JsBridge

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

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

4.1 JsBridge設計

JsBridge要按照JSSDK定義的接口規(guī)范實現(xiàn)所有的接口，避免不同平臺調(diào)用結(jié)果不一致問題。但可以選擇使用任何一種JS調(diào)用native方式和任何一種native調(diào)用js方式，無論開發(fā)者面對的是否為同一應用或者同一平臺。但一般來說都會進過下面的流程。

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

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

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

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

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

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

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

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

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

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

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

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

5 關鍵技術(shù)

5.1 跨平臺

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

充分發(fā)揮H5快速開發(fā)特點，同時保證不同端的體驗一致性。

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

5.2 輕量可擴展接口

接口只關注H5活動相關業(yè)務場景，并進行嚴格測試，保證核心邏輯代碼文檔，避免導致宿主程序的崩潰。同時減小JSSDK文件大小，保證加載和運行速度。

5.3 安全性

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

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

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

6 結(jié)束語

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

參考文獻：

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

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

[3] 周瑜嫄.移動端HTML5廣告的受眾體驗設計研究[D].無錫：江南大學，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)限的移動廣告漏洞攻擊技術(shù)[J].軟件學報，2018，29（5）：1392-1409.

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