미니 프로그램 개발 및 테스트 튜토리얼

미니 프로그램 기술문서

1. 미니 프로그램 애플리케이션 분석

1. 간단한 소개

미니 프로그램은 WeChat에서 개발한 애플리케이션으로 다운로드 및 설치 없이 사용할 수 있습니다.

1. Essence

WeChat 미니 프로그램은 Hybrid 기술의 응용 프로그램입니다.
하이브리드 앱(하이브리드 모드 모바일 애플리케이션).
미니 프로그램은 휴대폰 자체의 더 많은 기능(예: 위치 정보, 카메라 등)을 호출할 수 있습니다.

1. 미니 프로그램 등록

미니 프로그램 개발 프레임워크의 로직 레이어는 JavaScript로 작성되었습니다. 로직 레이어는 데이터를 처리하여 뷰 레이어로 보내는 동시에 뷰 레이어로부터 이벤트 피드백을 받습니다. 다시 한번, 개발을 용이하게 하기 위해 미니 프로그램에 몇 가지 기본적인 수정이 이루어졌습니다. 프로그램과 페이지를 등록하기 위한 앱 및 페이지 메소드가 추가되었습니다.

App() 함수는 작은 프로그램을 등록하는데 사용됩니다. 애플릿의 수명주기 기능 등을 지정하는 객체 매개변수를 허용합니다.

Page() 함수는 페이지를 등록하는데 사용됩니다. 페이지의 초기 데이터, 수명 주기 기능, 이벤트 처리 기능 등을 지정하는 개체 매개변수를 허용합니다. 라이프 사이클 기능은 다음과 같습니다.

onLoad: 페이지 로딩

은 페이지당 한 번만 호출됩니다.

onShow: 페이지 표시

는 페이지가 열릴 때마다 호출됩니다.

onReady: 페이지의 초기 렌더링이 완료되었습니다

페이지는 한 번만 호출됩니다. 이는 페이지가 준비되었으며 뷰 레이어와 상호 작용할 수 있음을 의미합니다

onHide : 페이지가 숨겨졌습니다

navigateTo 또는 하단 탭 전환 시 호출

onUnload: 페이지 언로드

redirectTo 또는 NavigateBack 시 호출

2. 미니 프로그램 예시 분석

1. Create Project

현재 내부 베타 버전이며 모든 AppID는 Tencent에서 내부적으로 출시합니다. 그러나 AppID가 없어도 테스트 개발에는 영향을 미치지 않습니다. AppID 없이 테스트하고 개발할 수는 있지만 실제 휴대폰에서는 디버깅할 수 없습니다.

프로젝트 디렉토리를 선택하고 프로젝트를 추가합니다.

2. 코드 작성

개발자 도구의 왼쪽 탐색에서 "편집"을 클릭하면 이 프로젝트가 초기화되었으며 몇 가지 간단한 코드 파일이 포함되어 있는 것을 볼 수 있습니다. app.js, app.json 및 app.wxss입니다. 그중 app.js는 기존 js 파일이고 app.json은 프로젝트 구성 파일이며 app.wxss는 프로젝트 CSS 파일입니다. WeChat 애플릿은 이러한 파일을 읽고 애플릿 인스턴스를 생성합니다.

(1)app.json:

app.json은 전체 애플릿의 전역 구성입니다. 공식 구성 테이블은 5개입니다.

이 파일에서 미니 프로그램이 구성되는 페이지를 구성할 수 있습니다. 미니 프로그램의 배경색, 탐색 모음 스타일 및 기본 제목을 구성합니다. 이 파일에는 설명을 추가할 수 없습니다.

window는 미니 프로그램의 상태 표시줄, 탐색 표시줄, 제목, 창 배경색을 설정하는 데 사용됩니다.

pages는 점프해야 하는 모든 페이지의 디렉토리입니다. 페이지.

(2)tabBar:

tabBar는 하단 네비게이션 바 부분이고, tabBar API는

tabBar가 구성되면 모든 페이지에 탭 탐색 모음이 표시됩니다. 목록에는 구성된 탭에 있는 버튼 수가 2개 있습니다. 목록에 여러 속성이 있습니다.

케이스 APP의 app.json은 다음과 같습니다.

