H5开发中的一些坑

最近因业务需要开发了一个活动营销系统,门户用到了thymeleaf和H5,开发过程中踩了不少坑。在此记录下来,一是方便自己总结回顾,二是能给遇到相似问题的小伙伴提供点参考。

遇到的主要问题有4个,此处未做分类,只是简单罗列:

1.移动端设备种类繁多,兼容性是遇到最多的也是最需要解决好的问题。自己尚无一套完整的解决方案,还在探索学习中。

2.移动端iOS系统上下滑动翻页卡死问题:

  • 现象:在Android系统上运行的很正常的翻页功能,到了iOS系统的手机上完全失效,而且页面卡死,不能滑动
  • 原因:移动端翻页使用的touch事件导致页面滑动时间被阻塞。
  • 解决办法:首先去掉touchstart、touchmove或touchend等事件中的e.preventDefault(); 其次将touch事件的作用域设定在需要翻页的标签上、而非整个document。
  • 参考博客:https://blog.csdn.net/qq_36167454/article/details/53431445

3.http的链接在腾讯系的社交产品上分享、查看、使用会被拦截和重发:

  • 现象:开发版本的系统因为url是未做认证的http链接地址,测试中发现我的任何一次点击都会出现重发,在不同移动端上重发的时间间隔还不一样,小米手机是间隔一分钟重发一次,华为和苹果手机是立即重发。
  • 原因:腾讯系的社交产品(特别是微信)会对安全性未知的链接做安全扫描,即拦截后再释放,导致请求发送两次【未联系腾讯产品开发的小伙伴做验证】
  • 解决办法:使用安全域名、使用安全域名、使用安全域名(https)
  • 参考博客:https://blog.csdn.net/gotohomebye/article/details/78508741

4.比较丰富的矢量图库

  • 阿里矢量图库:http://www.iconfont.cn/

5.JS代码识别H5是不是在微信中,代码如下:

function is_weixn(){
var atwx = true;
var atWeixn = navigator.userAgent.toLowerCase();
if (atWeixn.match(/MicroMessenger/i)=='micromessenger') {
return atwx;
}
atwx = false;
return atwx;
}

6.thymeleaf页面中js代码的转义:

/**/



你可能感兴趣的:(开发总结)