使用H5+（html+css+js）快速制作手机app（一学就会）

火龙kess

于 2025-03-24 16:55:49 发布

阅读量651

点赞数 3

文章标签： javascript html css windows web app

本文链接：https://blog.csdn.net/hack_18520/article/details/146460292

版权

一，HBuilder X开发工具下载

下载和安装教程：HBuilder X安装教程（2025版）

二，创建H5+App项目

创建项目成功后，会生成以下文件和文件夹：

三，修改app首页内容

修改项目目录下的index.html首页文件，也可设计成自己有需求的首页，以下为演示代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>app首页</title>
	<style>
		*{margin: 0;color: #000;}
		.kk{
			width: 200px;
			height: 100px;
			background: aquamarine;
			text-align: center;
			line-height: 100px;
			border-radius: 50px;
			font-size: 25px;
			position: fixed;
			left: 50%;
			top: 50%;
			right: 50%;
			transform: translate(-50%,-50%);
		}
	</style>
	<script>
		window.onload = function(){
			document.getElementById("kk").addEventListener("click",function(){
				alert("我是弹窗");
			});
		}
	</script>
</head>
<body>
	<div class="kk" id="kk">点击我弹出弹窗</div>
</body>
</html>

运行效果为：