移动端开发经验总结
2021-03-05 本文已影响0人
JackfengGG
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
/>
