2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

MUI官方給的文檔很分散，不系統(tǒng)。遇到問題解決找文檔浪費(fèi)了很多時(shí)間，終于弄清楚了，MUI的使用場(chǎng)景和處理方式。

?

?

http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/591

?

多端發(fā)布開發(fā)指南

多端發(fā)布

一套代碼，實(shí)現(xiàn)wap、微信公眾號(hào)、iOS和Android的App以及流應(yīng)用，并且保證在App平臺(tái)上有更好的體驗(yàn)，這對(duì)于提升開發(fā)效率有巨大的幫助。
實(shí)現(xiàn)多端發(fā)布，需要處理平臺(tái)差異，尤其是HTML5+規(guī)范擴(kuò)展的瀏覽器并不支持的API，需要兼容降級(jí)或動(dòng)態(tài)去除方案。
本文詳細(xì)講述了mui的多端發(fā)布功能，能做什么，不能做什么，能做的怎么做。

運(yùn)行環(huán)境識(shí)別

多端發(fā)布首先需要識(shí)別在不同的運(yùn)行環(huán)境，有幾種判斷環(huán)境的方式。
1. UA
5+app環(huán)境下，ua是包含html5plus字符串的，流應(yīng)用環(huán)境下還會(huì)再包含streamapp字符串。
2. plus對(duì)象是否存在
可以在js里判斷plus對(duì)象是否存在，但需要注意一種情況，如果你的js代碼里恰好還定義了一個(gè)名為plus的js對(duì)象，則這種方法將無法準(zhǔn)確判斷運(yùn)行環(huán)境。
所以一般推薦采取UA判斷的方式處理。

UI部分的多端發(fā)布

mui在所有ui組件上都提供純HTML實(shí)現(xiàn)方案，在HTML效果不佳的ui組件上補(bǔ)充了5+的原生強(qiáng)化。 mui的窗體切換、父子頁(yè)面、長(zhǎng)列表滾動(dòng)、下拉刷新、彈出框、ajax，這些功能在5+App環(huán)境下可以調(diào)用原生api實(shí)現(xiàn)增強(qiáng)體驗(yàn)，但在非5+環(huán)境下也可以按照普通HTML的做法跑通業(yè)務(wù)。

1. 窗體切換
mui.openWindow在5+下執(zhí)行的動(dòng)畫是plus.webview的原生動(dòng)畫，擁有更高的性能。而在非5+環(huán)境下執(zhí)行的是普通網(wǎng)頁(yè)跳轉(zhuǎn)。
mui雖然有SPA單頁(yè)方案，但mui.openWindow并不會(huì)在非5+環(huán)境下降級(jí)為SPA的div窗體切換。
如果使用spa固然可以一套代碼多處使用，但無法在5+環(huán)境下自動(dòng)升級(jí)為原生view切換動(dòng)畫。
官方的推薦是常規(guī)頁(yè)面使用mui.openWindow，只有部分很小的頁(yè)面使用spa實(shí)現(xiàn)，比如設(shè)置界面，即原則是div渲染也不會(huì)有太大壓力的場(chǎng)景才使用spa。
不了解mui的spa方案的，可以看Hello mui示例的setting模板里，需要單獨(dú)引入mui.view.js。
2. 父子頁(yè)面和長(zhǎng)列表滾動(dòng)
長(zhǎng)div滾動(dòng)在Android4.4以下很卡。為解決標(biāo)題固定頂部，下面內(nèi)容區(qū)超長(zhǎng)時(shí)也可以滾動(dòng)流暢，5+引入了雙webview的父子頁(yè)面結(jié)構(gòu)，通過webview的body滾動(dòng)來替代div滾動(dòng)，以達(dá)到原生體驗(yàn)。
mui的subpages在5+環(huán)境下是雙webview，而在非5+環(huán)境下會(huì)自動(dòng)切為iframe。
mui雖然也提供了div滾動(dòng)控件，但適用于局部滾動(dòng)，比如popover、picker等，subpages并不能在非5+下自動(dòng)切為div。
3. 下拉刷新
基于div的下拉刷新在Android4.4以下也不流暢，5+擴(kuò)展了原生的下拉刷新控件。
mui的下拉刷新，在android的5+ App環(huán)境下會(huì)調(diào)用5+擴(kuò)展的雙webview下拉刷新，而在ios?的5+環(huán)境和非5+環(huán)境下，則會(huì)調(diào)用基于div的下拉刷新。
4. 彈出框
mui.alert，mui.confirm，mui.prompt，mui.toast，這些彈出框都是在5+環(huán)境下調(diào)用nativeUI，而在非5+環(huán)境下調(diào)用div模擬的框。
actionsheet控件在Hello mui里提供了原生和div兩種方式，目前這兩種方式并不能自動(dòng)切換。
popover沒有原生方式，只有div方式，不存在跨端障礙。
5. 側(cè)滑菜單
mui提供了原生和div兩種側(cè)滑菜單。
目前使用了原生側(cè)滑菜單后并不能在非5+環(huán)境下自動(dòng)切換為div模式。
推薦的做法是把側(cè)滑菜單做簡(jiǎn)單做小，直接使用div方式的側(cè)滑菜單。
6. tab選項(xiàng)卡
mui并沒有獨(dú)立的選項(xiàng)卡控件，而是在Hello mui示例里做了基于原生和div兩個(gè)不同的選項(xiàng)卡代碼示例。
目前使用了原生側(cè)滑選項(xiàng)卡后并不能在非5+環(huán)境下自動(dòng)切換為div模式。
從性能角度而言，div選項(xiàng)卡很難承載太多內(nèi)容，實(shí)際使用量也偏少。所以開發(fā)者使用了webview的選項(xiàng)卡后，為了實(shí)現(xiàn)多端發(fā)布，需要在tab的點(diǎn)擊事件做判斷處理，發(fā)現(xiàn)是非5+環(huán)境，建議把webview切換改為網(wǎng)頁(yè)跳轉(zhuǎn)。
7. ajax
mui.ajax在5+下為跨域而使用了5+的plus.NET的api，而在非5+環(huán)境下會(huì)自動(dòng)切換為普通的ajax。
8. 語音輸入控件
Hello mui的input里有語音輸入控件，在HBuilder里敲mspeech回車也給直接生成該控件。在非5+環(huán)境下，該控件的麥克風(fēng)圖標(biāo)不會(huì)顯示出來，變成普通的輸入框。

