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

admin丨2019-05-29 08:37 我们现在要做一个简单的h5应用:包含登录、注册、修改密码、个人中心主页面、个人中心内页修改名称、个人中心修改手机号码。

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

  1. light依赖node环境,所以首先要安装node,https://document.lightyy.com/tools/index.html

    这里有详细的安装说明及安装包下载地址

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

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

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

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

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

第二步:正式开发

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

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

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

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

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

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

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

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

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

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


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

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

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


  • 2.下面我们先来跑一下我们的项目,在我们的首页中添加登录和个人中心的入口内容,然后在样式表中添加一些样式,最后在控制台上输入light release –wb 8888 然后回车(这里的8888是端口号,也可以不设置,默认的端口号是3000,这里我们设置一下端口8888),浏览器会自动打开我们的首页

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

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

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


  • 3.现在我们开始建立登录和个人相关的视图,这里我又新建了一个页面personal.html,内容参照index.html,当然你也可以只用一个页面index.html把所有的视图都放里面。

    输入我们需要的视图内容(这里我把登录和个人的视图都放在personal.html里了,当然你也可以根据需要再新建一个登录的页面),你可能还注意到了,personal.html中的视图id上都多了个二级目录,好了,现在在控制台上再次输入light gen 来生成视图看下,你就会发现这个二级目录的效果(注意每次新建视图的时候都必须执行light gen命令才能生效)

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

发现不一样了吗?在我们的view视图下生成了一个personal的文件夹,里面是我们刚刚新建的个人和登录相关的视图,这样以后视图很多的时候我们可以很好的进行分类管理(你可以根据自己的需要建立二级、三级…)

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


  • 4.继续执行light release –wb 8888跑一下我们的项目,下面我们看一下跳转(页面间的跳转我们用window.location.href=;视图间的跳转用light框架中的方法Light.navigate)

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

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

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


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

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

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

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

好了,这样一个简单的h5页面就做好了。
问题咨询 您的企业现在面临的问题?

联系我们

020-88888888

地址:广东省广州市海珠区新港东路192号

邮箱:88888888@qq.com

工作QQ:88888888

优库建站售前咨询

优库建站售后服务