一步一步教你如何开发h5页面

咱们如今要作一个简单的h5应用：包含登陆、注册、修改密码、我的中心主页面、我的中心内页修更名称、我的中心修改手机号码。

第一步：工具安装，我选择了可以辅助咱们快速开发的light开发工具

1. light依赖node环境，因此首先要安装node，https://document.lightyy.com/tools/index.html这里有详细的安装说明及安装包下载地址

2. 安装light工具，在命令行输入npm install lighting -gd --registry=https://registry.npm.taobao.org最终出现npm info ok字样则表示light以安装成功

首页咱们要用刚装好的light工具生成一个项目，咱们打开刚刚的命令行的工具，我想在个人电脑E盘下生成个人项目myproject, 在命令行输入e: 而后按回车键

第二步：正式开发

咱们如今要作的这个h5应用包含登陆、注册、修改密码、我的中心主页面、我的中心内页修更名称、我的中心修改手机号码。怎么用light快速开发呢？

1、首页咱们要用刚装好的light工具生成一个项目，咱们打开刚刚的命令行的工具，我想在个人电脑E盘下生成个人项目myproject, 在命令行输入e: 而后按回车键

继续输入light create lightProjectDemo 而后回车项目版本和描述能够填写，若是不想填写直接按回车键就好

这样咱们就生成好了一个light项目

2、如今能够用工具打开咱们建好的项目正式开发了、这里我用WebStorm演示

1. 打开项目，咱们发现index.html页面上有个视图，可是目录中却没有对应的内容，这里咱们须要在控制台上生成下代码输入light gen而后回车，第二张图发现变化了吗？分别在js和html的文件夹下新生成了一个view文件，这就是咱们index.html中的视图所生成的，这里咱们把这个页面当作咱们项目的首页，登陆和我的中心的入口都从这里

2. 下面咱们先来跑一下咱们的项目，在咱们的首页中添加登陆和我的中心的入口内容，而后在样式表中添加一些样式，最后在控制台上输入light release –wb 8888 而后回车（这里的8888是端口号，也能够不设置，默认的端口号是3000，这里咱们设置一下端口8888），浏览器会自动打开咱们的首页

3. 如今咱们开始创建登陆和我的相关的视图，这里我又新建了一个页面personal.html,内容参照index.html，固然你也能够只用一个页面index.html把全部的视图都放里面。（这里我把登陆和我的的视图都放在personal.html里了，固然你也能够根据须要再新建一个登陆的页面），你可能还注意到了，personal.html中的视图id上都多了个二级目录，好了，如今在控制台上再次输入light gen 来生成视图看下，你就会发现这个二级目录的效果（注意每次新建视图的时候都必须执行light gen命令才能生效）

发现不同了吗，在咱们的view视图下生成了一个personal的文件夹，里面是咱们刚刚新建的我的和登陆相关的视图，这样之后视图不少的时候咱们能够很好的进行分类管理（你能够根据本身的须要创建二级、三级…）

4. 继续执行light release –wb 8888跑一下咱们的项目，下面咱们看一下跳转（页面间的跳转咱们用window.location.href=；视图间的跳转用light框架中的方法Light.navigate）

跳转1：从首页页面中视图lightProjectDemo跳转到我的页面的登陆和我的中心主页（页面跳转）

跳转2：从我的页面的登陆视图跳转到我的页面的注册视图（视图跳转）,用light框架的视图跳转方法Light.navigate还能够携带视图参数

好了，这样一个简单的h5页面就作好了。