{

" 페이지":[

"페이지/인덱스/인덱스",

"페이지/로그/로그"

],

"창 ":{

"BackgroundTextStyle":"light",

"navigationBarBackgroundColor": "green",

"navigationBarTitleText": "APP",

"navigationBarTextStyle":"white"

},

"tabBar": {

" selectedColor":"red",

"list": [{

"pagePath": "페이지/색인/색인",

"text": "홈페이지" ,

"iconPath":"goods_mgold.png",

"selectedIconPath":"goods_mgold.png"

}, {

"pagePath" : "페이지/로그/로그",

"text": "날씨 쿼리",

"iconPath":"icon_community.png",

"selectedIconPath": "icon_community.png"

}]

}

}

위 구성 코드에서 표시되는 효과는 다음과 같습니다.

(3) wxml 파일:

WeChat의 wxml 파일은 기존 html 파일과 동일하며 일부 WeChat 앱 태그가 제거되었습니다. H1-H5와 같이 개발에 필요하지 않은 태그를 사용하면 오류가 발생합니다. 그 중 HTML의 p 태그는 WeChat의 보기 태그가 됩니다. (즉, 이름이 변경된 것입니다...)

(4)app.js:

app.js는 미니 프로그램의 스크립트 코드입니다. 이 파일에서는 애플릿의 라이프사이클 기능을 모니터링 및 처리하고 전역 변수를 선언할 수 있습니다. MINA에서 제공하는 풍부한 API를 호출하세요. 코드는 주로 APP 개체에 작성되며 전 세계에 영향을 미칩니다.

각 페이지에는 자체 js 파일이 있을 수 있습니다. 예를 들어 index.js는 Index.wxml 페이지의 js 코드입니다. js 코드의 일부 응용 프로그램은 주로 페이지 개체에 작성됩니다.

이벤트 사용 방법:

먼저 wxml에 바인딩 탭 클릭 이벤트를 작성합니다.

그런 다음 페이지 개체에서 정의하세요. js :

은 클릭 이벤트를 구현할 수 있습니다. 바인딩은 바인딩이고 유형은 탭입니다. 유형은 이벤트 유형입니다.

데이터 렌더링:

컴포넌트에 wx:for 제어 속성을 사용하여 배열을 바인딩하고, 배열에 있는 각 항목의 데이터를 사용하여 컴포넌트를 반복적으로 렌더링할 수 있습니다. 기본적으로 배열에 있는 현재 항목의 첨자 변수 이름은 기본적으로 index로 설정되고 배열에 있는 현재 항목의 변수 이름은 기본적으로 item

Written in xwml:

index.js에 쓰기:

조건부 렌더링:

wx :if 페이지에 있는지 확인하기 위해 렌더링하여 표시하는 것입니다

렌더링 여부를 결정하기 위해 페이지 개체가 true 또는 false여야 합니다.

템플릿 정의:

템플릿에서 코드 조각을 정의한 다음 다른 위치에서 호출할 수 있습니다.

외부에서 직접 새 box.wxml 템플릿을 생성합니다.

그런 다음 외부 commom.js 모듈을 생성합니다.

module.exports를 통해 모듈을 내보냅니다.

먼저 모듈을 가져와야 하는 wxml 파일에 직접 포함합니다. src 주소

그런 다음 모듈을 도입해야 하는 js 파일에서:

그런 다음 common.show()로 호출하세요.

이렇게 하면 이 모듈을 재사용할 수 있습니다. 모든 페이지에서 wxml 코드를 가져오려면 include를 사용하고, 이 모듈을 추가하려면 js 파일을 삽입하는 데 require를 사용하면 됩니다.

(5)wxss:

wxss 파일은 기존 CSS 파일이므로 큰 차이는 없습니다.

하지만 WeChat은 반응형 레이아웃을 제공합니다

rpx(반응형 픽셀): 화면 너비에 따라 조정될 수 있습니다. 지정된 화면 너비는 750rpx입니다. 예를 들어 iPhone6의 화면 너비는 375px이고 총 750개의 물리적 픽셀이 있으며, 750rpx = 375px = 750개의 물리적 픽셀, 1rpx = 0.5px = 1개의 물리적 픽셀입니다.

rpx의 원리는 rem 레이아웃 원리입니다. 그냥 이름만 바꾼 것일 뿐이고, 한 단계 덜하면 화면 폰 크기 변환을 위한 Js 코드가 위챗에서 내부적으로 실행되기 때문에 직접 작성할 필요가 없습니다.

(6) 인터페이스 API:

미니 프로그램 개발 프레임워크는 사용자 정보 획득, 로컬 저장, 결제 등 WeChat에서 제공하는 기능을 쉽게 활성화할 수 있는 풍부한 WeChat 네이티브 API를 제공합니다. 기능 등..

더 많은 소규모 프로그램 개발 및 테스트 튜토리얼과 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!