移动端开发经验总结

1. ios上，用户点击输入框，键盘不响应

• 问题重现：财酷3.0，某个页面的某个输入框，点击输入，键盘不响应，而其它页面键盘响应正常。
• 问题排查：经排查，是因为该输入框绑定的聚焦事件中，执行了大量的js操作，阻塞了进程，导致键盘未及时响应，进而不响应。
• 解决方法：将该绑定的聚焦事件中的js操作设置一定的延迟时间，不阻塞键盘响应即可。这里的代码仍需优化，聚焦时js操作的时机是否合适？

2. ios/Andriod上，js中的alert, confirm,prompt不可用

• 问题重现：财酷4.0开发中，发现js中使用的上述方法不可用，在安卓中甚至会导致进程卡顿
• 问题排查：经排查，是因为webview中默认不可用
• 解决方法：natvie端重写这个3个方法支持，或者调用系统原生方法即可

3. 安卓上，css画圆发生变形

• 问题重现：css使用border-radius画圆时，postcss将宽高像素转成rem，在安卓上小圆发生变形，显示为椭圆（在安卓中会有此问题，ios正常）
• 问题排查：安卓上，px转rem后，虽然宽高均相同，但是显示出来的圆形宽比高多1px
• 解决方法：使用内联样式来写宽高，这样就不会被转成rem了。

4. iPhone 输入框失焦延时

• 问题重现: 输入框聚焦后弹出软键盘，未输入信息和未关闭软键盘，直接点击回复按钮弹出alert提示框，不同iphone版本出现以下两种情况：
  1、软键盘未关闭还能编辑，弹出框卡死不能点击。
  2、软键盘关闭，关闭alert弹出框后出现软键盘打开又关闭？
• 问题排查：经排查，输入框失焦和alert关闭会有一定的延时，两个混在一起导致。
• 解决方法：弹出alert提示框前添加延时，让输入框失焦完成后再弹出提示框。

5. iPhone上，锁屏几分钟之后，之前页面的能够点击现在不能点击了，页面出现了假死。

• 问题重现：iPhone上ios11.3系统，锁屏之后，之前页面的能够点击地方现在不能点击了，页面出现了假死。
• 问题排查：ios11.3支持了Web API：允许对事件支持被动模式，减少滚动屏幕的性能损耗和奔溃，document的touch事件监听添加passive配置，即是：{passive: true}，会永远不调用event.preventDefault()，导致页面不能点击，出现假死。
• 解决方法：使用新的fastclick.js文件就可以解决。

6. 安卓手机上，点击页面的输入框获取焦点，软键盘拉起，但是该输入框的位置往上移很远。

• 问题重现：安卓手机上，点击页面的时候获取焦点，软键盘拉起，但是该输入框的位置往上移很远，页面效果很差。
• 问题排查：安卓设计的时候，webview和软键盘不在同一个页面，前端这边监听不到页面resize事件，没有调用document.activeElement.scrollIntoViewIfNeeded(),把那个对应的输入框位置往下移
• 解决方法：安卓这边重新设计webview和软键盘在同一页面，拉起键盘的时候，使webview变小，我们这边设置浏览器窗口监听，具体代码是：

