mui开发app教程-1

上一篇：前言

目录

创建项目方式

功能1：引导页

引导页显示

引导页代码模板

引导页全屏显示设置

引导页跳转首页

功能2：首页选项卡设计

选项卡依赖文件

选项卡代码模板

选项卡更改图标

使用成果展示和代码

教程-1源码分享：

index.html

guide.html

---

创建项目方式

创建基于mui的app的项目的方式有很多种：

笔者选用最简单的模板（因为这样才能最灵活的演示整个mui开发app的教程）：

点击创建(其中guide.html是我自己创建成功后新建的文件)：

功能1：引导页

初次使用app，或者版本更迭，都需要引导页来展示app的新功能。

引导页一般需要全屏显示，这样看起来效果更好如下：

引导页显示

引导页的显示程序直接放在首页里头，即index.html里头

代码如下：

mui.init({
		statusBarBackground: '#f7f7f7'
	});
	mui.plusReady(function() {
		//读取本地存储，检查是否为首次启动
		var showGuide = plus.storage.getItem("lauchFlag");
		//仅支持竖屏显示
		plus.screen.lockOrientation("portrait-primary");
		if(showGuide) {
			//有值，说明已经显示过了，无需显示；
			//关闭splash页面；
			plus.navigator.closeSplashscreen();
			plus.navigator.setFullscreen(false);
		} else {
			//显示启动导航
			mui.openWindow({
				id: 'guide',
				url: 'guide.html',
				styles: {
					popGesture: "none"
				},
				show: {
					aniShow: 'none'
				},
				waiting: {
					autoShow: false
				}
			});
		}
	})

引导页代码模板

引导页的程序模板即guide.html,如下：

	
		
		
		
		
		

		
		
	

	
		

			

				
				

					

						
						GAT
						
						

							
小巧高能
							
热点、备忘录
							
点名...一应俱全
						
					
				
				
				

					

						
						GAT
						
						

							
可爱主题
							
学生的视角为设计思路
							
老师的审美为审核标准
						
					
				
				
				

					

						
						GAT
						
						

							
流畅体验
							
h5+技术的应用
							
让你嗨起来不卡顿
						
					
				
				
				

					

						
						GAT
						
						

							立即体验
						
					
				
			
			

				

				

				

				

			
		
		
		
	

引导页全屏显示设置

如果没有设置全屏，那么手机屏幕的上面的状态栏会是白色的，下面确实引导页的页面颜色，看起来很不协调

全屏设置需要再manifest.json文件里头添加属性。

manifest.json文件就是：

添加的代码如下：

"fullScreen":true

引导页跳转首页

关闭引导页，并进入首页：

此时首页是最简单的，什么内容都没有（看到的首页两个字，也是我手动添加到index.html的body里头去的）。

 

功能2：首页选项卡设计

类似qq、微信底部有四个选项这样的内容。我们也需要给我们app设计这么一些内容。大致如下：

其实mui提供的组件非常全面，基本上我们需要用到的方方面面都有。

选项卡依赖文件

选项卡只要用默认的依赖文件，即mui.min.js 和mui.min.css即可

选项卡代码模板

	
		
		首页
	
	
		9
		消息
	
	
		
		通讯录
	
	
		
		设置
	

效果如下：

选项卡更改图标

更改图标只要上mui的官方网站找对应的图标库（访问地址：https://dev.dcloud.net.cn/mui/ui/#icon）即可。

注意一点：mui官网的图标库有两种：

一种是默认的图标库

一种是拓展的图标库。

这两种的用法不太一样。

个人推荐：所有的选项卡统一使用一种图标，因为这两种图标的样式有点差别。

使用成果展示和代码

使用如下代码：

	

		
			
			首页
		
		
			
			消息
		
		
			
			点名
		
		
			
			联系人
		
		
			
			通知
		
	

效果如下：

教程-1源码分享：

至此，我们已完成了引导页的设计以及首页底部选项卡的设计。涉及到两个页面：

index.html

    
    
    
    
    


	

		
			
			首页
		
		
			
			消息
		
		
			
			点名
		
		
			
			联系人
		
		
			
			通知
		
	

guide.html

	
		
		
		
		
		

		
		
	

	
		

			

				
				

					

						
						GAT
						
						

							
小巧高能
							
热点、备忘录
							
点名...一应俱全
						
					
				
				
				

					

						
						GAT
						
						

							
可爱主题
							
学生的视角为设计思路
							
老师的审美为审核标准
						
					
				
				
				

					

						
						GAT
						
						

							
流畅体验
							
h5+技术的应用
							
让你嗨起来不卡顿
						
					
				
				
				

					

						
						GAT
						
						

							立即体验