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代码的转义：

/**/