h5页面应该如何开发（h5怎么做网页）

H5被全称为HTML5，是HTML的第五个版本。HTML(Hyper Text Mark-up Language)也就是超文本标记语言，是目前网络上使用最广泛的语言，同时也是组成网页文档的主要语言。下面就让来给大家分享一下h5页面应该如何开发，让我们一起来看看吧。

1.light依赖node环境，所以首先要安装node，安装 - light开发文档这里有详细的安装说明及安装包-

Node安装成功后打开命令行工具键入npm -v，看到版本号即表示安装成功

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

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

一、首页我们要用刚装好的light工具生成一个项目

我们打开刚刚的命令行的工具，我想在我的电脑E盘下生成我的项目myproject, 在命令行输入e: 然后按回车键

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

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

二、现在可以用工具打开我们建好的项目正式开发了

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还可以携带视图参数

HTML5本身并不是一项新技术，但是由于HTML5在功能上的巨大丰富，以及对各个主要浏览器性能的支持，它比之前的HTML5有着更广泛的用途。以上就是为大家分享的关于“h5页面应该如何开发”的全部内容啦，希望能够给大家带来帮助哦。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。