WeChat Mini 프로그램 개발 입문 사례-위챗 개발-php.cn

WeChat Mini 프로그램 개발 입문 사례

小云云

풀어 주다： 2017-11-16 15:43:53

원래의

5337명이 탐색했습니다.

WeChat은 점점 우리 생활에 가까워지고 있으며 일부 개발자는 WeChat 미니 프로그램을 지속적으로 개발하고 있습니다. 그렇다면 미니 프로그램을 개발하는 방법은 무엇일까요? 시작하는 방법? 그런 다음 위챗 미니 프로그램을 예로 들어 위챗 미니 프로그램의 초급 사용법을 간략하게 소개하겠습니다.

1. 미니 프로그램 계정 등록

1. 위챗 공개 플랫폼에 입장하세요. .qq.com/), 미니 프로그램 계정을 등록하고 안내에 따라 해당 정보를 입력하세요.

2. 성공적으로 등록한 후 홈페이지에 들어가 미니 프로그램 출시 프로세스->미니 프로그램 개발로 이동하세요.

3. AppID를 얻고 나중에 프로젝트를 생성할 때 사용할 AppID를 기록합니다. 관리자가 아닌 WeChat 계정이 있는 휴대폰의 미니 프로그램인 경우 "개발자 바인딩"도 작동해야 합니다. 즉, "사용자 ID"-"개발자" 모듈에서 사용해야 하는 WeChat 계정을 바인딩해야 합니다. 미니 프로그램을 경험해보세요. 이 튜토리얼은 기본적으로 관리자의 WeChat 계정을 사용합니다.

2. WeChat 웹 개발자 도구 다운로드

개발자가 간단하고 효율적으로 개발할 수 있도록 WeChat 미니 프로그램은 개발과 디버깅을 통합하는 새로운 개발자 도구를 출시했습니다. 코드 편집 및 프로그램 릴리스 기능

1. 다운로드 페이지: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

시스템에 따라 다운로드할 해당 도구 버전

2. 도구에는 편집, 디버깅 및 프로젝트용 세 페이지 카드가 포함되어 있습니다.

(1) 편집 영역에서는 현재 프로젝트에 대한 코드 작성, 파일 추가, 삭제 및 이름 바꾸기와 같은 기본 작업을 수행할 수 있습니다.

(2) 프로그램 디버깅에는 세 가지 주요 기능 영역이 있습니다. 시뮬레이션

(3) 프로젝트 페이지 카드에는 세 가지 주요 기능이 있습니다: 현재 프로젝트 세부 정보 표시, 미리 보기 제출, 업로드 및 프로젝트 구성 제출

참고: 언제 도구를 시작하면 개발자는 QR 코드를 사용하여 성공적으로 바인딩된 WeChat ID로 로그인해야 합니다.

3. 미니 프로그램 예제 작성

? 
test
 ├─ page
 │ └─ index
 │  ├─ index.js
 │  ├─ index.json
 │  ├─ index.wxml
 │  └─ index.wxss
 ├─ app.js
 ├─ app.json
 └─ app.wxss

로그인 후 복사

2. 예제 파일 설명 및 소스 코드

작은 프로그램에는 앱(주요 부분)과 여러 페이지(페이지)가 포함됩니다.

(1) 앱은 전체 프로그램을 설명하는 데 사용되며 세 개의 파일로 구성됩니다. .js 접미사는 스크립트 파일이고, .json 접미사는 구성 파일이며, .wxss 접미사는 스타일 시트 파일로 프로젝트의 루트 디렉터리에 있어야 합니다

app.js는 미니 프로그램의 스크립트 코드입니다(필수). 이 파일에서는 주기 함수, 전역 변수 선언, 프레임워크에서 제공하는 풍부한 API 호출을 모니터링하고 처리할 수 있습니다.
app.json은 전체 애플릿의 전역 구성입니다(필수). WeChat 애플릿을 전역적으로 구성하고 페이지 파일의 경로와 창을 결정하는 데 사용됩니다. 성능, 네트워크 시간 초과 설정, 여러 탭 설정 등을 허용합니다. 배열에서 각 항목은 미니 프로그램이 구성되는 페이지를 지정하는 문자열입니다. 위챗 미니 프로그램의 각 페이지의 [경로 + 페이지 이름]은 app.json의 페이지에 작성해야 하며, 페이지의 첫 번째 페이지는 미니 프로그램의 홈페이지입니다.

