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 事件有延遲致使的，沒找到根本緣由，若是有更好的辦法，麻煩評論區一塊兒討論)