MUI框架-01-介紹-建立項目-簡單頁面

MUI框架-01-介紹-準備-建立項目

• 從0開始快速高效學習 MUI 框架
• 官方文檔：http://dev.dcloud.net.cn/mui/ui/
  

（1）MUI 介紹

• MUI 是什麼，解決了什麼問題？
• MUI 官方號稱最接近原生APP體驗的高性能前端框架
• 簡單的說就是webapp的以個開發框架
• webapp和原生app性能及體驗的差距，一直是移動app開發者放棄HTML5的首要緣由。 瀏覽器天生的切頁白屏、不忍直視的轉頁動畫、浮動元素的抖動、沒法流暢下拉刷新等問題，這些都讓HTML5開發者倍感挫敗，尤爲拿到Android低端機運行，摔手機的心都有（若是開發者須要解決這些問題，須要處理不少兼容性問題，須要花費大把的時間和精力）；
• 瀏覽器默認控件樣式（prompt、alert）又少又醜，製做一個漂亮的控件很是麻煩，也有一些製做簡單的ui框架但性能低下。
• 此時，出現了正義的 MUI
• mui框架：一個能夠方便開發出高性能App的框架，也是目前最接近原生App效果的框架。有些控件就是原生態的效果，mui起到了橋樑的做用。
• MUI是國產的，北京數字天堂。和它配套的有開發工具 HBuilder，5+runtime
  5+runtime：能夠將H5打包成native app，原理：利用原生態的webview去承載HTML5

（2）MUI 的特色

• 輕量
  追求性能體驗，是咱們開始啓動MUI項目的首要目標，輕量必然是重要特徵；
  MUI不依賴任何第三方JS庫，壓縮後的JS和CSS文件僅有100+K和60+K
  能夠根據自個的須要，自定義去下載對應的模塊。和咱們接觸的zepto.js相似
• 原生UI
  鑑於以前的不少前端框架（特別是響應式佈局的框架），UI控件看起來太像網頁，沒有原生感受，所以追求原生UI感受也是咱們的重要目標
  MUI以iOS平臺UI爲基礎，補充部分Android平臺特有的UI控件;
• 容易上手
• 不須要其餘框架基礎：語法上和咱們以前 學到用到 的寫法是同樣的。
• 其餘框架：ionic(Angular.js), react(native),vue(發音:view）
  vue、react、Angular.js是並列關係。
  前端是：vue和react的天下

（3）MUI 存在的問題

（1）名氣不是很大，國產，不像react、Angular.js那樣，世界範圍都在使用。目前國內MUI使用的公司仍是不少的
（2）框架自己存在一些bug還有一些待解決的問題
（3）總的來講，用着仍是很不錯了

（4）開發工具

• HBuilder 下載地址：http://www.dcloud.io/
• mui 有個開發文檔預覽式 app，下載Hello mui App
  點擊下載 已打包好的Hello mui 手機app，直接在手機上體驗mui的控件UI及能力展現

（5）建立 MUI 項目

• 選擇新建「移動APP」，並選擇「Hello MUI」工程模板，建立工程；而後經過數據線將手機鏈接上電腦，點擊運行，就能夠在手機上體驗MUI的各項能力
• 快速構建頁面：
• 1.新建含mui的HTML文件
  • 在Hbuilder中，新建HTML文件，選擇」含mui的HTML「模板，能夠快速生成mui頁面模板，該模板默認處理了mui的js、css資源引用
• 2.輸入mheader
  • 頂部標題欄是每一個頁面都必需的內容，在Hbuilder中輸入mheader，能夠快速生成頂部導航欄
• 3.輸入mbody
  • 除頂部導航、底部選項卡兩個控件以外，其它控件都建議放在.mui-content控件內，在Hbuilder中輸入mbody，可快速生成包含.mui-content的代碼塊
• 4.更多開發後面介紹，今天先介紹一些注意事項
• 5.官方文檔：http://dev.dcloud.net.cn/mui/ui/

（6）簡單頁面

• 建立項目
• 打開 HBuilder 新建移動 app 項目，選擇 mui 項目模板
• 新建 html 文件，選擇 mui 模板
  
• 也能夠選擇下面預製的模板

（7）HTML 文件

• 打開新建的 html 文件
• 會看到一些預製的設置，meta 標籤，css 文件，js 文件
• 而後咱們主要的是在 body 中進行一些操做
• 先輸入一個： m
  
• 能夠看到觸發了關鍵詞，有不少代碼塊，這也是最經常使用的方法，咱們就能夠快速的開發
• 例1：
• 好比咱們輸入： mh
• 選中 header，而後回車
• 輸入標題：MUI 入門

• 很快吧，用 mui 作這種的話就是這麼快
• 例2：
• 好比咱們輸入： ml
• 選中第 2 個圖文列表，回車

• 這時候就會有問題了，頂部重疊了，爲何會有這個問題呢，就是由於沒有把內容放到主體裏面，而後人家還覺得你是 header 呢
• 之因此這樣，故意遇到這個問題，是由於：
• 除了固定欄以外，其它內容都要包裹在.mui-content 中，不然就有可能被固定欄遮罩，緣由：固定欄基於Fixed定位，不受流式佈局限制，普通內容依然會從 top:0 的位置開始佈局，這樣就會被固定欄遮罩，像這樣的注意事項還有挺多，我會單獨整理一下
• 解決辦法：
• 刪掉剛纔的列表，輸入 mbo 找到 body 回車
• 而後在 body 裏面輸入 ml 圖文列表，預覽：

• 例3：
• 而後咱們在 主體的外面，就是 mui-content 的div的外面
• 咱們輸入：mt 選擇底部欄，回車

• 這時候簡單的搭建頁面，是否是就已經能夠掌握了
• 這時候是否是已經感受 mui 有時候仍是很強大的
• 好，後面咱們在繼續學習

關於開發

• 查閱：官方文檔
• 個人文章：
• 博客園：MUI 框架
• CSDN：MUI 框架