移動app前端框架MUI,HTML5+,簡單頁面搭建

MUI

1. 什么是MUI？

   1. MUI的定位是：最接近原生體驗的移動App的UI(前端)框架。
   2. 基於mui的定位，產生了mui的幾個特點，輕、小、只涉及UI、只為移動App而生、界面風格原生化。

2. MUI、HTML5+、5+Runtime的關系

   1. mui是一個前端框架。
   2. HTML5+是一套HTML5能力擴展規范。
   3. HTML5+ Runtime是實現HTML5+規范的強化瀏覽器引擎。

   類似於bootstrap、w3c和chrome的關系。

HTML5+

　　HTML5+規范點擊這里

　　HTML5+是一套HTML5能力擴展規范。

　　封裝了移動操作系統的調用接口

MUI（前端UI框架類似bootstrap）

　　代碼塊指令以及更多功能點擊這里

　　主要包含以下組件：

1. 　　UI組件
2. 　　窗口管理
3. 　　事件管理
4. 　　utils
5. 　　AJAX
6. 　　下拉刷新
7. 　　上拉加載
8. 　　代碼塊

 

開發工具HBuilder（類似Pycharm）

 

練習：

　　代碼塊-HTML代碼塊：觸發字符快速生成

　　點擊事件

　　跳轉頁面（數據傳遞）

　　　　偽代碼：

1.打開新頁面，傳遞數據
mui.openWindow({
    url:'index.html',
    id:'index.html',  #這個id為頁面id
    
    style:{頁面布局}
    extras：{頁面參數}
}）

2.新頁面接收數據
plusReady（function（）{
    plus.webview.currentWebView()}）　　

　　窗口的開火事件：mui.fire()

# mui.fire()代碼如下
#通過頁面id獲取頁面web對象，
web = plus.webview.getWebViewById('index.html')  
#提交自定義事件和參數
mui.fire(web,'sayHello',{參數字典})
#目標頁面監聽事件
document.addEventListener('sayHello',function(data){
data.detail.talk})

 

　　登錄頁面（前后端簡單交互）