...01从一个简单页面带你体验H5开发~从静态页面到调接口手把手教学整个...
发布网友
发布时间：2024-10-23 15:40
共1个回答
热心网友
时间：2024-11-06 09:40
好吧公司涉猎范围确实不少,接下来简单介绍一下接触到的H5，皮毛皮毛．
首先需要知道，前端开发必须的一些工具页面：
（1）原型设计稿（用于了解系统功能）--->??产品经理
（2）UI设计稿（用于进行严格的页面布局和样式开发）--->UI设计
（3）接口文档（前后端联调，字段定义的依据）--->后端开发
（4）测试文档（修改指给的bug）--->?测试
1.首先来看看我们的目标页面和UI设计稿大概了解了页面功能：列表显示数据！
再详细一点：加载页面后，根据后端返回的数据逐条渲染，显示数据
那让我们开始吧
2.首先建文件一般在项目工程文件中，直接在总目录下新建页面notice.html,同时在css文件下新建notice.css对于页面需要使用到的图片，可以放在images下新建文件夹notice里。Js文件中一般包含通用的代码，common文件夹下一般是通用的页面组件，如header.html
3.写notice.html静态页面样式<head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><linkhref="./css/notice.css"rel="stylesheet"type="text/css"><linkrel="import"href="./common/header.html"id="page1"/><linkrel="stylesheet"href="./css/mobileSelect.css"><scriptsrc="./js/jquery-3.3.1.min.js"></script><scriptsrc="./js/config.js"></script><linkrel="stylesheet"href="https://cdn.staticfile.org/-bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/-bootstrap/3.3.7/js/bootstrap.min.js"></script><title>通知</title><scripttype='text/javascript'>window.onload=function(){/*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.1rem等等*/};$(document).ready(function(){getRem(750,100)$('.top').load('./common/header.html');});window.onresize=function(){getRem(750,100)};functiongetRem(pwidth,prem){varhtml=document.getElementsByTagName("html")[0];varoWidth=document.body.clientWidth||document.documentElement.clientWidth;html.style.fontSize=oWidth/pwidth*prem+"px";}</script></head><divclass='top'></div><divid="index-mask"class="index-mask"title="通知-首页"><divclass="dqkhzq"><spanclass="khzq">当前考核周期：</span></div><divclass="allContent"id="allContent"></div><divclass="noticeDiv"><divclass="divTitle">标题内容内容</div><divclass="divContent"id="content"style="padding-right:0.4rem;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></div><divclass="noticeDiv"><divclass="divTitle">标题内容内容</div><divclass="divContent"id="content"style="padding-right:0.4rem;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></div></div></body>4.对照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.04remsolid#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.rem;line-height:0.rem;padding-left:0.32rem;padding-right:0.4rem;}.noticeDiv{width:7.11rem;height:2.88rem;margin:0auto;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:0auto;}.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:0auto;margin-top:0.3rem;border-radius:0.1rem;background-color:#ffffff;}功能实现
对照接口可以看到，我们请求是POST方法，请求数据包含?pageNum和pageSize，而获取到的数据很多，我们可以只使用titlecontent即可。
（1）定义全局变量
varpageSize=pageSizeGlobal;//默认一页访问的条数varisMore=false;//控制翻页getList(pageNum,pageSize);（2）?编写方法，获取页面初始数据：
functiongetList(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,若是最后一页，则为falseif(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(vari=0;i<data.data.list.length;i++){$("#allContent").append(strlistDom(data.data.list[i]))}//当前是最后一页的时候增加全部加载完毕的提示语if(data.data.currPage===data.data.totalPage){$("#allContent").append("<divstyle='margin-top:0.2rem;margin-bottom:0.4rem;text-align:center;color:#999999;font-size:0.3rem;'>数据加载完毕</div>");}}}else{alertGlobal(data.message,3000,true)}}});}（3）测试接口是否已通
打开浏览器开发者工具F12在network-XHR可以看到请求情况为200，并且返回了两条数据。
（4）将接口返回的数据显示到页面上。
我们刚才在HTML中写死了假数据，但是拿到接口后的数据需要逐条渲染到页面上面，因此我们注释掉之前的假数据部分，并添加一个id和class都为allContent的Div方便我们接下来渲染数据。
<!--<divclass="noticeDiv"><divclass="divTitle">标题内容内容</div><divclass="divContent"id="content"style="padding-right:0.4rem;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></div>-->其实??$("#allContent").append(strlistDom(data.data.list[i]))?就是在做这件事情
varstr="<divclass='noticeDiv'>"+"<divclass='divTitle'>"+data.title+"</div>"+"<divclass='divContent'id='content'style='padding-right:0.4rem;'>"+data.content+"</div></div>"returnstr;}在strListDom函数中拼接刚才注释的部分代码，并替换掉文字为接口返回的数据字段。
append就是把每次拿到的数据渲染到allContent中去
（5）页面滚动翻页
$(window).scroll(function(){$(".content_1").each(function(){varscrollTop=this.scrollTop||document.body.scrollTop||document.documentElement.scrollTop;if(scrollTop+window.innerHeight+20>=this.offsetHeight){if(isMore){isMore=false;pageNum++;year=$("#yearInit").val()?yearInitGlobal:$("#year").html();jidu=$("#jiduInit").val()?quarterInitGlobal:getQuarterGlobal($("#jidu").html());getList(year,jidu,pageNum,pageSize)}}});});至此，我们就完成了这个简单的通知列表功能，是不是很清晰啦！效果如下
下一节，我们将讲解一个稍微复杂的包含查询的功能，不过其实大同小异，思路也是一样的
原文：https://juejin.cn/post/70992639085697124