移动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})

 

　　登录页面（前后端简单交互）