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

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了H5運(yùn)營活動(dòng)技術(shù)方案設(shè)計(jì)與實(shí)現(xiàn)范文，希望能給你帶來靈感和參考，敬請(qǐng)閱讀。

1背景

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

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

整個(gè)方案包括H5，JSSDK，JsBridge，native四個(gè)部分。H5是活動(dòng)的內(nèi)容頁，可以是html文本，也可以是網(wǎng)頁鏈接；JSSDK是一個(gè)封裝好的javascript工具集（包括活動(dòng)必須的精簡(jiǎn)接口），提供Web前端開發(fā)者使用，需要在H5中引入；JsBridge是溝通js與native的橋梁，實(shí)現(xiàn)跨進(jìn)程調(diào)用；native是客戶端本地方法實(shí)現(xiàn)。H5通過引用JSSDK實(shí)現(xiàn)對(duì)本地接口的透明調(diào)用。應(yīng)用結(jié)構(gòu)如圖1所示。

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

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

3.1JSSDK引用形式

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

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

1）JSSDK配置接口使用接口前需進(jìn)行配置調(diào)用，詳細(xì)設(shè)計(jì)如下:config({debug:true,//開啟調(diào)試模式，客戶端會(huì)顯示完整的調(diào)試日志appId:"123456",//頁面的唯一標(biāo)識(shí)digest:"",//頁面hashcodetimestamp:"1617189094"，//簽名的時(shí)間戳signature:"",//應(yīng)用簽名字符串a(chǎn)piList:["showToast"，"share"]//頁面需用到的相關(guān)jssdk接口});2）通用回調(diào)接口接口回調(diào)采用異步方式，當(dāng)需要調(diào)用完native函數(shù)后，對(duì)頁面進(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等使用方式同suc⁃cess。其中fail定義為接口調(diào)用失敗情況，complete定義為執(zhí)行結(jié)束情況，cancel定義為調(diào)用取消的情況。3）用戶接口用戶接口包括獲取用戶登錄態(tài)，獲取用戶信息和跳轉(zhuǎn)登錄注冊(cè)等接口。頁面可以通過用戶登錄態(tài)接口獲取登錄態(tài)信息，這可避免在客戶端登錄的情況下，要求用戶在頁面進(jìn)行二次登錄問題。如果客戶端沒有登錄，則可以直接在頁面跳轉(zhuǎn)到客戶端登錄頁面，從而使用戶的體驗(yàn)變流暢。具體獲取登錄接口態(tài)如下checkLogin({success:function(res){varisLogin=res.isLogin//是否登錄}});res為本地代碼回調(diào)參數(shù)。內(nèi)容包括是否登錄、登錄用戶昵稱、性別、圖形等必要的用戶信息。跳轉(zhuǎn)登錄接口與獲取用戶信息類似，如果需要處理錯(cuò)誤，則加上fail回調(diào)即可。4）基礎(chǔ)接口基礎(chǔ)接口包括獲取版本信息、獲取客戶端信息、判斷接口可用和配置擴(kuò)展等。頁面端可以根據(jù)版本和客戶端信息設(shè)計(jì)不同業(yè)務(wù)流程。5）設(shè)備接口設(shè)備接口包括分享接口、掃碼接口、獲取設(shè)備信息接口、獲取網(wǎng)絡(luò)信息接口、振動(dòng)與地理位置接口、上傳和下載圖片接口。這些接口包基本涵蓋H5活動(dòng)需要接口，使H5頁面能夠?qū)崿F(xiàn)大部分原生應(yīng)用能夠?qū)崿F(xiàn)的場(chǎng)景。6）界面接口界面接口包含關(guān)閉界面接口、顯示和隱藏菜單接口、顯示隱藏標(biāo)題欄接口。這些接口使H5頁面能夠無感知地嵌入到客戶端頁面中。

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

廣告容易被植入惡意代碼[5]，因此JSSDK安全至關(guān)重要?？蛻舳送ㄟ^域名、appId和簽名來識(shí)別接口調(diào)用合法性。如果用戶的域名沒有注冊(cè)，或者appId與簽名沒有通過客戶端安全效驗(yàn)，則H5頁面無法調(diào)用本地接口。另外，H5調(diào)用JSSDK接口前，必須用全局對(duì)象調(diào)用config接口后才能調(diào)用接口列表中的接口。3.4JSSDK的版本兼容與接口擴(kuò)展JSSDK版本需向后兼容。JSSDK通過config接口新增擴(kuò)展接口名。native根據(jù)接口規(guī)范，很容易通過原有JsBridge橋通訊協(xié)議實(shí)現(xiàn)擴(kuò)展接口，中間JSSDK與JsBridge無需修改。

4JsBridge

JsBridge是連接原生層和JavaScript的橋梁，是實(shí)現(xiàn)整個(gè)應(yīng)用框架的基礎(chǔ)部分，它包含native與JS兩個(gè)方向調(diào)用。JS調(diào)用native一般有四種通信方案：第一，在webview中對(duì)頁面請(qǐng)求進(jìn)行攔截，執(zhí)行按特定規(guī)則映射的native函數(shù)。第二，對(duì)webview的彈窗進(jìn)行攔截，將彈窗參數(shù)按特定規(guī)則映射的na⁃tive函數(shù)。第三，通過調(diào)用webview提供的函數(shù)進(jìn)行上下文注入，如蘋果scriptMessageHandler函數(shù)、安卓addJavascriptInter⁃face函數(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)用即可。這樣可以方便客戶端開發(fā)者基于公司的技術(shù)棧去選擇其中一種或者多種技術(shù)方案進(jìn)行實(shí)現(xiàn)。native調(diào)用JS一般兩種方式：第一，通過evaluatingJavaS⁃cript方法直接注入執(zhí)行JS代碼；第二，通過loadUrl(‘javas⁃cript:’+JS)代碼做跳轉(zhuǎn)地址。

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

JsBridge要按照J(rèn)SSDK定義的接口規(guī)范實(shí)現(xiàn)所有的接口，避免不同平臺(tái)調(diào)用結(jié)果不一致問題。但可以選擇使用任何一種JS調(diào)用native方式和任何一種native調(diào)用js方式，無論開發(fā)者面對(duì)的是否為同一應(yīng)用或者同一平臺(tái)。但一般來說都會(huì)進(jìn)過下面的流程。1）JS調(diào)用native一般流程：第一步：定義JS函數(shù)與native函數(shù)映射規(guī)則。第二步：在入口處置入映射判斷邏輯，如果調(diào)用過程符合攔截規(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給頁面注入通用回調(diào)函數(shù)callJS(Jsonjson)。該步驟無需前端額外實(shí)現(xiàn)，在開發(fā)H5頁面時(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)

第一，通過JSSDK與JsBridge將抽象接口層與實(shí)現(xiàn)層分離，使得相同的接口在不同的客戶端能穩(wěn)定使用，H5能保持不變。充分發(fā)揮H5快速開發(fā)特點(diǎn)，同時(shí)保證不同端的體驗(yàn)一致性。第二，JsBridge提供統(tǒng)一跨進(jìn)程通訊協(xié)議，使客戶端只需要對(duì)自己的平臺(tái)進(jìn)行實(shí)現(xiàn)，無需處理中間調(diào)用邏輯。

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

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

5.3安全性

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

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

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

6結(jié)束語

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

作者:張夢(mèng)元 單位:廣州白云學(xué)院大數(shù)據(jù)與計(jì)算機(jī)學(xué)院