위챗 애플릿 개발-시작

***
1. 애플릿 코드 구성

.json 접미사 JSON 파일

.wxml 접미사 WXML 템플릿 파일

.wxss 접미사WXSS 스타일 파일

.js 접미사JS 스크립트 논리 파일

JSON 구성
JSON은 데이터 형식으로 애플릿에서 정적 설정 역할을 한다.
애플릿 설정 app.json app.json는 현재 애플릿의 글로벌 구성이며 QuickStart 프로젝트의 app.json 구성은 다음과 같습니다.

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }

pages 필드 - 현재 애플릿의 모든 페이지 경로를 설명하는 데 사용되며 wx 클라이언트가 애플릿 페이지가 어떤 디렉터리에 정의되어 있는지 알 수 있도록

window 필드 - 애플릿의 모든 페이지의 맨 위 배경 색상, 텍스트 색상 정의 등

도구 설정 프로젝트.config.json
도구에 있는 모든 설정은 이 파일에 기록됩니다. 도구를 다시 설치하거나 컴퓨터를 바꿀 때 같은 프로젝트의 코드 패키지를 불러오면 개발자 도구는 그 당시 프로젝트를 개발할 때의 개성화된 설정으로 자동으로 복원됩니다. 편집기의 색깔, 코드가 전송될 때 자동으로 압축되는 등 일련의 옵션을 포함합니다.
페이지 구성 페이지.json
페이지/logs 디렉터리에 있는 logs.json와 같은 애플릿 페이지와 관련된 설정을 나타낸다.각 페이지의 등록 정보를 독립적으로 정의합니다.
JSON 구문
JSON 파일은 모두 큰 괄호에 싸여 있으며 키-value로 데이터를 표현합니다.JSON의 키는 더블 인덱스에 싸야 하며, JSON 파일에서는 주석을 사용할 수 없습니다.
WXML 템플릿
웹 프로그래밍은 HTML+CSS+JS의 조합을 사용하는데 그 중에서 HTLM는 현재 페이지 구조를 설명하고 CSS는 페이지 모양을 설명하며 JS는 페이지와 사용자의 상호작용을 처리한다.같은 이치로 WXML 유사HTML의 역할을 충당한다

봉인된 라벨 제공view,button,text 등

MVVM의 개발 모델, 렌더링과 논리 분리 예: Hello World의 문자열을 인터페이스에 표시:

<text>{{msg}}</text>

JS는 상태를 관리하기만 하면 됩니다.

this.setData({ msg: "Hello World" })

{}}의 문법을 통해 변수를 인터페이스에 연결합니다. 우리는 데이터 연결이라고 합니다.if/else,for 등 통제 능력을 이용하여 wx:로 시작하는 속성으로 표현한다.
WXSS 스타일

휴대전화 장치의 화면은 서로 다른 폭과 장치 픽셀비례가 있고 척도 단위rpx를 지원하며 애플릿의 밑바닥은 자동으로 환산되지만 편차가 존재한다.

app.wxss는 전역 스타일로 현재 애플릿의 모든 페이지에 작용하고 국부 페이지 스타일page.wxss은 현재 페이지에만 적용됩니다.

WXSS 섹션만 지원CSS 선택기

JS 논리적 상호 작용
사용자의 조작을 처리합니다: 사용자의 클릭에 응답하고 사용자의 위치를 얻습니다.또한 JS에서 애플릿이 제공하는 풍부한 API를 호출하여 위챗이 제공하는 능력을 편리하게 조절할 수 있다. 예를 들어 사용자 정보 얻기, 로컬 저장, 위챗 결제 등이다.
2. 애플릿 숙주 환경
위챗 클라이언트가 애플릿에 제공하는 환경을 숙주 환경이라고 한다.
렌더링 레이어 및 논리 레이어
WXML 템플릿과 WXSS 스타일은 렌더링 레이어에서, JS 스크립트는 논리 레이어에서 각각 작동합니다.렌더링 층과 논리 층은 각각 2개의 라인으로 관리된다. 렌더링 층의 인터페이스는 웹뷰를 사용하여 렌더링한다.논리 계층은 JsCore 스레드를 사용하여 JS 스크립트를 실행합니다.하나의 작은 프로그램에 여러 인터페이스가 존재하기 때문에 렌더링층에는 여러 개의 WebView 라인이 존재한다. 이 두 라인의 통신은 위챗 클라이언트(다음 글에서도 위챗 클라이언트를 대신하는 Native)를 통해 중계되고 논리층의 네트워크 요청도 Native를 통해 전송된다. 소정의 통신 모델 아래 그림은 다음과 같다.
프로그램 및 페이지
위챗 클라이언트는 애플릿을 열기 전에 전체 애플릿의 코드 패키지를 로컬로 다운로드합니다.app.json의 pages 필드를 통해 현재 애플릿의 모든 페이지 경로를 알 수 있습니다.

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

프로젝트는 두 페이지를 정의했는데 각각 pages/index/index와 pages/logs/logs에 위치한다.pages 필드에 적힌 첫 번째 페이지는 이 애플릿의 첫 페이지 애플릿이 시작된 후 app입니다.js 정의 App 인스턴스의 onLaunch 콜백이 실행됩니다.

App({
  onLaunch: function () {
    //           
  }
})

전체 애플릿은 하나의 App 인스턴스만 있고 모든 페이지가 공유됩니다.
작은 프로그램의 한 페이지는 어떻게 씁니까?pages/logs/logs 아래 4가지 파일이 포함되어 있습니다. 위챗 클라이언트는 logs.json 설정에 따라 인터페이스를 생성합니다. 맨 윗부분의 색깔과 문자는 이 json 파일에서 정의할 수 있습니다. logs.js의 대체적인 내용:

Page({
  data: { //          
    logs: []
  },
  onLoad: function () {
    //         
  }
})

Page는 페이지 구조기로서 페이지를 생성한다.이 때 애플릿 프레임워크는 data 데이터와 index.wxml를 함께 최종 구조를 렌더링합니다.인터페이스를 렌더링한 후 페이지의 실례는 onLoad의 리셋을 받을 수 있으며 이 리셋에서 후속 논리를 처리할 수 있다.
구성 요소WXML에 대응하는 구성 요소 탭 이름을 쓰면 이 구성 요소를 인터페이스에 표시할 수 있습니다.구성 요소를 사용할 때 속성을 통해 구성 요소에 값을 전달하여 구성 요소가 서로 다른 상태로 나타날 수 있도록 한다.예를 들어 우리는 지도가 처음에 중심의 경위도가 광저우였으면 좋겠다. 그러면 지도의longitude(중심경도)와latitude(중심위도) 두 가지 속성을 설명해야 한다.

<map longitude="    " latitude="    "></map>

구성 요소의 내부 행위도 이벤트 형식을 통해 개발자가 감지할 수 있습니다. 예를 들어 사용자가 지도에 있는 어떤 표시를 눌렀을 때, js에서markertap 함수를 작성하여 처리할 수 있습니다.

<map bindmarkertap="markertap" longitude="    " latitude="    "></map>

style 또는 class를 통해 구성 요소의 외계 스타일을 제어하여 인터페이스의 너비 높이에 적응할 수 있습니다.
API
개발자가 위챗이 제공하는 능력을 편리하게 호출할 수 있도록 하기 위해 예를 들어 사용자 정보 얻기, 위챗 결제 등 작은 프로그램은 많은 API를 제공하여 개발자가 사용하도록 한다.참고: 대부분의 API 콜백은 비동기적이므로 코드 로직의 비동기식 문제를 처리해야 합니다.