window.addEventListener('resize', function(){
    const formItems = ['INPUT', 'TEXTAREA'];
    const activeElTag = document.activeElement.tagName;
    formItems.forEach(function(item){
        if (activeElTag === item) {
            setTimeout(function(){
                // 若兼容pc使用scrollIntoView
                document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
    });
});

7. postcss-px2rem-dpr设置不转换rem不可用

• 问题重现：业务中有不需要转换为rem的场景，在css中设置/*px*/ 或者/*no*/无效，样式中的px依然会转换为rem，并不会生效
• 问题排查：经排查发现，是因为我们使用的css/less/sass-loader等插件，默认会删除样式中的注释，导致注释不可用。问题查见：webpack 中 postcss-px2rem 生产环境中注释失效
• 解决方法：在vue-loader配置中，设置outputStyle为expanded，这样就不会去删除样式中的注释。具体设置方法是对所有的css的loader设置如下：

   {
        loader: 'postcss/less/sass/less-loader',
        options: {
            sourceMap: options.sourceMap,
   +        outputStyle: 'expanded'
        }
    };

这期间遇到的一个问题是，当设置了outputStyle时，.postcssrc.js文件必须挪到最外层才会生效，这个是挺奇怪的，还没找到原因所在。

8. ios上，页面跳转至平台客服再返回，因拿不到NATIVE方法，导致请求没有传groupId，所有请求都报404.

• 问题重现：财酷4.0，iOS平台投诉页面进入平台客服后，点击返回，所有页面请求报404。
• 问题排查：经排查，因拿不到NATIVE的方法（iOS还没获取到webview上下文就已经给NATIVE注入对象了），导致请求没有传groupId。
• 解决方法：暴露一个方法给iOS让他在注入方法对象后再加载前端代码，（main.js中多包一层Function给native调用）。

9. webview中beforeUnload事件无法被触发.

• 问题重现：在compfas中想使用beforeUnload来触发leavePage的页面埋点，结果无效。
• 问题排查：经排查，在PC的file域中关闭或刷新都可以触发beforeUnload事件，放置在手机APP内调试的时候就无法触发，因为Android APP直接销毁activity而没有关闭webview。
• 解决方法：换个思路，通过修改redirect、toIndex和toUrl方法来调用leavePage埋点方法。

10. ios输入框类型出错（如input textarea）（不能输入内容）

• 问题重现：在全局中加入*{user-select: none}。
• 问题排查：由于在全局设置了不能复制内容的代码（*{user-select: none}),导致输入框类型的输入有问题（google浏览器的bug）。
• 解决方法：不要用通配符（*）设置在全局中，可将除输入框类型以外的加上{user-select: none},比如我放在了通用的css中reset.css,只包括了展示类的标签，不包括输入框类型的标签（input textarea）。

11. IOS下click事件失效

• 问题重现：在ios手机上，点击页面没有效果，不能进行跳转，Android手机正常。
• 问题排查：经排查，在ios手机上对于不是a或者button可点击的元素，需要给点击的目标元素加上一个样式cursor: pointer;。
• 解决方法：【代理元素】可以是【目标元素】的父级元素，document，body等，【目标元素】可以是任意标签，但是要设置cursor: pointer;
• 参考资料：https://blog.csdn.net/camillezj/article/details/78028847

12. IOS下，脚部按钮absolute定位，拉起键盘，按钮会将输入框盖住

• 问题重现：拉起键盘，absolute定位按钮挡住内容。
• 解决方法：经典解决方案：Sticky footers
• 参考资料：https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

13、android系统问题：去除input框聚焦时的外边框高亮

• 问题现象：input框聚焦时默认有一个高亮效果，提示用户当前焦点位置，有时候我们UI可能不需要这个高亮效果，或者这个高亮效果比较不美观，那么可以取消或者覆盖这个效果
• 解决方式：

input:focus,textarea:focus {
  outline: none; // 取消默认高亮样式
  border-color:#333;  // 设置聚焦样式
}

14、android系统问题：input的disable默认样式

• 问题现象： 输入框的disable默认样式是灰色的背景色，这个需要注意修改
• 解决方式：

input:disabled,
textarea:disabled {
    background: #fff;
    color: #000;
    opacity: 1;
    -webkit-text-fill-color: #000;
}

15、android问题：使用react-native-webView组件闪退

• 问题现象： A页面使用react-native-webView组件，在跳转B页面时三星手机发生闪退
• 解决方式：

//1. 属性中添加一个透明度  opacity: 0.99
<AutoHeightWebView
  style={{
    marginBottom: 100,
    opacity: 0.99
  }}
  onHeightUpdated={height => this.setState({height})}
  source={{html: HTML}}
/>

//2. 禁止安卓使用硬件加速
<WebView
  style={style}
  source={source}
  androidHardwareAccelerationDisabled
/>