WeChat Mini 프로그램 신청 방법 처음부터 WeChat Mini 프로그램 만들기 튜토리얼

거의 1년의 기다림 끝에 드디어 위챗 미니 프로그램이 정식 출시되었습니다. 개발자분들은 추후에 나만의 미니 프로그램 제작을 신청하실 수 있습니다. 그럼 위챗 미니 프로그램은 어떻게 신청하나요? 아래에서는 "Computer Pepsi Network"의 편집자가 WeChat 애플릿을 처음부터 만들기 위한 실용적인 개발 튜토리얼을 자세히 공유할 예정입니다. 이 단계가 초기 개발자에게 도움이 되기를 바랍니다.

WeChat 미니 프로그램 신청 전 준비 사항:

먼저 미니 프로그램 계정을 등록해야 합니다. 공개 계정에 등록되지 않은 이메일 주소로 등록해야 합니다. 등록 과정에는 많은 인증이 필요하므로 상당히 번거롭습니다. 당분간 테스트만 하고 게시할 계획이 없다면 기본 정보만 작성하면 되며 WeChat 인증을 완료할 필요가 없습니다.

이후에는 공개 플랫폼에 등록된 계정으로 로그인하실 수 있습니다.

그런 다음 메인 페이지 왼쪽 목록에서 설정을 클릭한 후 설정 페이지에서 개발 설정을 선택하면 AppID를 확인할 수 있습니다. AppID를 이용하여 개발도구에 등록하고 개발도구의 고급 기능을 사용할 수 있습니다. 공식 웹사이트에서 개발 도구를 다운로드할 수 있습니다.

프로젝트 시작:

개발자 도구를 열고 미니 프로그램 옵션을 선택한 다음 "프로젝트 추가" 버튼을 직접 클릭하세요. 이 단계에서는 방금 등록할 때 사용한 AppID를 입력하면 됩니다.

프로젝트 디렉터리의 파일이 빈 폴더인 경우 빠른 시작 프로젝트를 생성할지 묻는 메시지가 표시됩니다.

"예"를 선택하면 개발자 도구를 사용하여 개발 디렉토리에 간단한 데모를 생성할 수 있습니다.

이 데모에는 완전한 미니 프로그램의 일반적인 프레임워크가 있습니다.

1. 프레임워크

먼저 공식적으로 제공되는 데모에 포함된 디렉토리를 살펴보겠습니다.

app.js: 애플릿 로직, 라이프사이클, 전역 변수.

app.json: 미니 프로그램 공개 설정, 네비게이션 바 색상 등은 댓글로 작성할 수 없습니다.

app.wxss: CSS와 유사한 미니 프로그램 공개 스타일.

미니 프로그램 페이지 구조는 다음과 유사합니다.

각 미니 프로그램 페이지는 동일한 경로에 동일한 이름을 가진 4개의 서로 다른 접미사 파일(예: index.js, index)로 구성됩니다. .wxml, index .wxss, index.json

WeChat 애플릿의 각 페이지의 경로와 페이지 파일 이름은 app.json의 페이지에 작성되어야 하며 페이지 배열의 첫 번째 페이지는 다음과 같습니다. 애플릿 홈 페이지.

이 4개 파일은 기능에 따라 세 부분으로 나눌 수 있습니다.

구성: json 파일

논리 계층: js 파일

보기 계층: wxss.wxml 파일

iOS에서는 애플릿의 로직 코드가 JavaScriptCore에서 실행되는 반면, Android에서는 이 작업이 X5 커널에 의해 완료됩니다.

개발 도구에서는 미니 프로그램의 JavaScript 코드가 NW.js(Chrome 커널)에서 실행됩니다. 이로 인해 개발 도구에 미치는 영향과 실제 효과 사이에도 차이가 발생합니다.

2. 구성 요소

WeChat은 주로 8가지 유형으로 구분되는 다양한 구성 요소를 제공합니다.

여기에는 보기, 스크롤 보기, 버튼, 양식 등 일반적으로 사용되는 구성 요소가 포함됩니다. mapcanvas

컴포넌트는 주로 뷰 레이어에 속하며 HTML과 유사한 구조적 레이아웃을 위해 WXML을 사용합니다. 스타일은 WXSS를 통해 정의되고 수정되며, 구문과 사용법은 CSS와 유사합니다.

컴포넌트 사용 구문 예:

<><>

3.API

네트워크

미디어

데이터

위치

디바이스

인터페이스

개발 인터페이스

네트워크 요청 인터페이스에는 일반 HTTPS 요청이 포함되어 있으며, 업로드, 다운로드 및 소켓은 기본적으로 개발에 필요한 네트워크 요구 사항을 충족합니다.

이러한 API는 로직 레이어에 속하며 JS 로직 파일로 작성됩니다.

사용 예:

wx.getLocation({ 유형: 'wgs84', 성공: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res. speed var Accuracy = res.accuracy } })

공식 문서 – API로 이동하여 다른 API를 사용하는 방법을 확인할 수 있습니다.

컴파일 및 실행

1. 시뮬레이터 디버깅

시뮬레이터를 사용하여 WeChat에서 제공하는 개발자 도구에서 미니 프로그램의 효과를 확인할 수 있습니다.

앞서 미니 프로그램의 기본 운영 체제가 다르기 때문에 시뮬레이터에 미치는 영향이 휴대폰에 미치는 영향도 다소 다르다고 앞서 언급한 바 있습니다.

2. 실제 머신 디버깅

왼쪽 옵션 표시줄에서 항목을 선택한 후 미리보기를 클릭하면 관리자의 위챗 계정으로 스캔하면 됩니다. 실제 머신에서 디버깅할 수 있습니다. 머신에 미치는 실제 효과를 확인하세요.

실제 전투: 애플릿 실행

실제 머신 실행 스크린샷(iPhone 7에서 실행, WeChat 버전: 6.3.30):

먼저 타이밍 타이머를 구현하고 통과합니다. wx.getLocation은 좌표를 구하고, 구한 좌표를 배열에 저장하고, 간격을 두고 좌표를 통해 마일리지를 구하고, 전체 마일리지를 누적하고, 좌표점도 연결한다. 문제점:

현재 지도에 연결선을 그릴 수 있는 방법이 없기 때문에 상대적으로 험난한 대략적인 주행 경로를 표시하기 위해 지도에 작은 빨간색 점을 붙여넣는 방식을 채택했습니다. 🎜>

API에서 화성 좌표 GCJ02 형식을 사용하고 있지만 획득된 좌표는 국제 좌표와 유사하며 여전히 편차가 있습니다.

모든 코드를 GitHub에 올렸습니다. 다운로드하여 살펴보거나 먼저 별표를 표시할 수 있습니다. 앞으로 몇 가지 최적화 업데이트를 실시하겠습니다. 이제는 학습 데모일 뿐이며 모두가 소통하고 학습하며 실제 애플리케이션에는 더 많은 최적화가 필요합니다.

WeChat 미니 프로그램 신청 방법과 WeChat 미니 프로그램을 처음부터 만드는 방법에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!