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

最新推荐文章于 2023-08-15 08:34:01 发布

小白Rachel

最新推荐文章于 2023-08-15 08:34:01 发布

阅读量5.9k

点赞数 1

分类专栏：前端工作日记随笔文章标签： html5 css javascript ajax 前端

本文链接：https://blog.csdn.net/Sabrina_cc/article/details/119865234

版权

前端工作日记随笔专栏收录该内容

21 篇文章 10 订阅

订阅专栏

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

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

（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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="./css/notice.css" rel="stylesheet" type="text/css">
  <link rel="import" href="./common/header.html" id="page1" />
  <link rel="stylesheet" href="./css/mobileSelect.css">
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/config.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <title>通知</title>
  <script type='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)
    };
    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";
    }
  </script>
</head>

<body>
  <div class='top'></div>
  <div id="index-mask" class="index-mask" title="通知-首页">
    <div class="dqkhzq">
      <span class="khzq">当前考核周期：</span>
    </div>
    <div class="allContent" id="allContent"></div>
    <div class="noticeDiv">
      <div class="divTitle">标题内容内容</div>
      <div class="divContent"  id="content" style="padding-right:0.4rem;">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      </div>
    </div>
<div class="noticeDiv">
      <div class="divTitle">标题内容内容</div>
      <div class="divContent"  id="content" style="padding-right:0.4rem;">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      </div>
    </div>
  </div>
</body>

４. 对照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("<div style='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方便我们接下来渲染数据。

<div class="allContent" id="allContent"></div>
<!-- <div class="noticeDiv">
    <div class="divTitle">标题内容内容</div>
    <div class="divContent"  id="content" style="padding-right:0.4rem;">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
</div> -->

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

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

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

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

（5）页面滚动翻页

//当滚动条滚动的时候，进行数据分页加载
  $(window).scroll(function () {
    $(".content_1").each(function () {
      var scrollTop = 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)
        }
      }
    });
  });

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

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

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

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

小白Rachel

关注

1
点赞
踩
46

收藏

觉得还不错? 一键收藏
打赏
2
评论
【H5开发】01从一个简单页面带你体验H5开发 ~ 从静态页面到调接口手把手教学整个页面实现过程

听云与明月窃语，首先需要知道，前端开发必须的一些工具页面：（1）原型设计稿（用于了解系统功能）---> 产品经理（2）UI设计稿（用于进行严格的页面布局和样式开发）--->UI设计（3）接口文档（前后端联调，字段定义的依据）---> 后端开发（4）测试文档（修改指给的bug）---> 测试1. 首先来看看我们的目标页面和UI设计稿大概了解了页面功能：列表显示数据！再详细一点：加载页面后，根据后端返回的数据逐条渲染，显示数据那让我...
复制链接

扫一扫