带大家写一个手机端页面H5+APP(适合新手)第一节

大家好，我是新媒之声工作室的大白，今天给大家带大家写一个手机端的页面，这里我们是使用的H5+APP开发的，用的是HBuilder软件，这个软件很适合新手有较强的自动补全功能。

这里我就不介绍这个软件了，大家可以自己摸索。

我们要准备的工具有：HBuilder（开发软件），jquery。

首先我们打开软件HBuilder，点击左上角文件→新建→移动app，进入新建页面，我们需要填写应用名称和应用储存的目录和所需的框架，这里我们不用mui框架，选择空模板→点击完成。

我们新建完移动app就可以在左边的项目管理中看见。

我点刚刚新建的移动app可以看见软件已经为我们自动生成了所需要的文件夹及文件，css文件夹用来放入我们写的css样式，img文件夹是用来放置我们所需的图片，js文件夹使用来放置我们编写的js文件或是jquery，index.html文件是我们移动app的主页，manifest.json文件是用来设置移动app的应用介绍图标及其设置的文件。

接下来我们右键css文件夹，选择新建→css文件，进入新建css文件页面，填写css名称，其它默认就可。

然后我们右键js文件夹打开文件所在目录，把准备好的jquery复制进去即可。

我们双击index.html文件，进入index.html文件编辑页面，就可以看到软件替我们提前写好的标准H5+结构，这里我就不在介绍H5语言结构了，不知道的可以看前面的教程但我们介绍会解释这句话

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这句的意思就是不允许用户自己手动缩放或扩大页面比例和自动设置缩放比例，这里好像是1:1的比例。

软件保存快捷键和其它软件一样Ctrl+S，另存为快捷键为Ctrl+Shift+S。

谢谢观看，下一节开始讲解移动app的主页设计。