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

最新推荐文章于 2024-08-27 12:05:51 发布

cwcnl25131

最新推荐文章于 2024-08-27 12:05:51 发布

阅读量457

点赞数 4

分类专栏：程序员文章标签：前端 javascript html

本文链接：https://blog.csdn.net/cwcnl25131/article/details/138903159

版权

程序员专栏收录该内容

258 篇文章 0 订阅

订阅专栏

  /*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";

}

<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="divTitle">标题内容内容</div>

  <div class="divContent"  id="content" style="padding-right:0.4rem;">

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

  </div>

</div>




 ４. 对照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\. 功能实现



![](https://img-blog.csdnimg.cn/20210823144704959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhYnJpbmFfY2M=,size_16,color_FFFFFF,t_70)



![](https://img-blog.csdnimg.cn/20210823144534454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhYnJpbmFfY2M=,size_16,color_FFFFFF,t_70)



对照接口可以看到，我们请求是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）测试接口是否已通



#  最后

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

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

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

![img](https://img-blog.csdnimg.cn/img_convert/b9b675de0b2c12751c6fbebd60078565.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/acdbfb17203ca4fbbaf41361eaa0785c.png)

![](https://img-blog.csdnimg.cn/img_convert/499eec0d8c02f24e935bf1782bf75eea.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

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

[外链图片转存中...(img-WcycuDJZ-1715745910970)]

[外链图片转存中...(img-PYw4mbts-1715745910971)]

[外链图片转存中...(img-2HDfs1Gc-1715745910971)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

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

cwcnl25131

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录