2019獨角獸企業重金招聘Python工程師標準>>>

MUI官方給的文檔很分散，不系統。遇到問題解決找文檔浪費了很多時間，終于弄清楚了，MUI的使用場景和處理方式。

?

?

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

?

多端發布開發指南

多端發布

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

運行環境識別

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

UI部分的多端發布

mui在所有ui組件上都提供純HTML實現方案，在HTML效果不佳的ui組件上補充了5+的原生強化。 mui的窗體切換、父子頁面、長列表滾動、下拉刷新、彈出框、ajax，這些功能在5+App環境下可以調用原生api實現增強體驗，但在非5+環境下也可以按照普通HTML的做法跑通業務。

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

能力方面的多端發布：plusto互轉

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

條件編譯，加強項目管理，提升執行性能

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

轉載于:https://my.oschina.net/u/2338463/blog/1439012

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。