WeChat 미니 프로그램의 전체 개발 개요-미니 프로그램 개발-php.cn

WeChat 미니 프로그램의 전체 개발 개요

WeChat에서 사용하는 개발 언어와 파일은 매우 "특별"합니다.

미니 프로그램사용되는 프로그램 파일 형식은 대략 다음과 같은 범주로 나뉩니다.

1WXML(WeiXin 마크 언어, WeChat 마크업 언어)

WXSS(WeiXin 스타일 시트, WeChat 스타일 시트) )

3JS (Java, 미니 프로그램의 본체)

언어적인 측면에서 미니 프로그램은 일련의 표준을 재정의한 것 같습니다. 그러나 실제로는 "프론트 엔드 3종 세트"(HTML, CSS 및 Java)와 크게 다르지 않습니다.

관련 학습 추천: 미니 프로그램 개발 튜토리얼

이제 미니 프로그램 개발 언어와 "프론트엔드 3종 세트"의 유사점과 차이점을 비교해 보겠습니다.

HTML과 WXML : 둘 사이에는 큰 차이가 있습니다. 이전에 Android 개발을 접해본 적이 없다면 약간 머리가 아플 수도 있습니다. 실제로 WXML은 Android 개발의 인터페이스 XML 설명 파일에 더 가깝고 프로그램 인터페이스 구성에 적합한 반면 HTML은 기사 표시(HTML의 역사와 관련됨) 및 인터넷 페이지 구성에 적합합니다.

WXSS 및 CSS: 둘 사이에는 언어 차이가 거의 없으며 직접 사용할 수 있습니다.

JS 파일: 미니 프로그램의 JS 파일은 위챗의 일부 API 인터페이스를 추가하고 일부 불필요한 기능(예: DOM).

언어 측면에서 미니 프로그램은 가장 낮은 학습 비용으로 프런트 엔드 개발과 완전히 일치하지만 이것이 모든 프런트 엔드 개발자가 원활하게 마이그레이션할 수 있다는 의미는 아닙니다.

프런트엔드 개발에서 소규모 프로그램으로 전환하는 경우 다음 두 가지 사항에 주의해야 합니다.

프론트에만 노출된 경우 HTML과 WXML 파일의 구성 아이디어가 상당히 다릅니다. WXML 작성 방법을 익히려면 시간이 좀 걸릴 것입니다.

미니 프로그램이 프론트엔드 언어를 사용한다고 해서 프론트엔드 개발 아이디어를 사용하여 계속 개발할 수 있다는 의미는 아닙니다. 소규모 프로그램의 프론트 엔드 개발에 대한 요구 사항은 "인터페이스 구축"에서 "완전한 애플리케이션 개발"로 업그레이드되었습니다. 프론트 엔드 개발에는 의식의 변화가 필요합니다.

인터페이스 구성

1. 기본 로직

WXML 및 WXSS 파일은 미니 프로그램 인터페이스 요소 선언 및 스타일 설명 파일입니다.

WXML의 가장 큰 특징은 인터페이스 요소들을 뷰 형태로 연결하고, 프로그램 로직(AppService)을 통해 실시간으로 정보 업데이트를 뷰 레이어에 전달한다는 점입니다.

view는 HTML의 p 요소와 유사합니다. 빌드할 때 뷰는 여러 수준에 중첩될 수 있으며 모든 시각적 요소는 뷰 내부에 배치될 수 있습니다.

요소가 화면 밖으로 나가면 사용자가 볼 수 없다는 점에 유의해야 합니다. 이는 HTML과 상당히 다릅니다.

예를 들어 우리는 휴대폰 화면을 무대로 상상하는데, 무대 밖의 배우들은 관객들에게 보이지 않습니다.

애플릿에는 스크롤 전용 보기가 있습니다.

인터페이스를 자유롭게 스크롤할 수 있는 인터페이스(예: 목록 등)로 만들고 싶다면 스크롤 보기를 사용하고 WXSS에서 크기를 전체 화면에 맞게 조정한 다음 스크롤-y( 위아래로 스크롤) 또는 스크롤-x(왼쪽 및 오른쪽으로 스크롤)가 true입니다.

애플릿은 DOM을 직접 사용하여 WXML 요소를 제어할 수 없습니다. 데이터를 업데이트해야 하는 경우 WXML에서 제공하는 데이터 바인딩 및 요소 렌더링 방법을 사용해야 합니다.

