MUI多端發佈開發指南(終於把MUI的使用場景說清楚了)

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判斷等技術。