mui开发之init组件

mui JS是用来开发移动APP项目的利器,是一个轻量级的JS框架。那么,应该如何去掌握mui JS框架呢。最好一种方式,就是逐个熟悉mui框架的各个组件。

首先,我们先来学习init组件,负责页面的初始化工作。

工具/原料

HBuilder6.6

MUI2.5

方法/步骤

用init组件创建子页面。

主页面,子页面代码,及出来的效果,如下图所示:

0 HTML5 APP开发之创建APP项目

mui开发之init组件

mui开发之init组件

mui开发之init组件

用init组件设置状态栏颜色(状态栏颜色和顶部导航栏颜色一样)。

主页面代码,及出来的效果,如下图所示:

mui开发之init组件

mui开发之init组件

用init组件预加载页面(是有效提高性能的手段之一)。

主页面加载代码,及打开加载页面的方法,如下图所示:

mui开发之init组件

用init组件侧滑返回,通常用于侧滑菜单显示。

主页面,子页面代码,及出来的效果,如下图所示:

mui开发之init组件

mui开发之init组件

mui开发之init组件

mui开发之init组件

当然,除了上述功能外,还可以刷新组件,监听手势事件,以及重写窗口关闭逻辑等功能。

重点在于明白,init组件能做什么,以及可以实现哪些功能。

相关文章

  1. mui开发之event组件

    MUI框架常用的组件,除了init组件外,还有event组件(当然,不仅仅只有这些).那么,对于event组件,我们又应该如何去掌握呢. 下面将详细介绍event组件的常用用法. 工具/原料 HBuilder6.6 MUI2.5 方法/步骤 首先,我们得了解MUI框架都支持多少种事件类型.因为只有知 ...

  2. mui开发之dialog组件

    之前已介绍了mui框架的init组件.event组件,那么,接下来,我们来看看如何使用dialog组件.这也是常见的mui框架组件之一. 下面将详细介绍dialog组件的常用用法. 工具/原料 HBuilder6.6 MUI2.5 方法/步骤 首先,我们新建一个移动APP项目.然后,分别添加4个页面 ...

  3. MUI框架 页面dom规则

    最接近原生APP体验的高性能前端框架,关于如何使用MUI框架来布局,你需要遵循如下规则 0 HTML5 APP开发MUI框架教程--创建移动APP 工具/原料 HBuilder Mui v3.1.0 方法/步骤 [固定栏靠前] 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定 ...

  4. hbuilder app开发之列表

    列表,是HTML开发的常见功能.对于HTML5 APP开发而言,列表的重要性,就更加突出了.那么,列表在HTML5 APP开发中的形状有多少种呢.以及列表在APP下,又是如何实现分页处理的呢. 下面将逐一介绍(想了解hbuilder app开发Input功能,hbuilder app开发 Butto ...

  5. HTML5 APP开发之Input输入框

    Input输入框控件,应该说无论是B/S模式开发,还是C/S模式开发,还是APP开发,都是常用的控件.那么,对于HTML5 APP开发而言,Input输入框控件,又有多少种形状呢,下面将详细介绍. 掌握Input输入框技能,将会提升开发效率.同时,也对开发时,应该选择哪种类型,可以给出最佳方案. 工 ...

  6. HTML5 APP开发MUI框架教程--创建移动APP

    HTML5开发App掌握成本低,款平台发布,节省开发成本,MUI最接近原生APP体验的高性能前端框架, 方法/步骤 打开Hbuilder IDE编辑器 Hbuilder 初始化界面,可以看到"新建Web项目"."新建移动APP项目" 1. 直接点击新建移动AP ...

  7. HTML5 APP开发之Button按钮

    之前介绍了Input输入框,在HTML5 APP开发下的各种形状是怎样的.那么,对于同样重要的控件:Button按钮,又有怎样的形状,以及使用Button按钮时,又应该注意哪些事项呢. 下面将逐一介绍: 0 HTML5 APP开发之Input输入框 工具/原料 HBuilder6.6 MUI2.5 ...

  8. NSIS客户端打包工具脚本编写案例

    对于目前游戏客户端打包来说安装文件越来越大,安装速度也越来越慢.由于前面提到的微软系统对于打包文件大小的限制问题,做过一些简单的说明和讲解,但是为了方便大家能够好理解.所以就做了以下NSIS示例出来.希望给那些要用NSIS工具进行打包客户端的朋友一些提示. 方法/步骤 示例: ; 该脚本使用 HM ...

  9. Spring框架的作用及基本使用

    1.Spring框架的作用 Spring框架主要用于与其他技术(struts,hibernate等)进行整合, 可将应用程序中的Bean组件实现低耦合关联.最终可以提高系统扩展 和维护性. 将来我们利用Spring框架管理系统的各个组件(Action,Service,DAO) .采用Spring的I ...