또 주목해야 할 점은 미니 프로그램의 그리드 조판 시스템은 W3C가 2009년에 제안한 조판 표준인 Flex 레이아웃을 사용한다는 점입니다.

2. 데이터 바인딩

개발자는 단일 필드의 경우 데이터 바인딩 방법을 사용하여 정보를 업데이트할 수 있습니다.

바인딩된 데이터는 로드 시 업데이트되는 것 외에도 JS 메인 프로그램에서 함수 형태로 업데이트될 수도 있습니다. 업데이트는 인터페이스의 바인딩된 데이터에도 반영될 수 있습니다.

3. 조건부 렌더링 및 목록(루프) 렌더링

조건부 렌더링은 예기치 않은 프롬프트(예: 목록 또는 세부 정보를 로드할 수 없는 경우 프롬프트 등)가 있는 페이지에 적합합니다.

렌더링에는 트리거 조건이 있습니다. 즉, 조건이 충족되면 페이지가 렌더링되고, 그렇지 않으면 무시되거나 다른 코드 조각이 렌더링됩니다.

두 개의 중괄호에 포함된 판단 조건의 변수는 메인 프로그램의 JS 코드에 데이터로 선언되어 있습니다.

인터페이스에서 목록을 작성해야 하는 경우 WXML의 루프 렌더링을 사용하여 동일한 요소의 렌더링 코드를 조합할 수 있습니다. 루프된 데이터는 WXML 액세스를 위해 배열 형태로 데이터에 기록될 수 있습니다.

렌더링이 완료된 후 렌더링 판단 조건의 변경은 인터페이스 변경에 영향을 줄 수 있습니다.

4. 템플릿 및 참조

WXML은 코드 크기를 줄이기 위해 템플릿 및 참조 사용을 지원합니다.

템플릿은 WXML 코드에서 동일한 코드를 재사용하는 방법입니다.

동일한 파일에 여러 템플릿을 작성하고 가져오기를 사용하여 다른 파일에서 참조할 수 있습니다.

전체 페이지를 참조해야 하는 경우에는 include를 사용해야 합니다.

5. 스타일

WXSS 스타일 시트를 통해 개발자는 WXML의 요소 스타일을 정의할 수 있습니다.

WXSS CSS 코드와 마찬가지로 선택기를 직접 사용하여 요소를 선택할 수 있습니다. WXML에서는 요소의 ID와 클래스를 직접 정의하여 WXSS 파일에서 스타일 정의를 용이하게 할 수도 있습니다.

6. 사용자 조작 및 이벤트 응답

WeChat은 HTML을 사용하지 않기 때문에 하이퍼링크(a 요소)를 추가하여 사용자 클릭 이벤트를 모니터링할 수 없습니다.

클릭 이벤트를 수신해야 하는 요소의 경우 WXML의 바인딩 탭 속성 또는 캐치 탭 속성을 사용하여 바인딩해야 합니다.

위챗에서는 원클릭 외에도 길게 누르기, 터치 시작, 떼기 등의 이벤트 응답도 제공합니다.

WXML에서 이벤트를 바인딩한 후 기본 프로그램인 JS에서 사용할 수 있습니다.

다른 API에도 해당 이벤트가 있습니다. 이러한 이벤트는 WeChat 애플릿의 공식 문서에서 찾을 수 있습니다.

미니 프로그램의 페이지 사이를 이동해야 하는 경우 wx.navigateTo() 메서드를 사용해야 합니다.

페이지 레벨 점프와 관련하여 WeChat에서는 레벨 점프를 5레벨로 제한한다는 점에 유의해야 합니다. 개발 시 해당 한도를 초과하는지 주의를 기울여야 합니다.

네트워크 액세스

애플릿은 세 가지 요청 방법을 지원합니다.

하나는 직접 HTTP 연결 요청이며, 요청 후 바로 결과가 반환되며 연결이 완료됩니다. 다른 하나는 소켓 영구 연결입니다. 한 쪽이 연결을 적극적으로 닫으면 연결이 종료됩니다.

일반 텍스트를 보내고 받는 위의 두 가지 연결 방법 외에도 WeChat은 파일 보내기 및 받기 인터페이스도 제공합니다. 이런 방식으로 미니프로그램에 녹음된 음성과 선택한 사진을 업로드해야 합니다.

미니 프로그램을 통해 네트워크에 접속하려면 서버가 HTTPS 보안 연결을 지원해야 하며, 포트 번호는 443이어야 합니다.

동시에 미니프로그램은 개발자가 미니프로그램 등록 시 설정한 서버 주소에만 접근할 수 있습니다.

