HBuilder 第一个app项目

最新推荐文章于 2024-09-13 14:15:41 发布

流萤小扇

最新推荐文章于 2024-09-13 14:15:41 发布

阅读量413

点赞数

分类专栏： web前端文章标签： html5 vue 前端

本文链接：https://blog.csdn.net/CandyLove102130/article/details/116263485

版权

web前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

官网下载HBuilder，找到exe文件运行。

2，新建app项目

初始目录如下，这是比较简单的app，复杂项目可以借助vite创建项目，初学者先这样整出来。

3.补充index.html，添加导航菜单：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<nav class="mui-bar mui-bar-tab" id="nav">
			<a id="tab_home" class="mui-tab-item mui-active" >
				<span class="mui-icon mui-icon-home" ></span>
				<span class="mui-tab-label">菜单1</span>
			</a>
			<a id="tab_caidan" class="mui-tab-item">
				<span class="mui-icon mui-icon-compose"></span>
				<span class="mui-tab-label">菜单2</span>
			</a>
			<a id="tab_setting" class="mui-tab-item" >
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我</span>
			</a>
	</nav>
	
	<script type="text/javascript" charset="utf-8">
		mui.init({
			subpages:[//首先加载首页  
				{  
					url:'html/home.html',  
					id:'tab_home',  
					styles:{  
						top:'0px',  
						bottom:'60px'  
					}  
				}  
			],  
			preloadPages:[//预加载其他页面  
				{  
					url:'html/caidan.html',  
					id:'tab_caidan',  
					styles:{
					top:'0px',
					bottom:'60px'  
					}  
				},  
				{
					url:'html/setting.html',
					id:'tab_setting',
					styles:{
						top:'0px',
						bottom:'60px'
					}
				}
			] 
		});
		mui.plusReady(function(){
			var tab_home,tab_caidan,tab_setting
			mui("#nav").on("tap","#tab_home",function(){//点击触发   
				tab_home=plus.webview.getWebviewById("tab_home");  
				tab_home.show()  
				tab_caidan.hide()
				tab_setting.hide()
			})  
			mui("#nav").on("tap","#tab_caidan",function(){//点击触发  
				tab_caidan=plus.webview.getWebviewById("tab_caidan");  
				tab_caidan.show()  
				  
			})  
			mui("#nav").on("tap","#tab_setting",function(){//点击触发  
				tab_setting=plus.webview.getWebviewById("tab_setting");
				tab_setting.show()
			})
		})
	      	
	</script>
</body>
</html>

4.创建页面html