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

getRem(750, 100)

$(‘.top’).load(‘./common/header.html’);

});

window.onresize = function () {

getRem(750, 100)

};

function getRem(pwidth, prem) {

var html = document.getElementsByTagName(“html”)[0];

var oWidth = document.body.clientWidth || document.documentElement.clientWidth;

html.style.fontSize = oWidth / pwidth * prem + “px”;

}

当前考核周期：

标题内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

标题内容内容

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

４. 对照UI设计稿修改样式

• {

margin: 0;

padding: 0;

text-decoration: none;

}

body {

font-size: 10px;

-webkit-text-size-adjust: none;

background-color: #f4f4f4 !important;

font-family: ‘微软雅黑’;

}

.dqkhzq {

height: 0.8rem;

background-color: #ffffff;

font-size: 0.3rem;

font-weight: 400;

line-height: 0.8rem;

color: #1d1d1d;

padding-left: 0.21rem;

margin-top: -0.2rem;

}

.khzqinner {

color: #005fc9;

}

.khzq {

border-bottom: 0.04rem solid #005fc9;

height: 0.78rem;

display: inline-block;

padding-left: 0.15rem;

}

.divWrap {

background-color: #ffffff;

display: flex;

color: #2c2c2c;

font-size: 0.3rem;

justify-content: space-between;

align-items: center;

height: 0.89rem;

line-height: 0.89rem;

padding-left: 0.32rem;

padding-right: 0.4rem;

}

.noticeDiv {

width: 7.11rem;

height: 2.88rem;

margin: 0 auto;

margin-top: 0.3rem;

border-radius: 0.1rem;

background-color:#ffffff;

padding-top: 0.31rem;

padding-bottom: 0.35rem;

}

.hpVertical {

width: 6.48rem;

height: 1px;

opacity: 1;

background: #d2d2d2;

margin: 0 auto;

}

.divTitle {

opacity: 1;

font-size: 0.30rem;

font-weight: 400;

text-align: left;

color: #2c2c2c;

line-height: 0.60rem;

padding-left: 0.28rem;

}

.divContent {

/* width: 6.56rem; */

height: 1.73rem;

opacity: 1;

font-size: 0.30rem;

font-weight: 400;

text-align: left;

color: #727272;

line-height: 0.48rem;

padding-left: 0.28rem;

padding-right: 0.27rem;

}

.allDiv {

width: 7.11rem;

margin: 0 auto;

margin-top: 0.3rem;

border-radius: 0.1rem;

background-color:#ffffff;

}

5. 功能实现

对照接口可以看到，我们请求是POST方法，请求数据包含 pageNum和pageSize，而获取到的数据很多，我们可以只使用title content即可。

（1）定义全局变量

var pageNum = 1; //默认是从第一页开始访问

var pageSize = pageSizeGlobal; //默认一页访问的条数

var isMore = false; //控制翻页

getList(pageNum, pageSize);

（2） 编写方法，获取页面初始数据：

// 获取数据列表函数

function getList(pageNum, pageSize) {

console.log(“getlist”)

$.ajax({

type: “post”,

url: urlGlobal + “/api/h5/sys/notice/self/page”,

async: true,

dataType: “json”,//后台返回值类型

contentType: “application/json;charset=utf-8”, //如果提交的是json数据类型，则必须有此参数,表示提交的数据类型

async: false,//异步请求

data: JSON.stringify({

pageNum: pageNum,

pageSize: pageSize,

}),

headers: { ‘Authorization’: 'Bearer ’ + window.localStorage.getItem(“token”) },

success: function (data) {

if (data.code === 200) {

//做分页的特殊处理

console.log(data)

total = data.data.totalCount; //总

pades = data.data.totalPage; //总页数

//isMore,当不是最后一页的时候，为ture,若是最后一页，则为false

if (data.data.currPage < data.data.totalPage) {

isMore = true;

}

if (data.data.currPage === data.data.totalPage) {

isMore = false;

}

//如果总个数===0，做暂无数据的处理。

if (data.data.totalCount == 0) {

//需要重新清空数据再填入

$(“#allContent”).empty();

$(“#allContent”).append(“暂无内容”);

} else {

for (var i = 0; i < data.data.list.length; i++) {

$(“#allContent”).append(strlistDom(data.data.list[i]))

}

//当前是最后一页的时候增加全部加载完毕的提示语

if (data.data.currPage === data.data.totalPage) {

$(“#allContent”).append(“

数据加载完毕

”);

}

}

}else {

alertGlobal(data.message, 3000, true)

}

}

});

}

（3）测试接口是否已通

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取

解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取

[外链图片转存中…(img-LOWVz6FS-1712247960559)]

[外链图片转存中…(img-IoC6Epyv-1712247960560)]

[外链图片转存中…(img-X7Wl8QZm-1712247960560)]

[外链图片转存中…(img-GwEt1FIp-1712247960561)]