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

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

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

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

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

plus.barcode 和?plus.speech。編寫一次，可跨平臺運行。

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

?

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

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

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

舉幾個例子。

例 1：一個 mobile web 項目，想打包成移動 App。

a)? ?在?HBuilder 里新建一個?web 項目，把?mobile web 代碼放進去。

b)? ?在?HBuilder 里新建移動?App

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

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

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

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

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

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

H5頁面之間都是通過訪問的形式來進行跳轉(zhuǎn)的。

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

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

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

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

答：

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

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

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

webview模式的tab選項卡（也有div方式選項卡）

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

預(yù)加載

自定義事件

二、第三方擴展插件
涉及webview的，除了5+App，其它所有手機瀏覽器及PC瀏覽器均無法使用，目前主要包括：語音輸入；
三、Touch事件相關(guān)（注意pc瀏覽器沒有touch事件）
Touch事件相關(guān)的，手機端瀏覽器均可使用、pc端chrome模擬手機瀏覽器也可以正常使用。
但普通PC端瀏覽器因為沒有touch事件，可以顯示控件但滑動操作功能會受限；涉及功能點包括：
手勢事件

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

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

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

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

如果沒有使用init初始化,會怎樣？

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

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

解決:所有的頁面都屬于webview,可以通過

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

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

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