Here are some lessons for mobile development in 2021

1. Center the icon and text

Text and ICONS don’t center well

In fact, it is not completely centered. You can communicate with the designer about the icon position and ask the designer to adjust the center in SVG to a certain acceptable range.

Extended reading font structure and text vertical center scheme exploration

2. The React event bubbles

With a small screen on the mobile end, elements stack up and events bubble up much more often.

3.wx.config

When jumping to the wx.config interface page, use window.location instead of react-router push, replace, etc

4. wx.previewImage

Wechat’s image processing ability is partly inherited from the operating system, and varies with different models and systems. The size and size of the image preview may lead to the failure of the image preview (Xiaomi and Huawei have a high probability of appearing).

Limit image size and dimensions (dimensions are harder to limit)
Use a third party to implement preview images

5. Wechat floating window icon

It is displayed according to the profile picture of the public number corresponding to appId in wx.config injected when the current page uses JS-SDK. If the page is not using JS-SDK, the default float window icon is a grey “link” shape.

6. Modify the global Settings of the current page

In global.css, the white background is set globally. Some special pages use a different color background. Do not modify the CSS.

7. Don’t package debuggers into code

Use CDN + domain name judgment to load debugging, if use NPM package may be packaged into the code, increase the code size.

8. Url special characters jump

Js-base64 translation is recommended for URL redirect parameters

7. Cancel Ajax in batches

In a single page application, it’s very common for this route page to switch to the next route before the request is complete, and the last route page has successfully requested data but the page has been destroyed, and the console may report an error.

Request:

Layout components:

9. The CSS forbids users to hold down and scan the QR code

Element with pointer-events: none; attributeCopy the code

10. Iframe ios 14 has a cross-domain problem

11. IPhone bangs fit into security zones

In fact, wechat browser ios adaptation, but their own adaptation is better. CSS ADAPTS to the iPhoneX screen security zone

12. React &&

If data is 0, the page will render 0 instead of not rendering, so be sure to make strict truth judgments.

13. In some Android phones, border does not appear when used with RADIUS

14. React 17 works with TS

Typescript + React17 +Eslint + Git Hook workflow

15. The product is suitable for aging

Setting font enlargement in wechat will cause page layout confusion

Ios (None and 100% seem to work):Android: not to do

Page layout disorder caused by setting wechat font size

16. Increase the upgrade frequency of dependent packages

Recommend every iteration, see if there is NPM package can upgrade, upgrade as much as possible, otherwise no one will upgrade, later big version no one dare to upgrade, finally become the code shit mountain.

17. On some Androids, the scrollbar has a black dot (extra horizontal scrollbar) on the side.

18. The scroll bar is placed at the top after the page jumps

19. When the gesture returns, the frame is not closed

The history.push page is not destroyed, and the popup from the previous page may cause some problems. It is best to close every page, or use some global approach to close.

Antd can be modal.destroyall ();

20. The ios page is not refreshed

21. Some Android machines reverse Ajax cache processing

22 iPhone adjacent element onClick event quick click problem

Mobile terminal: click the above and below text quickly (the actual business scenario is the adjacent button), the situation will appear continuously click the above, the event of the following text is not triggered (very fast). Demo address

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(" This is above ", tType); setT((state) => ! state); }; Const bottom = () => {console.log(" below ", bType); setB((state) => ! state); }; <div> <div className="pt20" onClick={top}> <div className="pt20" onClick={bottom}> <div> </div> </div>); }Copy the code

The solution is to change the onClick event to onTouchStart.

The relevant data

Font structure and text vertical center scheme exploration