h5页面应该如何开发
H5被全称为HTML5，是HTML的第五个版本。HTML(Hyper Text Mark-up Language)也就是超文本标记语言，是目前网络上使用最广泛的语言，同时也是组成网页文档的主要语言。下面就让小编来给大家分享一下h5页面应该如何开发，让我们一起来看看吧。
h5页面应该如何开发
第一步：工具安装，我选择了能够辅助我们快速开发的light开发工具
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页面应该如何开发”的全部内容啦，希望能够给大家带来帮助哦。
[免责声明]
文章标题： h5页面应该如何开发
文章内容为网站编辑整理发布，仅供学习与参考，不代表本网站赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时沟通。发送邮件至36dianping@36kr.com，我们会在3个工作日内处理。
