前端js、H5移动端开发知识点、注意事项、兼容问题、采坑总结

踩坑

1. 列表滚动，在部分 ios 手机上被截断，解决办法
   .small-nav-outer{
   -webkit-overflow-scrolling: touch;
   overflow-y: scroll;
   overflow-x: hidden;
   }
   .small-nav-inner{
   min-height: calc(100% + 1px);
   }
   在父元素的内部添加一个包裹的div，.small-nav-inner，让他的高度高于父元素1px，然后给父元素添加 -webkit-overflow-scrolling: touch;属性，这样可以令一开始的时候就添加一个scrollView。
   如此，ios上的兼容性问题得以解决。
2. 部分旧版ios不支持scrollTo , 可以使用scrollTop=值，或者 scrollIntoView()
3. 部分旧版ios监控scroll事件，非常迟缓，不灵活，可以结合touchmove使用
4. 注意刘海屏兼容！有的机器有上刘海，有的机器有底部刘海，ios 可以直接配置meta,然后使用env,
   如：margin-bottom: env(safe-area-inset-bottom);
   安卓机只能写死个估计值啦，80-110px，或者app的客户端告诉我们，或者通过window.devicePixelRatio 按比例动态计算一个（也是估计值）
5. vue 一个v-for循环下，img src绑定的路径变量无法渲染
   因为指向本地‘…/…/’的相对路径，webpack不识别，
   解决办法：绑定class变量，图片用做背景展示
6. 安卓机按钮元素text 偏下，无法上下居中
   解决办法：1、设置line-height大于height，往下移，当然不能大太多，否则ios会靠上
   2、不设置height，line-height，使用padding撑开
7. 微信分享链接的url或授权回调的url丢参数，部分参数会被截取掉用&拼接的第二、第三和之后的参数，#后边的参数也可能会丢
   解决办法：1、使用encodeURIComponent、decodeURIComponent转码
   2、改用history模式，history模式没有#号
8. node 不要安装最新版，要安装稳定版，否则很多插件会存在版本不支持的问题
9. 多页面多入口的项目，单个模块采用history模式，devServer下要配置historyApiFallback
10. 可以在app以外打开的连接跳转，最好做域名非法校验，防止被注入外跳，
    例如可以比较即将跳转的连接中是否有域名，域名跟location的域名是否相同
    let rg = /(http[s]?:\/\/([\w-]+.([A-Za-z0-9-])+.([a-z\.]{2,6})))/gi； if(url.match(re)[0] != location.origin){}
11. 还有一种外跳是@形式的，如：https://www.cnblogs.com@baidu.com， 复制到浏览器试试就懂啦
12. z-index 不好用时可以使translateZ，用法 transform: translateZ(1px);

开发中常用知识点

1. getBoundingClientRect ：
   document.querySelector(’.list’).getBoundingClientRect().top
   某个元素相对可视区的距离，含top,left,bottom,right属性

2. window.scrollTo：滚动到指定位置,
   用法：window.scrollTo({top,left,behavior})

3. background-size: contain 和100% 的区别
   contain:图片不变形不隐藏，以 height/weight 中最短边为标准展示
   100%：以最长边拉伸图片，可能短边会展示不全；
   background 属性可以全部拼在一起写
   例：background: #00FF00 url(bgimage.gif) no-repeat top center / 30px 30px;

4. background-attachment有三个值，
   scroll是默认值，背景图像会随着页面其余部分的滚动而移动。
   fixed当页面的其余部分滚动时，背景图像不会移动。视差滚动就可以用这个去实现
   inherit规定应该从父元素继承 background-attachment 属性的设置。

5. flex布局很重要，
   flex-direction，justify-content，align-items，flex-wrap最好背下来

6. 防止手机中网页放大和缩小，设置meta中的viewport，
   user-scalable=0,或，user-scalable=no 都可以，
   eg：<meta name="viewport" content="user-scalable=0" />
   常用设置：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

7. 标签调起拨打手机号：<a href=”tel:110120119”>可以实现手机拨号</a>

8. 标签调起发送邮件：<a href=”mailto:ming.zhou@nowcoder.com”>发送邮件</a>

9. 字体抗锯齿渲染：-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; ,使字体看起来会更清晰舒服

10. vue mixins 混入：mixins: [mixin], 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能，data/生命周期函数/methods函数等都可以混入

11. 尽量减少if-else嵌套，适当使用array.find，array.findIndex，array.every等方法

暂时贴出这么多，有想到其他的欢迎留言，我们一起补充 ……^^