위챗 애플릿 개발-시작부터 포기까지

17479 단어 학습 노트
최근에 떠들썩하게 위챗 프로그램을 개발해 보았는데, 처음부터 입갱에 들어가고 포기하기까지 블로그를 써서 기념으로 삼았다
공식 문서 여기 있습니다.
1. 디렉토리 구조
├─pages
│  ├─index
│  │  ├─index.wxml
│  │  ├─index.wxss
│  │  └─index.js
│  └─logs
├─template
│  ├─template.wxml
│  ├─template.js
│  └─template.wxss
├─app.json
├─app.wxss
└─app.js

애플릿의 모든 인터페이스는 주로'페이지'로 안탁중의'Activity'에 해당한다.애플릿의 루트 디렉터리 app.xml app.wxss app.json 는 전체 애플릿의 공공 파일입니다.그 중에서 app.json는 애플릿 프로필(apk에 해당AndroidManifest이다.app.wxss는 전역 스타일시트이고 app.js는 전역 js입니다.
2. 프로파일
전역 프로필app.json은 전체 애플릿의 설정을 기록하고 애플릿에서 보여줄 수 있는 모든 페이지(Page)가 app에 필요합니다.json에 등록, app.json도 애플릿 창 스타일을 설정할 수 있습니다. (윈도우는 애플릿 페이지 위의 내비게이션 표시줄을 포함합니다.)app.json 파일의 문법은 json 문법입니다. 파일에는 페이지의 수조를 사용하여 페이지를 기록하고 key 윈도우의 수조를 사용하여 애플릿의 창 설정을 저장합니다.
{
  "pages":[
    "pages/index/index",
    "pages/active/active",
    "pages/details/details",
    "pages/search/search",
    "pages/cashier/cashier",
    "pages/checkout/checkout",
    "pages/status/status"
  ],

  "window":{
    "navigationBarBackgroundColor": "#00aaff",
    "navigationBarTitleText" : "  Demo",
    "navigationBarTextStyle":"#fff",
    "enablePullDownRefresh" : false
  }
}

3. 레이아웃 파일 wxmlkey는 위챗 애플릿의 레이아웃 파일의 접미사 이름으로 본질적으로 xml 파일(apk와 유사한 레이아웃 파일 xml)이다.위챗 애플릿에서 제공하는 구성 요소 라이브러리로 레이아웃을 만들 수 있습니다.
위챗 애플릿에서는 페이지 레이아웃의 데이터를 동적으로 지정할 수 있습니다.웹 페이지에 데이터를 설정하는 방법은 데이터 귀속이지 웹에서처럼 DOM 대상을 사용하여 동적 설정을 하는 것이 아닙니다.(*위챗 애플릿에는 DOM 객체가 없습니다.)
wxml에서 wxml를 사용하여 귀속 데이터/동적 렌더링 기능을 실현할 수 있습니다.위챗 애플릿 문서 보기
<view>{{viewData}}view>


<view wx:if={{ifDisplay}}/>


<block wx:for={{list}} wx:for-item="item" wx:key="index">
       <view>{{item.data}}view>
block>


<template name="list-view">
    <scroll-view>
        <block wx:for={{list}}>
        <view>{{item}}view>
        block>
    scroll-view>
template>

 <template is="list-view" data="{{list}}"/> 

템플릿을 사용하기 전에 wxml 파일에서

좋은 웹페이지 즐겨찾기