H5页面开发实战经验-CSDN博客

本文链接：https://blog.csdn.net/weixin_45479634/article/details/100560262

关于h5页面的一些个人理解

首先对于前端菜鸟来说，拿到项目说让做H5页面时，我对H5的概念纠结了很久。上网查资料说是用H5语言做的页面，又或者是微信公众号上的很漂亮的图片，后来我才知道领导说的H5页面时指部署在服务上的网页，可以通过调用地址来展示的H5页面，这种网页一般是少量的几个界面，不会太多。

使用jsp文件和html、css、js文件的区别

刚到公司的时候接触的一直是jsp文件写的是jQuery(不得不吐槽真的太老了，期待公司换框架)，使用jsp文件写页面也可以部署在服务满足条件，但是在网页跳转的时候就遇到一个问题，由于jsp类似于java环境，页面跳转的时候需要后端给我写接口，实在太麻烦，请教公司前辈后，决定使用html结合js、css的方式做H5，跳转页面的时候直接写需要跳转的html文件路径就可以了，这个问题到这里就顺利解决了。

引用JQuery插件的使用一定要注意

jQuery插件在引用的时候是有顺序的，对的!!!**一定要注意！！**在使用任何基于jQuery的插件的时候，都要首先引用插件jQuery-xxx.min.js。
在运行的时候遇到这种问题就要考虑一下插件顺序是否引用正确。
在这里插入图片描述
正确的顺序像下面这样。

<script src="plugin/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="plugin/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

swiper插件的使用

swiper确实是个挺好的轮播的插件，但是我在使用中也是遇到了不少坑。总结如下：

1、关于样式问题

开始使用swiper的时候，按照swiper提供的教程操作完成后，应该轮播的图片没有轮播而是并排显示在页面上。找个很多原因，最后发现是样式问题。
好像是我没有给swiper定义宽度和高度，最后网上码了一段样式放上去竟然好了。
我就不放代码了，你们如果有同样问题可以参考一下。

2、关于给动态加载出来的图片轮播问题

本地图片加轮播可能按照教程操作就可以出来，而我做的偏偏是给动态加载出来的图片添加轮播，而且还有更复杂的模拟遥控器的按键侦听（后面会说到）。上面解决了样式问题能按照正确格式展示图片，但是加载出来的数据并不能进行轮播，查了很多资料，然后我添加了这两句话好使了，具体什么原理我不细说了，好像是由于图片是动态加载出来的，需要监听数据变化（说的不够准确，自行百度嘻嘻）。

 observer:true,
 observeParents:true,

3、图片点击后就不再继续轮播了的问题

当你也遇到这个问题的时候，听我的加上这段代码，什么你觉得可能不好使，我不要你觉得我只要我觉得，听我的没问题。

 autoplay:{
disableOnInteraction: false,//点击图片之后仍然可以自动播放
delay:2000
},

4、图片不能无限循环轮播的问题

写到这里我都快哭了，这个项目里我到底都经历了什么，我太难了，就没有一个地方顺利的？
还是因为图片是动态加载的原因（我恨）！！和同事聊天的时候顺便让他帮我改了。
具体加了这句话：

 onSlideChangeEnd: function(swiper){
 	swiper.update();
	 mySwiper.startAutoplay();
    mySwiper.reLoop();
   },

这段话你们可以试试，不保证好使哈哈。因为加载数据时使用的是ajax异步调取数据，所以轮播在加载的时候图片可能还没有加载出来，就绑定不到元素。给swiper方法设置一个延时就好了。

关于 rem布局

第一次使用rem布局做手机端界面，查了很多资料。下面我把我使用的方法贴出来供大家参考。

方法一

其中3.75对应产品给我的设计图宽度。你唯一需要改的就是这里，把这里改成 “你的UI设计图宽度/100”，以后在布局的时候px转rem直接除以100就好了，很好计算的。

    var html = document.getElementsByTagName("html")[0]; /*获取标签元素<html>*/
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth; /*获取设备的宽度  ||后为兼容IE低版本写法*/
    html.style.fontSize = oWidth /3.75 + "px"; /*设置根元素<html>字体大小   计算出的值 就相当于1rem;为什么？ 这就是rem单位的规定 1rem就等于根元素<html>字体大小*/

方法二

另一种方法是使用媒体查询的方法，把下面代码放到页面中就可以实现了。计算的时候是 rem=px/10;

@media (device-width: 320px) {
  html {
    font-size: 8.5333px;
  }
}
@media (device-width: 360px) {
  html {
    font-size: 9.6px;
  }
}
@media (device-width: 375px) {
  html {
    font-size: 10px;
  }
}
@media (device-width: 384px) {
  html {
    font-size: 10.24px;
  }
}
@media (device-width: 412px) {
  html {
    font-size: 10.9867px;
  }
}
@media (device-width: 414px) {
  html {
    font-size: 11.04px;
  }
}
@media (device-width: 480px) {
  html {
    font-size: 12.8px;
  }
}
body { background: #f6f6f6; }
body .component-wrap { max-width: 37.5rem; padding: 0; margin: 0 auto;  }

听我的，用它！！！！

关于文字省略号

一个简单的方法：

.te { white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }

只要存放文字的容器有确定的宽度，你再给它加上这个样式你就是王者，听我的！！
具体效果如下图：
在这里插入图片描述

提取富文本里面纯文本

话不多说，直接上代码，亲测有效的方法：

function getSimpleText(html){
    var re1 = new RegExp("<.+?>","g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
    var msg = html.replace(re1,'');//执行替换成空字符
    return msg;
}

获取接口传参

直接上代码吧，不想多说啥了：这个方法的参数就是你接口的传参变量名，具体原理我也不明白，应该是正则表达式吧。

//获取接口传参
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}