react 프로젝트가 위챗 공중번호에서 어떻게 실행되는지

설명: 프로젝트는create-react-app이antd-mobile와 결합하여 쓴 H5로 위챗 공중번호에서 실행됩니다.

1. a 태그를 사용하여 PDF를 미리 보거나 다운로드합니다.글씨는 다음과 같다. 휴대전화에서 클릭하면 반응이 없고, 컴퓨터에서 클릭하면 홈페이지가 붕괴된다.

<a href='pdf '>
  PDF 
</a>

브라우저가 비보안 접근을 감시하여 차단했기 때문이다.따라서 오류 알림에 따라 target과 rel 두 속성을 추가합니다. 쓰기 방법은 다음과 같습니다.

<a href='pdf ' target='_blank' rel="noreferrer">
  PDF 
</a>

컴퓨터와 iOS에서 모두 정상적으로 볼 수 있다.
그러나 Android에는 다음과 같은 몇 가지 상황이 있습니다.
a) 핸드폰에 QQ 브라우저를 가지고 있으면 바로 PDF를 엽니다.(이 경우 일반 미리 보기)
b) 핸드폰에 QQ 브라우저가 없지만 다른 브라우저가 있으면 상자를 팝업해서 QQ 브라우저를 다운로드하거나 다른 브라우저로 열라고 알립니다.(이것도 정상적인 다운로드 미리 보기)
c) 핸드폰에는 QQ 브라우저가 없지만 다른 브라우저가 있습니다. PDF 파일을 눌렀을 때 로드맵 로드 효과를 볼 수 있지만 나중에 미리 보기도 하지 않고 알림도 하지 않습니다.(이것은 비정상적이다. 위챗은 금지된다) a 라벨에 다운로드 속성을 추가하면 효과가 나타난다.

<a href='pdf ' target='_blank' rel="noreferrer" download>
  PDF 
</a>

또한 PDF를 직접 미리 볼 필요가 있다면react-pdf-js 플러그인을 사용할 수 있습니다. 단점은 pdf 파일이 조금 클 때 불러오는 디스플레이가 매우 느리기 때문에 위의 방식을 권장합니다.

2. antd-mobile 긴 목록listView를 사용하여 긴 목록을 불러옵니다.(여러분에게 이동 단말기 목록을 위한 예비 방안을 제공합니다)

3. 프로젝트 초기에 실행하자마자 각종 babel 플러그인 부족 문제를 보고하고 두 시간 넘게 원인을 찾았습니다. 웹 페이지의 프로필에서plugins에 두 개의 플러그인을 더 설정했습니다. 프로젝트에 설치되지 않았고 이 두 개의 플러그인을 필요로 하지 않기 때문에 설정에서 제거한 후에 실행하면 오류가 발생하지 않습니다.

4. echarts 지도와 기둥도 그리기

a) 중국 지도 그리기
v5부터 지도 윤곽 데이터를 제공하지 않고 v4.9.0 버전을 선택했는데 좋은 점은 지도 윤곽 데이터가 있고 지도상의 성 이름도 중간에 있다는 것이다.지도의 부층은tooltip에 설정되어 있으며,position을 추가하지 않아도 되며, 기본적으로 표시되는 위치는 유연합니다.
b) 기둥그림
v4 버전의 정렬이 없는 API입니다. 만약에 기둥 데이터가 정렬되어야 한다면 백엔드 학생들과 가능한 한 소통하여 정렬을 잘 해서 데이터를 되돌려 드리겠습니다.만약 소통이 잘 되지 않는다면, 우리 쪽에서도 처리할 수 있고, 정렬 함수를 하나 쓰면 된다.

5. useRef 바인딩 값을 사용하여 DOM에 직접 바인딩할 수 있습니다.

백그라운드 시스템을 쓰면 보통 UI 구성 요소를 직접 도입하지만 이동할 때 UI에 대한 요구가 있기 때문에 UI 라이브러리에 구성 요소를 도입하여 스타일을 바꾸는 것도 매우 번거롭다.Input 태그 예:
UI 라이브러리의 Input 구성 요소는 양방향 연결을 쉽게 할 수 있지만, 자체 스타일이 있기 때문에 디자인 그림의 입력 상자 스타일과 똑같이 유지하기가 비교적 어렵다.
원생 html 라벨-input.스타일을 사용자 정의할 수 있지만 양방향 귀속은 없습니다. 예를 들어 로그인 페이지에 계정 비밀번호를 입력해야 합니다. js를 사용하면 계정 비밀번호를 얻을 수 있지만 스스로 많은 코드를 써야 합니다.이때useRef는 비교적 좋은 선택입니다. useState,useEffect와 마찬가지로react의hooks 함수입니다.다음을 사용합니다.

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

6. 패키지 구성 요소의 작은 이념

단일 직책 원칙: 하나의 구성 요소는 한 가지 일만 한다.어셈블리가 복잡해지면 다시 작은 어셈블리로 분할합니다.
이상은react 프로젝트가 어떻게 위챗 공중번호에서 실행되는지에 대한 상세한 내용입니다.react가 위챗 공중번호에서 실행되는지에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!