mui學習筆記

前言：隨着互聯網技術的進步，現已衍生出一些基於APP開發的前端框架。只須要一套代碼就能夠打包基於 安卓和ios系統的APP。哎，好多安卓和ios工程師要下崗啊！

 

1、爲何要學習mui?

　　當前三大前端APP主流框架有：mui、ionic、framework7。固然看了數據對比彷佛framework7更勝一籌，可是mui學習更簡單對後臺工程師和全棧來講是福音，更況且是在之前接觸過mui的基礎上。framework7後期會學習。

 

2、mui能幹什麼？

　　①：改變傳統模式用 安卓、ios兩種工程師開發APP的模式。一套代碼生成不一樣的應用程序。

　　②：爲解決HTML5在低端 Andorid機上的性能缺陷。mui引入了原生加速，其中最關鍵的就是webview控件。所以mui若要發揮其所有能力，須要和5+APP配合使用，若脫離5+APP，mui功能會受限制。

　　③：mui以窗口形式加載。

 

3、mui優點

　　①：文件極小，100k的js文件，60k的css文件。原生編寫，不依賴任何三方框架

　　②：極強，xcode和Android studio裏全部原生控件都具有

　　③：高性能，精練的代碼、適時的5+原生動畫調用，達到原生應用的體驗

　　④：多端發佈，編寫一套代碼，iOS、Android、瀏覽器、微信H五、百度直達號、流應用全覆蓋

 

4、開發工具 HBuilder http://www.dcloud.io/hbuilderx.html

　　HBuilder是一款國產開發工具，全中文，有BUG。

 

5、建立APP模板

　　利用HBuilder建立一個APP項目和傳統的Web項目差很少，老版本HBuilder選擇建立移動APP，新版本的選擇5+APP（H5標準的跨平臺APP）或uni-app（開發一次同時發佈爲andorid、ios、小程序、H5等多個平臺）具體文件目錄以下：

　　①：css

　　②：fonts  字體圖標文件

　　③：js

　　④：unpackage 打包

　　⑤：index.html 

　　⑥：manifest.json 設置App的參數，例如APP名稱等

　　固然高版本的HBuilder不一樣的模板還有更高級的功能，好比自動建立登陸註冊等頁面。小白同窗必定要知道這些，否則幸好半天寫頁面否則別人點點點幾下。

 

6、mui使用組件

　　使用mui引入其css、js、fonts便可。重點部分查看官網http://dev.dcloud.net.cn/mui/ui/ 的組件、窗口管理、事件管理的使用。

　　下面介紹初學mui的三點常識

　　①：在HTML中引入以m開頭，好比mui封裝的header就加mheader。

　　②：怎麼改變元素樣式，在class屬性名後面空格新增header，在css文件中添加.header屬性樣式引用便可。

　　③：在網頁中出現兩個div之間有灰白色空格線的去除方法，body爲受影響的元素，可自行選擇。

　　　　body{

　　　　　　-webkit-box-shadow:none;

　　　　　　box-shadow:none;

　　　　}

 

7、與後臺數據交互

　　①：Art-template 用於頁面的動態渲染，官方文檔http://aui.github.io/art-template/docs/syntax.html

　　②：Ajax 向後臺請求數據 ,mui有對ajax的封裝

 

八：運行移動模式

　　①：安裝手機模擬器：推薦 夜神手機模擬器

　　②：參考 https://www.jianshu.com/p/a2631cdfc049

 

九：打包

　　　點擊HBuilder工具欄的「發行」選擇 發行爲原生安裝包

　　　　　修改應用名稱，即APP名稱

　　　　　雲端獲取，登陸遠端帳號

　　　　　圖標Logo須要.png格式的圖片

　　　　　ios打包須要帳號，這個是收費的