移动端开发经验总结

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系统问题:inputdisable默认样式

  • 问题现象: 输入框的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
 this.setState({height})}
  source={{html: HTML}}
/>

//2. 禁止安卓使用硬件加速

你可能感兴趣的:(移动端开发经验总结)