h5+MUI移動(dòng)APP和普通H5之間的區(qū)別有哪些？

通過(guò) HTML5 開(kāi)發(fā)移動(dòng) App 時(shí)，會(huì)發(fā)現(xiàn) HTML5 很多能力不具備。為彌補(bǔ) HTML5 能力 的不足，在 W3C 中國(guó)的指導(dǎo)下成立了?www.HTML5Plus.org組織，推出 HTML5+規(guī)范。

HTML5+擴(kuò)展了?JavaScript?對(duì)象 plus，使得 js 可以調(diào)用各種瀏覽器無(wú)法實(shí)現(xiàn)或?qū)崿F(xiàn)不佳的系統(tǒng)能力，設(shè)備能力如攝像頭、陀螺儀、文件系統(tǒng)等，業(yè)務(wù)能力如上傳下載、二維碼、地圖、支付、語(yǔ)音輸入、消息推送等。

HBuilder 的手機(jī)原生能力調(diào)用分 2 個(gè)層面：

a)? ?跨手機(jī)平臺(tái)的能力調(diào)用都在 HTML5+?規(guī)范里，比如二維碼、語(yǔ)音輸入，使用

plus.barcode 和?plus.speech。編寫(xiě)一次，可跨平臺(tái)運(yùn)行。

b)? ?JS Bridge是另一項(xiàng)創(chuàng)新技術(shù)，通過(guò) js 可以直接調(diào)?iOS?和?Android?的原生 API，這部 分就不再跨平臺(tái)，比如調(diào) ios game center，或在 android 手機(jī)桌面創(chuàng)建快捷方式。 JSB 的用法是，var obj= plus.android.import("android.content.Intent");，將一個(gè)原生對(duì) 象 android.content.Intent 映射為 js 對(duì)象 obj，然后在 js 里操作 obj對(duì)象的方法屬性就可以了。

?

使用 HTML5+開(kāi)發(fā)的移動(dòng) App 并非 mobileweb 頁(yè)面。這是新手最容易混淆的地方。 mobileweb 的文件存放在 web 服務(wù)器上，而移動(dòng) App 的文件存放在手機(jī)本地，編寫(xiě)移動(dòng) App 的 html、js、css文件被打包到 ipa 或 apk 等原生安裝包，在手機(jī)客戶(hù)端運(yùn)行。

當(dāng)然這些移動(dòng) App 里某些頁(yè)面也可以繼續(xù)從服務(wù)器端以網(wǎng)頁(yè)方式下行。

所以 mobile web，在 HBuilder 里新建項(xiàng)目時(shí)，屬于 web 項(xiàng)目。不要放置到移動(dòng) App 項(xiàng) 目下。mobile web 項(xiàng)目也不能真機(jī)聯(lián)調(diào)和打包。

舉幾個(gè)例子。

例 1：一個(gè) mobile web 項(xiàng)目，想打包成移動(dòng) App。

a)? ?在?HBuilder 里新建一個(gè)?web 項(xiàng)目，把?mobile web 代碼放進(jìn)去。

b)? ?在?HBuilder 里新建移動(dòng)?App

c)? ?在新建的移動(dòng) App 下找到 manifest.json，將其中的入口頁(yè)面配置為 mobileweb 的網(wǎng) 絡(luò)地址。

d)? ?然后點(diǎn)發(fā)行打包，就得到一個(gè)移動(dòng) App 的安裝包。除了可發(fā)行到 Appstore 和桌面 有個(gè)快捷方式外，與瀏覽器的體驗(yàn)不會(huì)有其他區(qū)別。

e)? ?另外其實(shí) mobile web 的代碼，也可以判斷自己運(yùn)行的環(huán)境，如果 UA 里包含 “Html5Plus”，也可以寫(xiě) plus 對(duì)象來(lái)調(diào)用原生能力。

===========以上內(nèi)容來(lái)自：來(lái)源

以下是我個(gè)人問(wèn)題。本人對(duì)手機(jī)應(yīng)用的概念不是特別熟悉，所以產(chǎn)生了以下的一些疑問(wèn)

1，h5+的plus對(duì)象使得JS可以調(diào)用原生接口，那么以webview形式存在的頁(yè)面和普通H5頁(yè)面之間的區(qū)別有哪些？

H5頁(yè)面之間都是通過(guò)訪問(wèn)的形式來(lái)進(jìn)行跳轉(zhuǎn)的。

而webview則更類(lèi)似于 場(chǎng)景轉(zhuǎn)換，那么實(shí)際上 H5+是以什么形式訪問(wèn)不同頁(yè)面的。

