위 챗 애플 릿 개발

1. 작은 프로그램의 배경 화면 보기
2. 애플 릿 개발 자 계 정 찾기
3. 애플 릿 만 들 기
빈 디 렉 터 리
4. 애플 릿 의 디 렉 터 리 구조 파악
pages --- 경로
index

index.js   ---     js  

index.json ---         

index.wxml ---        

index.wxss ---       

utils --- 모듈
app. js --- 전역 js 파일
app. json - 전역 프로필
app. wxss -- 전역 스타일 파일
procject. config. json 프로젝트 프로필
sitemap. json 애플 릿 검색 설정
5. 애플 릿 설정 파일
5.1 전역 설정 --- app. json
위 챗 애플 릿 을 전역 적 으로 설정 하고 페이지 파일 의 경로, 창 표현, 네트워크 시간 초과 설정, 다 중 tab 설정 등 을 결정 합 니 다.https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
애플 릿 의 시작 페이지 는 pages 옵션 의 첫 번 째 페이지 입 니 다.

{
  //       
  "pages": [ //       ，          
    "pages/index/index",
    "pages/logs/logs"
  ],
  //          
  "window": {
    "backgroundTextStyle": "light", //                   
    "navigationBarBackgroundColor": "#fff", //        
    "navigationBarTitleText": "WeChat", //       
    "navigationBarTextStyle": "white" //         black / white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

5.2 페이지 설정 --- pages / page / page. json
모든 애플 릿 페이지 는. json 파일 을 사용 하여 이 페이지 의 창 표현 을 설정 할 수 있 습 니 다.페이지 의 설정 항목 은 현재 페이지 에서 app. json 의 window 에서 같은 설정 항목 을 덮어 씁 니 다.
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
pages/index/index.json

{
  "navigationBarBackgroundColor": "#f66",
  "navigationBarTitleText": "  ",
  "enablePullDownRefresh": true,
  "backgroundColor": "#00f",
  "usingComponents": {}
}

6. 작은 프로그램의 페이지 를 만 들 고 아래쪽 옵션 을 설정 합 니 다.
6.1 페이지 만 들 기
app. json 전역 프로필 의 pages 옵션 을 편집 하면 각 페이지 가 자동 으로 생 성 됩 니 다.

"pages": [
  "pages/home/home",
  "pages/kind/kind",
  "pages/cart/cart",
  "pages/user/user",
  "pages/index/index",
  "pages/logs/logs"
],

6.2 아래쪽 옵션 설정
app. json 파일 에 tabBar 옵션 추가 (아래쪽 tab 표시 줄 표현)
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

"tabBar": {
  "color": "#333",
  "selectedColor": "#f66",
  "backgroundColor": "#fff",
  "borderStyle": "black", //      
  "position": "top", //       ，      
  "list": [
    {
      "text": "  ",
      "pagePath": "pages/home/home",
      "iconPath": "/resources/tabs/home.png", //     
      "selectedIconPath": "/resources/tabs/home_active.png"
    },
    {
      "text": "  ",
      "pagePath": "pages/kind/kind",
      "iconPath": "/resources/tabs/kind.png",
      "selectedIconPath": "/resources/tabs/kind_active.png"
    },
    {
      "text": "   ",
      "pagePath": "pages/cart/cart",
      "iconPath": "/resources/tabs/cart.png",
      "selectedIconPath": "/resources/tabs/cart_active.png"
    },
    {
      "text": "  ",
      "pagePath": "pages/user/user",
      "iconPath": "/resources/tabs/user.png",
      "selectedIconPath": "/resources/tabs/user_active.png"
    }
  ]
},

7. 첫 페이지 에 윤 방도 추가
애플 릿 이 제공 하 는 기본 구성 요소
https://developers.weixin.qq.com/miniprogram/dev/component/
8. 작은 프로그램의 wxml 문법
8.1 초기 화 된 상태

// home.js
data: {
  msg: "hello    ",
  list: ['a', 'b', 'c', 'd'],
  flag: false
}

// home.wxml
{{ msg }}

  {{ item }}


  {{ itm }}

        
        

작은 프로그램의 목록 렌 더 링, 기본 옵션 은 item, 기본 색인 값 은 index 입 니 다. 변경 이 필요 하 다 면 wx: for - item 과 wx: for - index 를 통 해 수정 할 수 있 습 니 다.
작은 프로그램의 조건 판단, wx: if wx: elif wx: else hidden
8.2 템 플 릿

// wxml