【H5开发】01从一个简单页面带你体验H5开发 ~ 从静态页面到调接口手把手教学整个页面实现过程
admin
2025-09-26 17:30:43
所有的结尾亦是开头,只是我们当时不知道而已。-----------你在天堂遇见的五个人
首先需要知道,前端开发必须的一些工具页面:
(1)原型设计稿(用于了解系统功能)---> 产品经理
(2)UI设计稿(用于进行严格的页面布局和样式开发)--->UI设计
(3)接口文档(前后端联调,字段定义的依据)---> 后端开发
(4)测试文档(修改指给的bug)---> 测试
1. 首先来看看我们的目标页面和UI设计稿
大概了解了页面功能:列表显示数据!
再详细一点:加载页面后,根据后端返回的数据逐条渲染,显示数据
那让我们开始吧
2. 首先建文件
一般在项目工程文件中,直接在总目录下新建页面notice.html,同时在css文件下新建notice.css对于页面需要使用到的图片,可以放在images下新建文件夹notice里。Js文件中一般包含通用的代码,common文件夹下一般是通用的页面组件,如header.html
3. 写notice.html静态页面样式
window.onload = function () {
/*750代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.1rem等等*/
};
$(document).ready(function () {
getRem(750, 100)
$('.top').load('./co