【H5开发】01从一个简单页面带你体验H5开发 ~ 从静态页面到调接口手把手教学整个页面实现过程

admin

所有的结尾亦是开头,只是我们当时不知道而已。-----------你在天堂遇见的五个人

首先需要知道,前端开发必须的一些工具页面:

(1)原型设计稿(用于了解系统功能)---> 产品经理

(2)UI设计稿(用于进行严格的页面布局和样式开发)--->UI设计

(3)接口文档(前后端联调,字段定义的依据)---> 后端开发

(4)测试文档(修改指给的bug)---> 测试

1. 首先来看看我们的目标页面和UI设计稿

大概了解了页面功能:列表显示数据!

再详细一点:加载页面后,根据后端返回的数据逐条渲染,显示数据

那让我们开始吧

2. 首先建文件

一般在项目工程文件中,直接在总目录下新建页面notice.html,同时在css文件下新建notice.css对于页面需要使用到的图片,可以放在images下新建文件夹notice里。Js文件中一般包含通用的代码,common文件夹下一般是通用的页面组件,如header.html

3. 写notice.html静态页面样式

通知