dcloud mui開發app前言
大一那會就聽說html5快要發布了，前景無量，厲害到能寫操作系統==|||（什么？？？蛤？）
似乎html5標准還沒正式發布那會，使用hybrid模式開發app已經起步，阿里就是國內這一領域的布道者。（你看看淘寶，支付寶，一處開發，處處運行，多卡，呸，多叼啊）
如今w3c聯盟發布html5已經三個年頭了。我才剛剛開始涉足，真是慚愧，馬上要考研了，最近一個外包項目拖緩了我學習高數的腳步，該項目我完全使用了基於dcloud html5+的混合式開發app技術（考完研我會對項目構建寫一些隨筆，里面用到了大量html5+的API，包括map，audio，payment，share，等等等利用率很高，可以做個example），做了這么久，終於有空總結一下這一路的坑坑窪窪。
dcloud的產品線比較紛雜，大家可以去官網看看：http://www.dcloud.io/
主要包括了mui，hbuilder，5+sdk，native.js，html5+規范，近期還推出了一個流應用。
其中html5+是類似並基於w3c html5的一套規范，目前由html5+中國產業聯盟負責定制撰寫文檔
官網：http://www.html5plus.org/doc/h5p.html
mui是dcloud開發的一個十分精簡的前端框架，核心包含了mui.css，mui.js，基本就類似於bootstrap這樣的前端框架，如果是用來開發web，wap等項目的話似乎有點過於精簡而潰乏，但是對於app來說，里面的布局和js功能已經夠用了，當然光是前端框架也沒什么卵用咯，只能使用html5的功能罷了，這就和單純的jquery mobile差不多了，筆者兩年前，html5剛發布那會，就是使用jquery mobile+phonegap的方式開發app的，可以說功能比較糟糕，使用體驗，性能都很勉強。如今在facebook react native技術的引領下映射原生類庫和方法已經成為主流，這就是所謂的hybrid混合開發的最好應用吧
hbuilder：IDE開發工具，個人覺得名不虛傳，國內最好的html5app集成開發環境，我做ios開發的朋友看到都驚嘆的說：哇，你這個居然可以直接連iphone？還是windows電腦？？？你這還能直接配置地圖sdk？？你這個怎么還有支付接口？？？還有你這個消息推送？？？。。。
講真要是dlcoud能做個linux平台的出來，我就不要切換到windows寫了。強烈建議！
5+sdk，實現打包和手機系統（an，ios）的對接
native.js，將js映射為java，oc等類庫方法
話不多說，來看看在進入dcloud mui一些要點：
webview第一
窗口，這是做mui開發app的核心要素，重中之重，一定要好好看文檔，我之前寫過一篇《mui開發app之什么是webview》的文章，閱讀量還算可人，這是快一年前的文章了，由於當時也是剛接觸mui，里面有很多疏漏，填填補補，現在已經不在去更新了
webview其實就相當於android原生開發中的activity，當然android是將layout（布局）和activity（活動）分離開發的，而webview像是一個瀏覽器，底層使用了一些android，ios原生的功能，其中比如跳轉動畫，webview最大的特點是充分利用了js對dom的操作，將activity和layout統一在了一起，使之更加簡單了，個人建議沒必要像瀏覽器那樣把js，css單獨放文件（外聯），這在web開發中是頗受推崇的，但是app並不會考慮多瀏覽器的支持（因為無論ios，android都被apple的safari旗下的webkit內核壟斷着），如果你將js和css分離出去頂多也只是一個文件（web分離兩大原因，其一是因為web是要下載html，js，css資源的，是B/S模式，這樣可能使用分布式存放資源，你所看到的資源會來自不同服務器，減輕每一個獨立服務器的壓力，這是非常好的做法，所以web老手看到你寫內聯尤其是style屬性會對你的代碼嗤之以鼻；其二是因為不同瀏覽器內核對html，尤其是版本4的支持亂七八糟，導致前端小組需要分配不同瀏覽器不同的js，css，早些年是這樣的，隨着前端技術的提高，瀏覽器的統一化，框架的繁衍，如今就算是web開發，可能也很少有開發者會考慮為不同瀏覽器拽寫css，js的不同版本了吧，不過app就更沒有這個必要了。所以你的關注點是要放在手機系統，屏幕像素等問題上來。
關於webview需要知道以下幾點：
1、使用一套自己規定的統一的id編號，個人使用的是“目錄/文件名去掉后綴”的形式，保證不會出現沖突。學會通過getWebviewById好好操作這些webview，靈活調動各個頁面
2、不要過度依賴mui封裝的openWindow和openWindowwithtitle，這兩個方法雖然很方便，但是封裝性太強，當你要對窗口進行各種騷操作的時候，建議使用plus.webview.create方法來獲取webviewObj，然后使用他的方法，比如，show()，hide()，close()，clear()，其中注意，只有close會銷毀當前webview！
3、層疊問題，新打開的webview默認會遮擋老打開的webview，比如openWindow，打開以后覆蓋原來的頁面，原來的頁面並不會關閉！不會銷毀！注意，這點很重要，一定要記住openWindow打開的頁面是一層一層覆蓋的，下面的窗口依然存在，尤其是android系統上，這像activity，又像是數據結構的棧道，先進后出層層堆疊。邏輯理清很重要，因為再使用地圖的時候，筆者遇到一個不知道能不能算bug的bug，在android端，dcloud的plus.mas.Map對象只能共用一個，當你在第一個頁面new了一個mapObj，然后從這頁面使用openWindow打開另一個頁面的時候，你再在這個新的webview里new一個map對象你會發現這個新的map對象和上一個map似乎很像，沒錯我研究了一下這TM就是同一個個啊，連我標記的icon都還在，地圖位置也在原來地點，根本沒有new出新的map對象嘛，這或許是一個bug吧，我在dcloud社區問了，似乎也沒能得到一個回復，因為這可能和android的機制有關，前面的webview沒有關閉，所以map插件沒有銷毀，所以當然新頁面還會沿用，關鍵是沿用也就算了，還不能拖動仿佛被罩住了一樣，這個問題我會另外寫一篇博客來說明我后來的解決方案（多地圖問題）
關於層疊，還有show()會把一個已經創建（存在）的webview提到最前面，棧頂。
hide()將會隱藏起來，倒也不是往下一個位置放（保留狀態，消失在視野當中）
zindex屬性（WebviewStyles），也是可以改變webview層疊效果的屬性，類似於css的z-index，數值越大，層級越往上，個人建議不要亂用，會出現頁面錯亂的問題（如果你設計的UI跳轉邏輯並不太好）
4、巧用子頁，子頁也是一個webViewObj，和父頁面一樣，每個webviewObj（使用plus.webview.create創建）對象，都存在append方法，為自己添加一個子頁面，但要規定好子頁面大小（style），防止層疊產生的遮罩問題，與直接show()出來的webview 不同，直接show()亦可創建一個“偽子頁”這個子頁面有自己獨立的back監聽等等，說他偽，是因為他完全獨立於外邊的父頁面，這其實就是上面說的層疊造成的假象，他是獨立的頁面，在設計高度寬度合適的情況下，看似也像是子頁，但按下返回會關閉當前這“偽子頁”。建議使用append，這樣父頁面的銷毀會帶着子頁面，但子頁面又可以單獨銷毀，這可以解決上述的地圖map插件共用問題！
5、銷毀webview，webviewObj帶有clear，close兩個方法，官方說法：
clear
清空原生Webview窗口加載的內容
void wobj.clear();
說明：
清除原生窗口的內容，用於重置原生窗口加載的內容，清除其加載的歷史記錄等內容。
參數：
無
返回值：
void : 無
測試了一下，clear只是會重置整個頁面內容，類似於web中刷新當前頁面，並不會銷毀頁面，通過getWebViewById依然可以找到他
plus.webview.close則可以完全關閉一個頁面
最后關於webview，乃至整個使用dcloud mui開發app，我想說，千萬不要用原來web開發的思想去理解，需要轉變，需要了解一些原生的特性。
注意，這點很重要，一定要記住openWindow打開的頁面是一層一層覆蓋的，下面的窗口依然存在。