devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：花生_TL007 | 2024-03-16 05:50: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静态页面样式

  1. <head>
  2.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.   <link href="./css/notice.css" rel="stylesheet" type="text/css">
  4.   <link rel="import" href="./common/header.html" id="page1" />
  5.   <link rel="stylesheet" href="./css/mobileSelect.css">
  6.   <script src="./js/jquery-3.3.1.min.js"></script>
  7.   <script src="./js/config.js"></script>
  8.   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9.   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10.   <title>通知</title>
  11.   <script type='text/javascript'>
  12.     window.onload = function () {
  13.       /*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
  14.         为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.1rem等等*/
  15.     };
  16.     $(document).ready(function () {
  17.       getRem(750, 100)
  18.       $('.top').load('./common/header.html');
  19.     });
  20.     window.onresize = function () {
  21.       getRem(750, 100)
  22.     };
  23.     function getRem(pwidth, prem) {
  24.       var html = document.getElementsByTagName("html")[0];
  25.       var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
  26.       html.style.fontSize = oWidth / pwidth * prem + "px";
  27.     }
  28.   </script>
  29. </head>
  1. <body>
  2.   <div class='top'></div>
  3.   <div id="index-mask" class="index-mask" title="通知-首页">
  4.     <div class="dqkhzq">
  5.       <span class="khzq">当前考核周期：</span>
  6.     </div>
  7.     <div class="allContent" id="allContent"></div>
  8.     <div class="noticeDiv">
  9.       <div class="divTitle">标题内容内容</div>
  10.       <div class="divContent"  id="content" style="padding-right:0.4rem;">
  11.         内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  12.       </div>
  13.     </div>
  14. <div class="noticeDiv">
  15.       <div class="divTitle">标题内容内容</div>
  16.       <div class="divContent"  id="content" style="padding-right:0.4rem;">
  17.         内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  18.       </div>
  19.     </div>
  20.   </div>
  21. </body>

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

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   text-decoration: none;
  5. }
  6. body {
  7.   font-size: 10px;
  8.   -webkit-text-size-adjust: none;
  9.   background-color: #f4f4f4 !important;
  10.   font-family: '微软雅黑';
  11. }
  12. .dqkhzq {
  13.   height: 0.8rem;
  14.   background-color: #ffffff;
  15.   font-size: 0.3rem;
  16.   font-weight: 400;
  17.   line-height: 0.8rem;
  18.   color: #1d1d1d;
  19.   padding-left: 0.21rem;
  20.   margin-top: -0.2rem;
  21. }
  22. .khzqinner {
  23.   color: #005fc9;
  24. }
  25. .khzq {
  26.   border-bottom: 0.04rem solid #005fc9;
  27.   height: 0.78rem;
  28.   display: inline-block;
  29.   padding-left: 0.15rem;
  30. }
  31. .divWrap {
  32.   background-color: #ffffff;
  33.   display: flex;
  34.   color: #2c2c2c;
  35.   font-size: 0.3rem;
  36.   justify-content: space-between;
  37.   align-items: center;
  38.   height: 0.89rem;
  39.   line-height: 0.89rem;
  40.   padding-left: 0.32rem;
  41.   padding-right: 0.4rem;
  42. }
  43. .noticeDiv {
  44.   width: 7.11rem;
  45.   height: 2.88rem;
  46.   margin: 0 auto;
  47.   margin-top: 0.3rem;
  48.   border-radius: 0.1rem;
  49.   background-color:#ffffff;
  50.   padding-top: 0.31rem;
  51.   padding-bottom: 0.35rem;
  52. } 
  53. .hpVertical {
  54.   width: 6.48rem;
  55.   height: 1px;
  56.   opacity: 1;
  57.   background: #d2d2d2;
  58.   margin: 0 auto;
  59. }
  60. .divTitle {
  61.   opacity: 1;
  62.   font-size: 0.30rem;
  63.   font-weight: 400;
  64.   text-align: left;
  65.   color: #2c2c2c;
  66.   line-height: 0.60rem;
  67.   padding-left: 0.28rem;
  68. }
  69. .divContent {
  70.   /* width: 6.56rem; */
  71.   height: 1.73rem;
  72.   opacity: 1;
  73.   font-size: 0.30rem;
  74.   font-weight: 400;
  75.   text-align: left;
  76.   color: #727272;
  77.   line-height: 0.48rem;
  78.   padding-left: 0.28rem;
  79.   padding-right: 0.27rem;
  80. }
  81. .allDiv {
  82.   width: 7.11rem;
  83.   margin: 0 auto;
  84.   margin-top: 0.3rem;
  85.   border-radius: 0.1rem;
  86.   background-color:#ffffff;
  87. }

5. 功能实现

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