正如上面內(nèi)容所說(shuō)，移動(dòng)APP并非mobile Web ，他的頁(yè)面都是在本地的。是否說(shuō)明，在打開(kāi)APP的時(shí)候。所有頁(yè)面已經(jīng)“準(zhǔn)備好了”，

答：移動(dòng)APP將所有頁(yè)面打包，所以用戶(hù)加載頁(yè)面會(huì)比mobile WEB快，頁(yè)面無(wú)需從服務(wù)器加載，只需要加載數(shù)據(jù)的時(shí)候才會(huì)和服務(wù)器交互，或者訪問(wèn)在服務(wù)器上的web時(shí)需要加載。所以移動(dòng)APP比那些以應(yīng)用框架為外表的H5應(yīng)用（混合APP）要好。

那么，如果用H5+MUI不打包成APP，在手機(jī)瀏覽器中運(yùn)用是否也可以調(diào)用plus對(duì)象從而調(diào)用原生的接口？

答：

為解決HTML5在低端Android機(jī)上的性能缺陷，mui引入了原生加速，其中最關(guān)鍵的就是webview控件，因此mui若要發(fā)揮其全部能力，需和5+?App配合適用，若脫離5+?App，mui功能會(huì)受限，主要涉及三個(gè)部分：
一、webview窗口相關(guān)
涉及webview的，除了5+App，其它所有手機(jī)瀏覽器及PC瀏覽器均無(wú)法使用，涉及功能點(diǎn)包括：
webview模式窗體動(dòng)畫(huà)

創(chuàng)建子窗口（除了為解決區(qū)域滾動(dòng)的常見(jiàn)雙webview場(chǎng)景，還涉及webview模式的選項(xiàng)卡等多webview場(chǎng)景）

webview模式的側(cè)滑菜單（也有div方式側(cè)滑菜單）

webview模式的tab選項(xiàng)卡（也有div方式選項(xiàng)卡）

nativeUI，如原生的警告框、確認(rèn)框、popover、actionsheet、toast。這些也有HTML5的實(shí)現(xiàn)。

預(yù)加載

自定義事件

二、第三方擴(kuò)展插件
涉及webview的，除了5+App，其它所有手機(jī)瀏覽器及PC瀏覽器均無(wú)法使用，目前主要包括：語(yǔ)音輸入；
三、Touch事件相關(guān)（注意pc瀏覽器沒(méi)有touch事件）
Touch事件相關(guān)的，手機(jī)端瀏覽器均可使用、pc端chrome模擬手機(jī)瀏覽器也可以正常使用。
但普通PC端瀏覽器因?yàn)闆](méi)有touch事件，可以顯示控件但滑動(dòng)操作功能會(huì)受限；涉及功能點(diǎn)包括：
手勢(shì)事件

mui封裝的tap相關(guān)處理業(yè)務(wù)：折疊面板、二級(jí)列表、二級(jí)選項(xiàng)卡；

mui封裝的swipe、drag相關(guān)處理業(yè)務(wù)：圖片輪播、可左右滑動(dòng)的圖文表格、可左右滑動(dòng)的9宮格、滑動(dòng)觸發(fā)列表項(xiàng)菜單、可拖動(dòng)式側(cè)滑菜單、下拉刷新和上拉加載、可拖動(dòng)式選項(xiàng)卡

【備注】：在PC端，大家將tap替換成click，將HTML5默認(rèn)的Drag事件替換mui?的swipe和drag，就可以解決如上兩個(gè)問(wèn)題。

而MUI.init();是否就是“準(zhǔn)備”的關(guān)鍵。

如果沒(méi)有使用init初始化,會(huì)怎樣？

答：init并非是移動(dòng)APP訪問(wèn)某頁(yè)面的必備條件，它只是作為調(diào)用該頁(yè)面某些需要提前準(zhǔn)備的功能的函數(shù)。

webview又是什么概念？它是指移動(dòng)APP里面的所有頁(yè)面都屬于webview還是通過(guò)創(chuàng)建子頁(yè)面或者打開(kāi)子頁(yè)面才會(huì)產(chǎn)生webview對(duì)象?

解決:所有的頁(yè)面都屬于webview,可以通過(guò)

mui.plusReady(function(){ ? ? ?? ? ?
? ? var ?w = plus.webview.currentWebview().getURL();
? ? console.log(w); ? ?
});

獲取當(dāng)前webview的信息

這些關(guān)于plus的操作需要在plusReady里面實(shí)現(xiàn)。