mui開發app前言（一）

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須要知道如下幾點：

一、使用一套本身規定的統一的id編號，我的使用的是「目錄/文件名去掉後綴」的形式，保證不會出現衝突。學會經過getWebviewById好好操做這些webview，靈活調動各個頁面

二、不要過分依賴mui封裝的openWindow和openWindowwithtitle，這兩個方法雖然很方便，可是封裝性太強，當你要對窗口進行各類騷操做的時候，建議使用plus.webview.create方法來獲取webviewObj，而後使用他的方法，好比，show()，hide()，close()，clear()，其中注意，只有close會銷燬當前webview！

三、層疊問題，新打開的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跳轉邏輯並不太好）

四、巧用子頁，子頁也是一個webViewObj，和父頁面同樣，每一個webviewObj（使用plus.webview.create建立）對象，都存在append方法，爲本身添加一個子頁面，但要規定好子頁面大小（style），防止層疊產生的遮罩問題，與直接show()出來的webview 不一樣，直接show()亦可建立一個「僞子頁」這個子頁面有本身獨立的back監聽等等，說他僞，是由於他徹底獨立於外邊的父頁面，這其實就是上面說的層疊形成的假象，他是獨立的頁面，在設計高度寬度合適的狀況下，看似也像是子頁，但按下返回會關閉當前這「僞子頁」。建議使用append，這樣父頁面的銷燬會帶着子頁面，但子頁面又能夠單獨銷燬，這能夠解決上述的地圖map插件共用問題！

五、銷燬webview，webviewObj帶有clear，close兩個方法，官方說法：

clear
清空原生Webview窗口加載的內容

void wobj.clear();

說明：

清除原生窗口的內容，用於重置原生窗口加載的內容，清除其加載的歷史記錄等內容。

參數：

無

返回值：

void : 無

測試了一下，clear只是會重置整個頁面內容，相似於web中刷新當前頁面，並不會銷燬頁面，經過getWebViewById依然能夠找到他

plus.webview.close則能夠徹底關閉一個頁面

最後關於webview，乃至整個使用dcloud mui開發app，我想說，千萬不要用原來web開發的思想去理解，須要轉變，須要瞭解一些原生的特性。 注意，這點很重要，必定要記住openWindow打開的頁面是一層一層覆蓋的，下面的窗口依然存在。