H5页面制作详细步骤，教你借H5页面模板

现在我们需要做一个简单的h5应用，包括登录、注册、密码修改、个人中心主页面、个人中心内部页面名称修改和个人中心手机号修改。

第一步:工具安装。我选择了一个轻量级的开发工具，可以帮助我们快速开发。

1.光线取决于节点环境，所以需要先安装节点。Https://document.lightyy.com/tools/index.html有详细的安装说明和安装包的下载地址。

2.安装照明工具，在命令行-GD-registry = https://registry.npm.taobao.org输入NPM安装照明。最后，出现npm info ok字样，表示灯已成功安装。

主页我们想用新安装的light工具生成一个项目。我们刚刚打开了命令行工具。我想在我的电脑E盘下生成我的项目。在命令行中输入e :,然后按Enter键。

第二步:正式发展。

我们现在需要做的h5应用包括登录、注册、密码修改、个人中心主页名称修改、个人中心手机号码修改。如何用光快速显影？

首先，我们想使用新安装的light工具来生成一个项目。我们刚刚打开了命令行工具。我想在我的电脑E盘下生成我的项目，在命令行键入E:，然后按enter。

继续键入light create lightProjectDemo，然后按enter键。您可以填写项目版本和描述。如果不想填写，按回车即可。

所以我们设计了一个照明项目。

第二，我们现在可以使用工具打开我们构建的项目，并正式开发它。这里我将用WebStorm来演示。

1.打开项目，我们发现在index.html页面上有一个视图，但是在目录中没有相应的内容。这里我们需要在控制台上生成下一个代码，输入light gen并按回车键。第二张图有变化吗？在js和html文件夹下创建一个新的视图文件，它是由我们的index.html中的视图生成的。这里我们把这个页面当做我们项目的主页，登录和个人中心的入口都是从这里开始的。

2.先运行我们的项目，在我们的主页中添加登录和个人中心入口内容，然后在样式表中添加一些样式，最后在控制台上输入light release -wb 8888并回车(这里8888是端口号，默认端口号是3000，这里我们设置端口8888)，浏览器会自动打开我们的主页。

3.现在我们开始构建与登录和个人相关的视图。在这里，我创建了一个新的网页，personal.html，其内容是指index.html。当然，你也可以把所有的想法都写在一页纸上，index.html。我把personal.html的登录和个人观点放在这里。当然，您也可以根据需要创建新的登录页面。您可能已经注意到，在personal.html的视图id上有一个二级目录。好了，现在再次进入控制台上的light gen generation视图，你会发现这个二级目录的效果(注意每次创建新视图都必须执行light gen命令)。

不一样吗？在我们的view视图下生成了一个个人文件夹，里面包含了新创建的个人和登录相关的视图，这样以后有很多视图的时候，我们就可以很好的管理了(你可以根据自己的需要设置两级三级...)

4.继续执行light release -wb 8888来运行我们的项目。我们来看跳转(我们用window.location.href =表示页面之间的跳转；使用灯光在视图之间跳跃。灯光框架中的导航方法)

跳转1:从首页的view lightProjectDemo跳转到个人页面的登录和个人中心的首页(页面跳转)。

跳转2:从个人页面的登录视图跳转到个人页面的注册视图(视图跳转)，使用light框架的视图跳转方法，Light.navigate也可以携带视图参数。

好了，这么简单的h5页面就做好了。