建站
咨詢
售后
建站咨詢
新聞中心
H5必知必會(huì)之與App交互
奇技指南
成都創(chuàng)新互聯(lián)主營蓮湖網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),蓮湖h5小程序開發(fā)搭建,蓮湖網(wǎng)站營銷推廣歡迎蓮湖等地區(qū)企業(yè)咨詢
2018年11月26日發(fā)表的“360 AI音箱H5開發(fā)實(shí)踐”一文中，曾簡(jiǎn)單提到“與Native交互”。本文將就此主題深入探討H5與App交互的幾種常見模式。
本文內(nèi)容如下：
H5，在中國被專門用來指代開發(fā)內(nèi)嵌于手機(jī)應(yīng)用中的網(wǎng)頁的技術(shù)，外國好像并沒有這個(gè)說法。從技術(shù)上講，H5是HTML5即Hyper Text Markup Language（超文本標(biāo)記語言）第5版的簡(jiǎn)稱。而HTML只是開發(fā)網(wǎng)頁要用到的多種技術(shù)之一。除了HTML，還要用CSS設(shè)計(jì)界面，用JavaScript實(shí)現(xiàn)交互，甚至要用Node.js實(shí)現(xiàn)服務(wù)端邏輯。為什么H5會(huì)被用來籠統(tǒng)地指代這些技術(shù)呢？我猜一是因?yàn)樗?jiǎn)單，二是移動(dòng)端網(wǎng)頁開發(fā)技術(shù)又恰好需要這么一個(gè)概念。
移動(dòng)端網(wǎng)頁運(yùn)行在手機(jī)應(yīng)用內(nèi)嵌的瀏覽器引擎中，這個(gè)沒有UI的內(nèi)核容器統(tǒng)稱WebView，即iPhone的UIWebView（iOS 2.0–12.0）、WKWebView（iOS 8.0+，macOS 10.10+）和Android的WebView。總之，WebView就是在手機(jī)應(yīng)用中運(yùn)行和展示網(wǎng)頁的界面和接口（神奇的是，英文Interface，既可以翻譯成“界面”也可以翻譯成“接口”）。
H5與原生應(yīng)用的交互都是通過原生應(yīng)用中的WebView實(shí)現(xiàn)的。通過這個(gè)環(huán)境，H5可以調(diào)用原生應(yīng)用注入其中的原生對(duì)象的方法，原生應(yīng)用也可以調(diào)用H5暴露在這個(gè)環(huán)境中的JavaScript對(duì)象的方法，從而實(shí)現(xiàn)指令與數(shù)據(jù)的傳輸。
比如，在Android應(yīng)用中，WebView類有一個(gè)公有方法addJavascriptInterface，簽名為：
調(diào)用這個(gè)方法可以向WebView中以指定的名稱name注入指定的Java對(duì)象object。這樣，WebView中的JavaScript就可以通過name調(diào)用object的方法。比如：
在iOS或macOS中，需要通過創(chuàng)建WKWebView類的實(shí)例在應(yīng)用中嵌入網(wǎng)頁，交互過程類似。
所謂基礎(chǔ)接口，就是首先要規(guī)定原生應(yīng)用和JS分別在WebView里注入/暴露一個(gè)什么對(duì)象：
并約定在這兩個(gè)對(duì)象上分別可以調(diào)用什么方法：
顧名思義，NativeBridge.callNative是由JS調(diào)用向Native傳遞指令或數(shù)據(jù)的方法，而JSBridge.callJS則是由Native調(diào)用向JS傳遞指令或數(shù)據(jù)的方法。方法簽名中的參數(shù)含義如下：
基礎(chǔ)接口只有兩個(gè)對(duì)象和兩個(gè)方法，JS與App間的互操作則通過action和params來擴(kuò)展和定義。
對(duì)于JS而言，雖然這里只定義了一個(gè)對(duì)象一個(gè)方法，但實(shí)踐中，可以把a(bǔ)ction對(duì)應(yīng)方法的實(shí)現(xiàn)附加到JSBridge上，只要把callJS實(shí)現(xiàn)為一個(gè)分發(fā)方法即可，比如：
這樣，所有對(duì)callJS的調(diào)用，都會(huì)轉(zhuǎn)化成對(duì)JSBridge上相應(yīng)action方法的調(diào)用，優(yōu)點(diǎn)是只需一行代碼。
另一種實(shí)現(xiàn)方式是通過switch...case語句實(shí)現(xiàn)調(diào)用分發(fā)，比如:
這樣實(shí)現(xiàn)的優(yōu)點(diǎn)是所有方法一目了然，當(dāng)然同樣也是把所有相關(guān)接口都附加到同一個(gè)JSBridge對(duì)象上。
以上兩種實(shí)現(xiàn)模式各有利弊。
由JS發(fā)起的單向調(diào)用App的操作，主要涉及加載URL和切換到原生界面，可對(duì)應(yīng)如下action：
loadUrl調(diào)用的參考協(xié)議如下：
這里NativeBridge是App的原生對(duì)象，其callNative方法被調(diào)用時(shí)，會(huì)收到一個(gè)對(duì)象（字典/映射）參數(shù)。根據(jù)這個(gè)參數(shù)的action屬性的值，App可知需要執(zhí)行的操作是加載URL。于是再取得params屬性中的url，發(fā)送請(qǐng)求即可。
loadContent調(diào)用的參考協(xié)議如下：
同上，這里通過params向App傳遞了必要參數(shù)，App負(fù)責(zé)切換到相應(yīng)的原生界面。
由App發(fā)起的單向調(diào)用JS的操作，主要涉及用戶點(diǎn)擊后退按鈕（），可對(duì)應(yīng)如下action：
can_back調(diào)用的參考協(xié)議如下：
此調(diào)用返回的值示例如下：
顧名思義，can_back用于App詢問JS：在返回上一級(jí)界面前，是否彈窗提示用戶？
返回值中的can如果是true，則直接返回，不提示；如果是false，則彈出一個(gè)確認(rèn)框，請(qǐng)用戶確認(rèn)。另一個(gè)值target是與App約定的返回目標(biāo)，比如prev表示返回上一級(jí)，top表示返回頂級(jí)，等等。
雙向調(diào)用是JS先調(diào)用App，然后App在完成操作后再調(diào)用JS，雙向通常都需要傳遞數(shù)據(jù)。雙向調(diào)用主要涉及JS調(diào)用App原生組件和用戶點(diǎn)擊右上角按鈕，可對(duì)應(yīng)如下action：
loadComponent的參考協(xié)議如下：
在這個(gè)例子中，涉及JS調(diào)用App顯示其實(shí)現(xiàn)的城市選擇組件：type: 'location'，用戶選擇完城市之后，App再調(diào)用set_location，將用戶選擇的城市名稱傳給JS：
JS根據(jù)拿到的值更新界面，完成一次雙向調(diào)用。另一個(gè)例子是JS調(diào)用原生的日期選擇組件，與此類似。
為什么叫displayNextButton？因?yàn)楦鶕?jù)具體業(yè)務(wù)場(chǎng)景，可能存在如下三種情況：
displayNextButton協(xié)議的參考實(shí)現(xiàn)如下：
以上代碼示例表明，JS調(diào)用App，告訴App顯示“下一步”按鈕，但是要禁用變灰，因?yàn)閑nable: false。如果傳遞的是enable: true，那么用戶就可以點(diǎn)擊“下一步”按鈕了。點(diǎn)擊之后，App再調(diào)用JS的save_form。最后，如果不想顯示按鈕，可以傳遞name: ''。
下面重點(diǎn)說一下用戶點(diǎn)擊“下一步”按鈕，App調(diào)用save_form的場(chǎng)景。此時(shí)也分兩種情況：
如果是JS通過App保存數(shù)據(jù)——可能因?yàn)锳pp端實(shí)現(xiàn)了數(shù)據(jù)寫入必需的加密機(jī)制——那么，JS可以在App調(diào)用save_form時(shí)將約定好的數(shù)據(jù)返回給App，由App去保存數(shù)據(jù)。
如果是JS直接保存數(shù)據(jù)，比如通過Ajax，那么在保存完數(shù)據(jù)之后，則還需要調(diào)用前面所說的App暴露的loadUrl或loadComponent方法，以告知App切換界面。當(dāng)然這種情況下會(huì)出現(xiàn)第三次調(diào)用，但仍然屬于雙向調(diào)用。
本文介紹了JS與App交互的幾種模式，而且只討論了JS端的實(shí)現(xiàn)。在開發(fā)實(shí)踐中，團(tuán)隊(duì)各端總會(huì)面臨哪一端主導(dǎo)的問題。本文展示的參考實(shí)現(xiàn)就是H5端主導(dǎo)的一種實(shí)現(xiàn)形式。H5主導(dǎo)的特點(diǎn)是把主要業(yè)務(wù)邏輯都封裝到WebView中，App主要協(xié)同配合，而優(yōu)點(diǎn)是業(yè)務(wù)邏輯的變更不會(huì)蔓延到App。畢竟相對(duì)于H5，App的安裝部署模式會(huì)造成多版本共存問題，需要盡可能控制新版本。假如由App端主導(dǎo)，將邏輯封裝在App端，勢(shì)必造成版本不受控，給整個(gè)項(xiàng)目或產(chǎn)品埋下隱患。
當(dāng)然，事無絕對(duì)。具體情況還要具體分析。而且，哪方主導(dǎo)有時(shí)候也取決多方面因素。實(shí)踐中還是要因人、因時(shí)、因勢(shì)制宜。
html5做手機(jī)app和做手機(jī)網(wǎng)頁一樣嗎
不一樣，需增加自適應(yīng)標(biāo)簽來保持一樣。
代碼如下：
meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/
解釋：Viewport指用戶網(wǎng)頁的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴(kuò)展，頁面不可縮放。
擴(kuò)展資料：
HTML5的事件屬性和異常處理
事件屬性
HTML 5 元素可擁有事件屬性，這些屬性在瀏覽器中觸發(fā)行為，比如當(dāng)用戶單擊一個(gè)HTML 5元素時(shí)啟動(dòng)一段 JavaScript。下面列出的事件屬性，可以把它們插入 HTML 標(biāo)簽來定義事件行為。
HTML 5 中的新事件屬性：
onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。
移動(dòng)APP和HTML5的區(qū)別是什么
想了解他們之間的區(qū)別，先看一下各自的簡(jiǎn)單定義吧。
app:主要是指application（應(yīng)用程序）
HTML是hypertext markup language（超文本標(biāo)記語言）
主要區(qū)別有
1.應(yīng)用環(huán)境：
手機(jī)原生app面前比較流行環(huán)境是Android和IOS兩個(gè)版本。
HTML5主要是在瀏覽器中進(jìn)行運(yùn)行和渲染，其實(shí)瀏覽器是App的一種。
2.相關(guān)編程語言：
移動(dòng)APP的編程語言一般是：c#,Java, c,vb 等...
HTML5的編程語言則是：html5,css3,javascript,php/jsp/asp 等...
3.開發(fā)成本和周期：
移動(dòng)APP相對(duì)來說開發(fā)成本比較高，周期也比較長。html主要應(yīng)用于前端web開發(fā)，開發(fā)制作周期短，費(fèi)用少。
4.兼容性
手機(jī)app在不同的系統(tǒng)中需要開發(fā)不同版本（例如前面所說的Android和IOS），而html5可以跨平臺(tái)主要有瀏覽器就可以運(yùn)行。
5.用戶體驗(yàn)。執(zhí)行效率，顯示效果，可以調(diào)用的系統(tǒng)權(quán)限都是不一樣的。
在用戶體驗(yàn)和表現(xiàn)這個(gè)方面 APP提供用戶展示圖形界面和數(shù)據(jù)展現(xiàn)的豐富性方面要比HTML5好。而且調(diào)用的系統(tǒng)權(quán)限APP相對(duì)權(quán)限要高。
總結(jié)：html5和app各有自己優(yōu)勢(shì)和不足，需求者應(yīng)該根據(jù)各自的特點(diǎn)來選擇合適的語言。
HTML5和原生APP有什么不一樣
HTML5的APP，指的是使用HTML5技術(shù)實(shí)現(xiàn)的，功能與交互類似于APP的移動(dòng)端網(wǎng)站。
原生APP，指的是使用iOS或Android開發(fā)語言實(shí)現(xiàn)的APP（iOS開發(fā)語言為Object C、Android開發(fā)語言為Java）
使用HTML5技術(shù)與Object C / Java語言合并開發(fā)的應(yīng)用被稱為“Hybird APP”。
此外，2015年Facebook出品了可用于JavaScript開發(fā)的移動(dòng)端原生應(yīng)用 - React Native，React Native實(shí)現(xiàn)了對(duì)iOS和Android兩大平臺(tái)的支持。
HTML5技術(shù)目前并不廣泛應(yīng)用于APP的開發(fā)。
APP和HTML5有啥區(qū)別？
APP和HTML5有啥區(qū)別：
1.html5的app比較輕巧，原生態(tài)app如比較正規(guī)，html5實(shí)現(xiàn)的功能有限，只能實(shí)現(xiàn)一些輕型的交互場(chǎng)景，而app則可以完美解決。
2.html5雖然可以跨平臺(tái)，可是瀏覽器有個(gè)加載速度，對(duì)于用戶體驗(yàn)上說，有個(gè)加載的等待，就比如你用qq瀏覽器打開百度，和直接使用百度app是兩種體驗(yàn)。瀏覽器打開百度，還得有個(gè)加載，而百度app則duang的出下了輸入框界面。
3.html5的app對(duì)于導(dǎo)航來說，目前有個(gè)弊端。而原生態(tài)app則在頁底固定懸浮著導(dǎo)航菜單。
4.html5 app也有自己的優(yōu)勢(shì)，比如有的app頁面想要分享出來，則采用html5 app。也比如滴滴打車集成在微信里一樣，如果手機(jī)中沒有滴滴打車的app，則直接可以在默認(rèn)瀏覽器上加載出來，進(jìn)行打車。
html5 app在設(shè)計(jì)時(shí)需要注意的一些要點(diǎn)：
1）各手機(jī)瀏覽器的兼容測(cè)試
2）底層服務(wù)的調(diào)?。苷{(diào)取，但只有當(dāng)其是核心功能時(shí)才保留 eg：新浪、美團(tuán)等皆去掉了頭像上傳功能）
3）注意離線數(shù)據(jù)存儲(chǔ)，減少數(shù)據(jù)請(qǐng)求頻率。
4）考慮保存用戶的哪些數(shù)據(jù)：設(shè)置、個(gè)人數(shù)據(jù)、閱讀錨點(diǎn)、跳出頁面等?！具@點(diǎn)一般說的就是導(dǎo)航菜單】
5）避免動(dòng)效與瀏覽器的交互沖突
6）按順序 異步加載
文章題目：html5與app,HTML5和h5
本文URL：http://www.dlmjj.cn/article/dsgieoi.html