能力方面的多端發(fā)布：plusto互轉(zhuǎn)

除了ui相關(guān)，5+還擴(kuò)展了大量的JS API，這些API有的在手機(jī)瀏覽器或微信瀏覽器里有類似功能，有的沒有。
處理這方面的問題無非兩種思路，裁掉或兼容降級(jí)。
1. 對(duì)于非5+環(huán)境不存在的功能：
調(diào)5+的api前判斷下是不是在5+的ua環(huán)境下。不是5+環(huán)境則不執(zhí)行plus代碼。
2. 對(duì)于可降級(jí)的功能：
定位、拍照、錄音、相冊(cè)功能其實(shí)html5規(guī)范里也有，只是因?yàn)轶w驗(yàn)不佳所以5+進(jìn)行了擴(kuò)展。
處理這類問題又有2種思路：
2.1 開發(fā)者可以在不同的運(yùn)行環(huán)境下引入不同的js，實(shí)現(xiàn)這些業(yè)務(wù)邏輯。比如在瀏覽器下引入h5camera.js，而在5+下引入pluscamera.js。
2.2 也可以通過重定義js的方式實(shí)現(xiàn)標(biāo)準(zhǔn)化替換。
DCloud建立了一個(gè)開源項(xiàng)目plusto，https://github.com/dcloudio/plusto，這個(gè)提供了一個(gè)定位轉(zhuǎn)換的例子。
Html5寫的定位代碼，載入示例的js后，該js會(huì)自動(dòng)判斷當(dāng)前的運(yùn)行環(huán)境，發(fā)現(xiàn)在5+環(huán)境下會(huì)重定義HTML5標(biāo)準(zhǔn)的定位對(duì)象，改成plus.geolocation對(duì)象。
重定義也有2種做法，一種是使用HTML5的方式寫，引入js重定義為plus。一種是使用plus寫，然后引入js重新為普通瀏覽器或微信對(duì)象。
重定義的執(zhí)行性能低于分條件判斷。
plus.to的開源庫(kù)還不完整，也歡迎網(wǎng)友積極貢獻(xiàn)，提供更多plus、瀏覽器、微信的互轉(zhuǎn)庫(kù)文件。

條件編譯，加強(qiáng)項(xiàng)目管理，提升執(zhí)行性能

涉及5+App的js文件，可以獨(dú)立為單獨(dú)js，通過條件編譯工具在打包時(shí)動(dòng)態(tài)引入。
條件編譯比運(yùn)行期動(dòng)態(tài)判斷的效率要高，推薦開發(fā)者使用。
glup、grunt都是業(yè)內(nèi)成熟的前端構(gòu)建工具，相關(guān)教程本文不介紹，請(qǐng)自行搜索。
DCloud的mui及Hello mui示例是使用grunt構(gòu)建的，grunt相關(guān)配置也都開源在https://github.com/dcloudio/mui
Hello mui作為一個(gè)Android、iOS、瀏覽器里都能使用的多端發(fā)布示例，其中同時(shí)涉及條件編譯、動(dòng)態(tài)UA判斷等技術(shù)。

轉(zhuǎn)載于:https://my.oschina.net/u/2338463/blog/1439012

總結(jié)

以上是生活随笔為你收集整理的MUI多端发布开发指南(终于把MUI的使用场景说清楚了)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。