2021 年移动端的开发的几点经验

1. 图标和文字居中

文字和图标不能很好的居中css

实际上是作不到彻底的居中的，能够跟设计师沟通图标位置，让设计师调整一下 svg 里面的居中，在必定接受范围。react

延伸阅读字体构造与文字垂直居中方案探索ios

2. react 事件冒泡

移动端小屏幕下，元素堆叠起来，事件冒泡出现概率大不少。git

3.wx.config

跳转到须要使用到 wx.config 接口页面的时候，使用 window.location 取代 react-router 的 push、replace 等github

4. wx.previewImage

微信处理图片的能力一部分继承自操做系统，在不一样机型，不一样系统下表现不同。预览的图片的大小，尺寸均可能致使图片预览失败（小米和华为出现概率很高）。ajax

限制图片大小和尺寸（尺寸比较难限制）
使用第三方实现预览图片

5.微信浮窗图标

根据当前页面使用 JS-SDK 时注入的配置信息 wx.config 中的 appId 所对应的公众号的头像来展现的。若是页面没有使用 JS-SDK，则默认【浮窗】图标为灰色的“连接”形状。npm

6.修改当前页面的全局

在 global.css 全局设置了白色背景，有些特殊页面用了其余颜色的背景，不要修改 css,用下面方法更好。segmentfault

7.调试器不要打包进代码里面

用 cdn + 域名判断去加载调试，若是用 npm 包可能会被打包到代码里，增长代码大小。跨域

8. url 特殊字符跳转

推荐 url 跳转的参数使用 js-base64 转译浏览器

7. 批量取消 ajax

单页面应用中，常常出现这个路由页面还没请求完，就切换到下一个路由，上一个路由页面数据请求成功但页面销毁了，控制台可能就报错了。

请求：

布局组件：

9. css 禁止用户按住出现扫描二维码

元素加上 pointer-events: none; 属性
复制代码

10. iframe ios 14 出现跨域问题

11. iphone 刘海屏适配安全区域

其实微信浏览器 ios 自带适配，不过本身适配一下更好。 css适配iPhoneX屏幕安全区

12. react && 符号的判断

data 若是是 0 页面就会渲染成 0，而不是不渲染，因此必定要作严格真值判断。

13. 部分安卓手机 border 跟 radius 一块儿使用时，border不出现

14. react 17 和 ts 搭配使用

详情请看 => 细嚼慢咽 Typescript + React17 +Eslint + Git hook 工做流

15. 产品适老化

微信内设置字体放大，会致使页面布局错乱

ios(none 和 100%貌似都行): Android：未作

延伸阅读=> 设置微信字体大小引起的页面布局错乱问题

16. 增长依赖包升级频率

推荐每一个迭代，看看有没有 npm 包能够升级，能升尽可能升，否则你们都不升级，之后大版本就没人敢升级，最终成为代码屎山。

17. 部分安卓机，滚动条侧边会有一个黑点（多余的横向滚动条）。

18. 页面跳转后滚动条置顶

19. 手势返回的时候，弹框未关闭

history.push 页面并无销毁，上一个页面的弹框未关闭可能引起一些问题.最好每一个页面都关闭，或者使用全局一些方法去关闭。

antd 能够用Modal.destroyAll();

20. ios 返回页面不刷新

21. 部分andriod机后退ajax缓存处理

22 苹果手机相邻元素 onClick 事件快速点击问题

手机端：快速点击上面和下面文字（实际业务场景是相邻按钮），会出现连续点击上面的状况，下面文字的事件不触发（要很是快）。演示地址

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [tType, setT] = useState(false);
  const [bType, setB] = useState(false);
  const top = () => {
    console.log("这是上面的", tType);
    setT((state) => !state);
  };
  const bottom = () => {
    console.log("这下面的", bType);
    setB((state) => !state);
  };
  return (
    <div>
      <div className="pt20" onClick={top}>
        <div>这是上面的</div>
      </div>
      <div className="pt20" onClick={bottom}>
        <div>这下面的</div>
      </div>
    </div>
  );
}

复制代码

解决办法是把 onClick 事件换成 onTouchStart (怀疑是 onClick 事件有延迟致使的，没找到根本缘由，若是有更好的办法，麻烦评论区一块儿讨论)