?
App({
 onLaunch: function () {
  console.log(&#39;App Launch&#39;)
 },
 onShow: function () {
  console.log(&#39;App Show&#39;)
 },
 onHide: function () {
  console.log(&#39;App Hide&#39;)
 },
 globalData: {
  hasLogin: false
 }
})

로그인 후 복사

app.wxss는 전체 미니 프로그램에 대한 공통 스타일 시트입니다(필수는 아님).

{
 "pages":[
  "page/index/index"
 ],
 "window":{
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "欢迎页",
  "navigationBarBackgroundColor": "#fbf9fe",
  "backgroundColor": "#fbf9fe"
 },
 "debug": true
}

로그인 후 복사

(2) 페이지는 페이지를 설명하는 데 사용됩니다. 페이지는 4개의 파일로 구성됩니다. 여기서는 홈페이지 색인을 예로 들어 보겠습니다. 각 작은 프로그램 페이지는 동일한 경로에 동일한 이름을 가진 4개의 서로 다른 접미사 파일로 구성됩니다. , 예: index.js, index.wxml, index.wxss, index.json. .js 접미사가 있는 파일은 스크립트 파일이고, .json 접미사가 있는 파일은 구성 파일이며, .wxss 접미사가 있는 파일은 스타일 시트 파일이고, .wxml 접미사가 있는 파일은 페이지 구조 파일입니다.

index.js는 페이지의 스크립트 파일입니다(필수). 이 파일에서는 페이지의 수명 주기 기능을 모니터링 및 처리하고, 미니 프로그램 인스턴스를 가져오고, 데이터를 선언 및 처리하고, 페이지 상호 작용 이벤트에 응답할 수 있습니다. 등.

page {
 background-color: #fbf9fe;
 height: 100%;
}
.container {
 display: flex;
 flex-direction: column;
 min-height: 100%;
 justify-content: space-between;
}

로그인 후 복사

index.wxml은 페이지 구조 파일입니다(필수).

Page({
 data: {
  title:&#39;小程序&#39;,
  desc:&#39;Hello World!&#39;
 }
})

로그인 후 복사

index.wxss는 페이지 스타일 시트 파일입니다(필수 아님). 페이지 스타일 시트가 있는 경우 페이지 스타일 시트의 스타일 규칙이 app.wxss의 스타일 규칙 위에 적용됩니다. 페이지의 스타일 시트를 지정하지 않으면 페이지의 구조 파일에서 app.wxss에 지정된 스타일 규칙을 직접 사용할 수도 있습니다.

<view class="container">
 <view class="header">
  <view class="title">标题：{{title}}</view>
  <view class="desc">描述：{{desc}}</view>
 </view>
</view>

로그인 후 복사

index.json은 페이지 구성 파일입니다(필수 아님). 페이지 구성 파일이 있는 경우 페이지의 구성 항목이 app.json 창의 동일한 구성 항목을 덮어씁니다. 지정된 페이지 구성 파일이 없으면 app.json의 기본 구성이 페이지에서 직접 사용됩니다. 여기서는 지정할 필요가 없습니다.

팁:

a. 개발자가 구성 항목을 쉽게 줄일 수 있도록 미니 프로그램은 페이지를 설명하는 4개의 파일이 동일한 경로와 파일 이름을 가져야 한다고 규정합니다.

b 미니 프로그램은 풍부한 기능을 제공합니다. 필요에 따라 선택할 수 있는 API (https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715)

4. 미니 프로그램 예제 테스트

1. WeChat 웹 개발자 도구를 선택하고 "로컬 애플릿 프로젝트"를 선택합니다.

2. 미니 프로그램의 AppID와 프로젝트 이름을 입력하고, 3단계에서 작성한 미니 프로그램 인스턴스 폴더를 선택한 후 "프로젝트 추가"를 클릭합니다.

3. 다음과 같은 효과가 나타나면 축하합니다. 첫 번째 소규모 프로그램 프로젝트가 성공적으로 작성된 것입니다! 왼쪽 사이드바에서 "편집"을 클릭하고 오른쪽 편집 창에서 코드를 직접 수정하고(CTRL+S) 새로 고침(F5)하면 적용됩니다.

4 미니 프로그램 프로젝트의 효과를 휴대폰에서 확인하고 싶다면 왼쪽 사이드바에서 "프로젝트"를 클릭하고 "미리보기"를 클릭하여 QR 코드를 생성한 후 WeChat을 열고 스캔하면 확인할 수 있습니다. 그것.

WeChat Mini 프로그램 개발 입문 사례