。
1 為什麼要應用框架
目前HTML5開發者面臨的問題有很多，例如：瀏覽器切頁白屏、轉頁動畫較差、浮動元素抖動、無法流暢下拉刷新。並且在Android低端機運行更是表現不足：瀏覽器默認控制項樣式和數量較少，致使製作一個漂亮的控制項非常麻煩。
（1）目前的可尋移動框架有哪些？
主要有最早的，很流行的jQuery，但是其效率和性能很差，所以很少有企業回去應用；
另一個就是Bootstrap,但其主打的是PC端，其大小和效率滿足不了移動端的需求；其他的還有Sencha Touch、jQTouch等等。但目前最好選擇的是MUI。
（2）為什麼選擇MUI：
因為相比同類框架，MUI是目前最接近原生App效果的框架之一，同時體積小，已開源，採用MIT協議，特點是極簡、極快、極易。
2 快速體驗
（1）首先在HBuilder裡面創建一個移動端的應用，填上應用名稱，在選擇模板裡面勾選mui登錄模板，如下：
（2）然後在該項目裡面就會自動生成一些資源和配置及組件，如下：
（3）打開index主頁，裡面會自動引入mui、js及css
（4）然後我們只需要用幾個字母就可以快速寫出類似於微信主頁面的界面：
下面我將說說這個簡單的微信界面是如何快速寫出的：
a.頂部標題欄（頭部）：在<body></body>裡面敲出mh，就會有兩個選擇，一個是帶返回箭頭的標題欄，一個是沒有返回的標題欄。讀者們可以根據自己的需求選擇所需要的標題欄。
b.底部選項卡：在<body></body>裡面敲出mt,選擇mTab，然後就會生成相應的代碼。
c.主體部分：敲出mb,選擇mBody,就會自動生成mui的content部分，如下：
然後再在該標籤裡面敲出ml,就會又是那個提示選擇，一個是列表，一個是圖文列表圖片居右，一個是圖文列表圖片居左，讀者可以自行選擇。
以上就是這個寫一個類似於微信主頁面的全過程，很簡單，快速，僅僅只敲幾個字母。
3 總結
這篇文章是切合自己親身體驗，所以對那些純入門小白來說，應該也能看懂。但我只對如何快速構建一個類似於微信主頁面的框架和步驟進行了敘述，這只是一個用div寫的子頁面，但是這種方法不常用，現在用的最多的是webview的方式，我也沒有過多的說如何使各個子頁面進行切換，以後可能會給大家講。這篇文章只是單純地說如何飛一般的體驗快速構造類似於微信頁面的方法，也有許多不足的地方，希望大家多多指教。
更多精彩文章：
什麼是機器學習
關於網頁首頁設計的一點思考
新手小白應該如何學習MUI
聊一聊where2go團隊做什麼
聊一聊編程的本質
深入理解瀏覽器內核 - 概述
深入理解瀏覽器內核 - 瀏覽器內核介紹
深入理解瀏覽器內核 - 瀏覽器內核依賴關係
python快速求解不定積分和定積分
AI告訴你張無忌最愛的竟是...
Jupyter快速編輯高大上數學公式 泰勒展開式
Jupyter快速編輯高大上數學公式 常見希臘字母
基本初等函數 指數函數
基本初等函數 指數函數 代碼篇
聊一聊JavaWeb面試
聊一聊單片機和伺服器
50行代碼實現簡單的網站伺服器
50行代碼實現網站伺服器 2
50行代碼實現網站伺服器 3
Tomcat源碼分析之 doGet方法(一)
Tomcat源碼分析之 doGet方法(二)
Tomcat源碼分析之 doGet方法(三)
Tomcat源碼分析之 doGet方法(四)
Tomcat源碼分析之中文亂碼(一)
一種基於狀態機的 DOM 樹生成技術(1)
一種基於狀態機的 DOM 樹生成技術(2)
where2go 團隊
微信號：算法與編程之美