How to run the react project on WeChat official account

Note: The project is an H5 written by create-react-app combined with antd-mobile, and runs in the WeChat official account.

1. Use the a tag to preview or download PDF. The writing method is as follows: there is no response when clicking on the mobile phone, and the webpage crashes when clicking on the computer.

<a href='pdf or image path'>
  PDF or image name</a>

The reason is that the browser detected the access to non-secure access and blocked it. So according to the error prompt, add two new attributes, target and rel, and write them as follows:

<a href='pdf or image path' target='_blank' rel="noreferrer">
  PDF or image name</a>

It can be viewed normally on both computer and iOS.

However, there are several situations on Android:

a) The mobile phone comes with QQ browser, which can open PDF directly. (This is a normal preview)

b) If there is no QQ browser on the phone but there are other browsers, a box will pop up prompting you to download QQ browser or open it with other browsers. (This is also a normal preview download)

c) There is no QQ browser on the phone, but there are other browsers. When you click on the PDF file, you can see a loading bar, but there is no preview or prompt afterwards. (This is abnormal and is prohibited by WeChat) Adding a download attribute to the a tag can produce effect b).

<a href='pdf or image path' target='_blank' rel="noreferrer" download>
  PDF or image name</a>

In addition, if you need to preview the PDF directly, you can use the react-pdf-js plug-in. The disadvantage is that when the PDF file is a little large, the loading and display is extremely slow, so the above method is still recommended.

2. Use antd-mobile long list listView to load long lists. (Provide you with an alternative solution for long lists on mobile devices)

3. At the beginning of the project, various problems with missing babel plug-ins were reported as soon as it was run. It took more than two hours to find the cause. In the webpack configuration file, two more plug-ins were configured in plugins, but these two plug-ins were not installed in the project and were not needed. Therefore, after removing them from the configuration and running again, there was no error.

4. Echarts draws maps and column charts

a) Draw a map of China

Starting from v5, map outline data is not provided. The advantage of using version v4.9.0 is that it has map outline data and the province names on the map are also centered. The floating layer on the map is configured in the tooltip. You don't need to add a position specifically. Its default display position is flexible.

b) Draw a column chart

The v4 version does not have a sorting API. If the column chart data needs to be sorted, try to communicate with the backend colleagues and ask them to sort the data and return it to you. If there is a miscommunication, we can handle it here by writing a sorting function.

5. Use useRef to bind the value and perform operations, which can be directly bound to the DOM.

When writing a backend system, UI components are usually introduced directly. However, there are requirements for the UI on the mobile side, and it is also troublesome to introduce components and change the style in the UI library. Take the Input tag as an example:

The Input component of the UI library can easily achieve two-way binding, but it has its own style, so it is difficult to keep the style of the input box the same as the one drawn by the designer.

Native HTML tag——input. You can customize the style, but there is no two-way binding. For example, on the login page, you need to enter your account password. You can use js to get the account password, but you need to write a lot of code yourself. At this time, useRef is a better choice. Like useState and useEffect, it is a hooks function of react. Use as follows:

import { useState,useRef } from 'react'; //Introduction
const inputRef = useRef<any>(); //define const [phone, setPhone] = useState("");
​
export default const Login= () => {
  const changePhone = () => {
    setPhone(inputRef?.current?.value)
  }
    return (
       /*Bind to the input tag*/
       <input value={phone} ref={inputRef} onChange={changePhone} maxLength={11} placeholder='Please enter your phone number' />
        )
}

6. Small ideas for packaging components

Single Responsibility Principle: A component should do only one thing. If a component becomes complex, break it down into smaller components.

The above is the detailed content of how the react project runs on WeChat official account. For more information about react running on WeChat official account, please pay attention to other related articles on 123WORDPRESS.COM!