멀티미디어 및 저장장치

멀티미디어(오디오 및 비디오 포함)를 재생하거나 미니 프로그램에 데이터를 저장해야 하는 경우 HTML 5에서 제공하는 표준을 사용할 수 없습니다. 미니 프로그램 멀티미디어 재생 컨트롤을 사용해야 합니다. WeChat에서 제공하는 인터페이스 및 스토리지 인터페이스 등

사운드 인터페이스에는 오디오 재생과 음악 재생의 두 가지 유형이 있습니다.

오디오 재생은 재생, 일시 정지, 재생 중지의 세 가지 인터페이스를 제공합니다. 특정 재생 시점으로 이동하는 기능을 제공하지 않으며 현재 재생 진행 상황을 얻을 수도 없습니다.

음악 재생 인터페이스는 위의 기본 재생 제어 기능 외에도 음악 상태 확인, 모니터링 등의 기능을 제공합니다.

애플릿은 사진 및 비디오 데이터 교환 인터페이스를 제공합니다. 이 인터페이스를 통해 애플릿은 사용자가 선택하거나 촬영한 사진과 비디오에 액세스할 수 있습니다.

음성녹음, 영상사진 인터페이스를 통해 얻은 멀티미디어 정보는 일시적이며, 해당 파일은 미니프로그램 저장파일 인터페이스를 통해 영구적으로 저장되어야 합니다.

텍스트 데이터의 경우 미니 프로그램은 이러한 유형의 데이터를 저장하기 위한 인터페이스도 제공합니다. Android나 다른 앱 플랫폼에서 전환하는 개발자는 미니 프로그램이 데이터베이스 스타일의 로컬 데이터 저장 형식을 제공하지 않고 "필드 값"의 일대일 형식으로 저장한다는 점에 유의해야 합니다.

하드웨어 관련

미니 프로그램은 WeChat을 기반으로 하며 다양한 하드웨어 관련 API를 제공합니다.

애플릿은 API를 통해 다음 데이터를 얻을 수 있습니다.

시스템 관련 정보(네트워크 상태, 장치 모델, 창 크기 등 포함)

중력 감지 데이터

나침반 데이터

위 API를 통해 "Shake"와 같은 대화형 페이지를 쉽게 작성할 수 있어야 합니다.

하지만 참고하세요: 이러한 데이터는 적극적으로만 얻을 수 있으며 이러한 수치 변경에 대한 콜백을 통해 실시간으로 얻을 수 없습니다.

푸시 서비스

미니 프로그램은 푸시 서비스를 제공하며 사용자에게 언제든지 필요한 알림을 보낼 수 있습니다. 단, 푸시 서비스는 알림 알림 용도로만 사용할 수 있으며, 대량 발송에는 사용할 수 없습니다.

미니 프로그램에서는 푸시 서비스를 '템플릿 메시지'라고 부릅니다. (서비스 계정을 개발해본 개발자라면 익숙하실 겁니다.) 개발자는 WeChat 미니 프로그램 백그라운드에 새로운 템플릿 푸시 메시지(예: 구매 성공 알림 등)를 등록하고 승인해야 미니 프로그램에서 템플릿 메시지 푸시 서비스를 사용할 수 있습니다. 구체적인 심사 기준은 해당 문서를 참고하는 것이 좋습니다.

템플릿 메시지가 승인된 후 개발자는 먼저 WeChat 서버에서 액세스 토큰을 얻은 다음 템플릿의 값, 템플릿 번호 및 동적 변수(예: 주문 번호, 가격 등)를 제출해야 합니다. WeChat에 제출하면 사용자 푸시 알림이 전송됩니다.

사용자 정보 및 위챗 결제

미니 프로그램은 사용자의 동의를 얻어 사용자의 정보를 얻을 수 있습니다.

우선, 미니 프로그램은 사용자가 WeChat 로그인 인터페이스를 통해 로그인을 승인할 수 있도록 허용해야 합니다. 그 후에 애플릿은 사용자 정보를 표시하고 사용할 수 있습니다.

WeChat을 사용하여 로그인할 때 데이터가 변조되지 않았는지 확인하려면 메시지에 서명하여 무결성을 확인해야 합니다.

위챗 결제는 미니프로그램에서도 사용 가능합니다. 결제 요청을 보낼 때 메시지의 무결성을 확인하기 위해 보낸 메시지에 서명을 추가해야 한다는 점에 유의하세요.