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

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

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

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

  

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

  

  

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

第二步：正式开发

我们现在要做的这个h5应用包含登录、注册、修改密码、个人中心主页面、个人中心内页修改名称、个人中心修改手机号码。怎么用light快速开发呢？

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

继续输入light create lightProjectDemo 然后回车项目版本和描述可以填写，如果不想填写直接按回车键就好

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

二、现在可以用工具打开我们建好的项目正式开发了、这里我用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页面就做好了。

转载于:https://my.oschina.net/u/3052891/blog/848420