（1）定义全局变量

  1. var pageNum = 1; //默认是从第一页开始访问
  2. var pageSize = pageSizeGlobal; //默认一页访问的条数
  3. var isMore = false;  //控制翻页
  4. getList(pageNum, pageSize);

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

  1. // 获取数据列表函数
  2.   function getList(pageNum, pageSize) {
  3.     console.log("getlist")
  4.     $.ajax({
  5.       type: "post",
  6.       url: urlGlobal + "/api/h5/sys/notice/self/page",
  7.       async: true,
  8.       dataType: "json",//后台返回值类型
  9.       contentType: "application/json;charset=utf-8", //如果提交的是json数据类型，则必须有此参数,表示提交的数据类型 
  10.       async: false,//异步请求
  11.       data: JSON.stringify({
  12.         pageNum: pageNum,
  13.         pageSize: pageSize,
  14.       }),
  15.       headers: { 'Authorization': 'Bearer ' + window.localStorage.getItem("token") },
  16.       success: function (data) {
  17.         if (data.code === 200) {
  18.           //做分页的特殊处理
  19.           console.log(data)
  20.           total = data.data.totalCount; //总
  21.           pades = data.data.totalPage; //总页数
  22.           //isMore,当不是最后一页的时候，为ture,若是最后一页，则为false
  23.           if (data.data.currPage < data.data.totalPage) {
  24.             isMore = true;
  25.           }
  26.           if (data.data.currPage === data.data.totalPage) {
  27.             isMore = false;
  28.           }
  29.           //如果总个数===0，做暂无数据的处理。
  30.           if (data.data.totalCount == 0) {
  31.             //需要重新清空数据再填入
  32.             $("#allContent").empty();
  33.             $("#allContent").append("暂无内容");
  34.           } else {
  35.             for (var i = 0; i < data.data.list.length; i++) {                                      
  36.                $("#allContent").append(strlistDom(data.data.list[i]))
  37.             }
  38.             //当前是最后一页的时候增加全部加载完毕的提示语
  39.             if (data.data.currPage === data.data.totalPage) {
  40.                 $("#allContent").append("<div style='margin-top:0.2rem;margin-bottom:0.4rem;text-align:center;color: #999999;font-size:0.3rem;'>数据加载完毕</div>");
  41.               }
  42.           }
  43.         }else {
  44.           alertGlobal(data.message, 3000, true)
  45.         }
  46.       }
  47.     });
  48.   }

 （3）测试接口是否已通

打开浏览器开发者工具F12在network-XHR可以看到请求情况为200，并且返回了两条数据。

 （4）将接口返回的数据显示到页面上。

我们刚才在HTML中写死了假数据，但是拿到接口后的数据需要逐条渲染到页面上面，因此我们注释掉之前的假数据部分，并添加一个id和class都为allContent的Div方便我们接下来渲染数据。

  1. <div class="allContent" id="allContent"></div>
  2. <!-- <div class="noticeDiv">
  3.     <div class="divTitle">标题内容内容</div>
  4.     <div class="divContent"  id="content" style="padding-right:0.4rem;">
  5.         内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  6.     </div>
  7. </div> -->

 其实   $("#allContent").append(strlistDom(data.data.list[i]))  就是在做这件事情

  1.  function strlistDom(data) {
  2.     var str = "<div class='noticeDiv'>"+
  3.       "<div class='divTitle'>"+ data.title + "</div>" +
  4.       "<div class='divContent'  id='content' style='padding-right:0.4rem;'>" + data.content + "</div></div>"
  5.     return str;
  6.   }

 在strListDom函数中拼接刚才注释的部分代码，并替换掉文字为 接口返回的数据字段。

append就是把每次拿到的数据渲染到allContent中去

（5）页面滚动翻页

  1. //当滚动条滚动的时候，进行数据分页加载
  2.   $(window).scroll(function () {
  3.     $(".content_1").each(function () {
  4.       var scrollTop = this.scrollTop || document.body.scrollTop || document.documentElement.scrollTop;
  5.       if (scrollTop + window.innerHeight + 20 >= this.offsetHeight) {
  6.         if (isMore) {
  7.           isMore = false;
  8.           pageNum++;
  9.           year = $("#yearInit").val() ? yearInitGlobal : $("#year").html();
  10.           jidu = $("#jiduInit").val() ? quarterInitGlobal : getQuarterGlobal($("#jidu").html());
  11.           getList(year, jidu, pageNum, pageSize)
  12.         }
  13.       }
  14.     });
  15.   });

 至此，我们就完成了这个简单的通知列表功能，是不是很清晰啦！效果如下

 下一节，我们将讲解一个稍微复杂的包含查询的功能，不过其实大同小异，思路也是一样的

【H5开发】从一个简单页面带你体验H5开发 ~ 从静态页面到调接口手把手教学整个页面实现过程 https://blog.csdn.net/Sabrina_cc/article/details/119865234

【H5开发】02手把手带你开发H5列表页面 ~ 包含查询、重置、提交功能https://blog.csdn.net/Sabrina_cc/article/details/119888243

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/247478
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号