mui框架原理（mui.init和mui.plusReady这两者到底什么关系）

本文目录

• mui.init和mui.plusReady这两者到底什么关系
• mui与html5 plus有什么关系
• Hbuilder mui这个前端ui框架如何有什么优缺点
• MUI 框架之遮罩蒙版（mask）
• mui框架阻止了onclick事件吗
• mui 主页面怎么向子页面传值
• huilder和mui开发的app获取个推推送的消息的click事件应该写在哪
• mui.ready是什么事件

mui.init和mui.plusReady这两者到底什么关系

1、mui.plusReady：对于 HTML5+应用的页面有一个很重要的 “plusready”事件，此事件会在页面加载后自动触发，表示所有 HTML5+ API 可以使用， 在此事件触发之前不能调用 HTML5+ API
2、mui.init：mui本身只是一个html5的前端框架而已，类似于react.js，jquery
mobile或者说像是bootstrap的针对手机简化版，本身不具备开发app的功能，适合wap开发，但其中包含了html5+的方法，如果不使用上述html5+
plus对象，而只需要mui框架包含的wap开发功能，则是使用mui.init之后即可调用。
无论做wap网页，还是app开发，只要需要用到mui框架，都需要mui.init初始化框架功能，而plusready仅仅在app开发中使用
3、关于mui plusReady的注意点：
mui.plusReady()中的代码不执行
可能1：你在浏览器下运行了html
可能2：
plusReady事件仅在webview首次创建时触发，使用mui.openWindow方法多次打开已存在的同样id的webview时，是不会重复触发plusReady事件的；
因此若业务写在plusReady事件中，可能会出现执行结果和预期不一致的情况；此时可通过自定义事件触发

mui与html5 plus有什么关系

mui是Dcloud公司封装的一套ui框架，该框架封装了我们在做界面开发时常用到的一些元素并为它们定义好了样式，开发时可以直接使用，不需要自己再去写样式，如：文本框，图文列表，选择框等，能使我们开发界面更快捷（主要用于移动设备界面开发）
html5 plus是Dcloud公司封装的一套js；通过该js可以调用移动设备能力，如：相机，相册，电话簿等等；目的是使：用html5开发的app能用拥有类似原生app的体验
一般使用Dcloud公司框架开发混合app时使用到:hbuilder(开发工具)+mui(ui框架)+html5 plus(调用移动设备能力)
所以两者没有必然联系，只是配合使用，你css厉害可以抛弃mui，只使用html5 plus一样可以开发app；
以上是个人见解。

Hbuilder mui这个前端ui框架如何有什么优缺点

我觉得
UI
框架的优缺点要从本身的几个特点来看：
UI
框架应该有的基本功能，比如各种浏览器内核的适配，比如
touch/swipe
的封装，即使没有
swipe
也要能够方便接入别人的插件，目前敢放出来推广的框架都做到了这些。
手机特有的
layout/交互/UI
Pattern，有的框架会模仿
iOS
原生应用的
UI，有的专为
Android
而做，也有兼顾的，因为不管是
iOS
还是
Android
一年之后都会变换风格，所以
UI
框架默认提供的
UI
虽然重要（很多人很懒或者没有能力自己设计），但是提供的
UI
易以定制更重要。
上手难度和开发方式，是指
UI
框架内部是如何设计来满足你开发、增加新模块的需求的，比如你的
app
要增加一个侧边栏，分别对应几个栏目，要写什么代码，需不需要自己写代码。
是否有一些小亮点，比如
icon
全部是
icon
font，内置复杂的
carousel
plugin
等等。

MUI 框架之遮罩蒙版（mask）

注意：

注意：
+ 关闭遮罩仅会关闭，不会销毁；
- 关闭之后可以再次调用mask.show()，打开遮罩；

两种方式在使用时都遇到了坑：

方式一的解决方式如下：

由方式一产生的遮罩能够覆盖子页面，能够解决父子遮罩问题。

方式二 mui.createMask(callback) 的源码如下：

mui框架阻止了onclick事件吗

mui相关的一些控件是通过拦截a标签上的href来实现的，所以mui.js会阻止a标签上的href跳转，因此需使用JS对标签添加事件监听。mui.openWindow()对运行环境进行判定，5+环境会打开新的webview，普通手机浏览器环境会进行window.location.href跳转。

mui 主页面怎么向子页面传值

在App开发中，页面间传值是很常见的开发需求，mui框架根据业务场景不同，提供了两种传值模式。
1、页面初始化时，通过扩展参数传值；
mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值；
mui框架在如下几种场景下，会执行页面初始化操作：
- 通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；
- 通过mui.init()方法创建子页面；
- 通过mui.init()方法预加载页面；
- 通过mui.preload()方法预加载页面
示例，假设我们有如下需求：
在首页中打开关于页面时，传递当前产品名称及版本号，然后在关于页面中读取这两个参数并显示出来；
首页实现代码：
mui.openWindow({
url:’info.html’,
id:’info.html’,
extras:{
name:’mui’,
version:’0.5.8’
}
});
\n
关于页面实现代码：
var self = plus.webview.currentWebview();
var name = self.name;
var version = self.version;
\n
2、页面已创建，通过自定义事件传值

huilder和mui开发的app获取个推推送的消息的click事件应该写在哪

DOM结构
关于mui页面的dom，你需要知道如下规则。
固定栏靠前
所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；
### 一切内容都要包裹在mui-content中
除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：
view plain copy
.mui-bar-nav ~ .mui-content {
padding-top: 44px;
}
.mui-bar-footer ~ .mui-content {
padding-bottom: 44px;
}
.mui-bar-tab ~ .mui-content {
padding-bottom: 50px;
}
你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。
始终为button按钮添加type属性
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。
窗口管理
页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；
页面跳转：抛弃href跳转
***隐藏网址***
hello mui中的无等待窗体切换是如何实现的
提示HTML5的性能体验系列之一 避免切页白屏
页面关闭：勿重复监听backbutton
mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。

mui.ready是什么事件

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。

但是官方有又说法：

页面初始化：必须执行mui.init方法

mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。

个人认为：

1. 每个用到mui的页面都调用下mui.init。

2. 2.如果需要使用大H5+对象，就写到plusReady中，如plus对象。