위챗 애플릿 개발-시작부터 포기까지
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. 레이아웃 파일 wxml
key
는 위챗 애플릿의 레이아웃 파일의 접미사 이름으로 본질적으로 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 파일에서
탭을 사용하여 템플릿을 가져오는 wxml 파일을 사용해야 합니다.
view의 인터페이스: WXSS를 사용하여view의 렌더링을 제어할 수 있습니다.렌더링할 때 클래스 선택기의 클래스 이름이 페이지의 클래스 이름과 충돌하지 않도록 주의하십시오.사용자 정의view를 렌더링해야 하는 wxss에서 사용 사용자 정의view의 wxss 파일을 가져옵니다.
view의 논리 구동: js 파일을 사용하여 논리 구동을 실현합니다.js에서 변수 이름의 충돌을 방지하기 위해 이름 공간을 설정해야 합니다.모듈화된 디자인을 사용하여 자정view의 논리 구동을 실현할 수 있습니다.
7. 모듈화
모듈화는 위챗 애플릿의 공식 문서에 상세하게 소개되어 있다. 위챗 애플릿의 모듈화는 node의 모듈화 용법과 유사하다. node의 모든 js 파일은 하나의 모듈이고
를 사용하여 모듈의 실례를 얻는다.require 함수의 반환값은 js module@import "../customed-view.wxss";
대상의 인용이기 때문에:/* module.exports
** require : {name: 'chaol'}
*/
module.exports.name = 'chaol';
/* module.exports
**require : {name: 'object'}
*/
module.exports = {name: 'object'};
8.tab 전환 기능 구현
이것은 내가 책에서 본 탭 표시줄 전환 페이지의 실현 방안으로 그의 대체적인 사고방식을 기록한 것이다.tab-view 1.tab-view 템플릿 정의
<template name="tab-view" class="tab-container">
<view class="tab-container" bindtop="onTabClicked">
<block wx:for="{{pages}}" wx:key="index" wx:for-item="item">
<text class="tab-button" data-index="{{index}}">{{item.name}}text>
block>
view>
template>
//wxss
.tab-container{
width: 100%;
display: flex;
}
페이지에서tab-view 참조
<import "../View/tab-view.wxml"/>
<template is="{{currentPage.page}}" data="{{pageData}}"/>
<template is="tab-view" data="{{pages}}"/>
//wxss
@import "../View/tab-view.wxss"
//js
var page1=require("../template/page1.js"),
page1=require("../template/page2.js"),
page3=require("../template/page3.js");
Page([
data: {
currentPage: {name: 1, page: "page1", obj: page1},
pages :[{name: " 1", page: "page1", obj: page1},
{name: " 2", page: "page2", obj: page2},
{name: " 3", page: "page3", obj: page3}]
},
//TODO
onTabClicked: function(event){
var index=event.currentTarget.dataset.index;
this.setData({currentPage: this.data.pages[index]});
//
//TODO
}
]);
전환 정의 페이지
<template name="page1">
<view>{{page1Text}}view>
template>
비즈니스 논리 및 페이지 데이터 병합 //... js
onTabClicked: function(event){
var index=event.currentTarget.dataset.index;
this.setData({currentPage: this.data.pages[index].page});
this.bindFunAndData(this, this.data.pages[index].obj);
},
bindFunAndData: function(currentPage, targetPage){
var p;
for ( p in targetPage ) {
currentPage[p] = targetPage[p]
}
}
대충 여기까지 왔어요.네트워크 요청과 센서를 포함한 API는 위챗 애플릿 공식 문서에서 찾을 수 있습니다.
참고:1. this.data this.setData , 。
2. 1024kB, 。
3. data value undefined , .
4. HTML webview , , ```setData()```
나의 수준은 한계가 있다. 만약 독자가 글 속의 잘못을 발견해도 아낌없이 지적해 주기를 바란다면, 감격해 마지 않을 것이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
axios 요청 차단, 응답 차단,router 내비게이션 수위axios 요청 차단: 요청 헤더에 token 등을 통일적으로 추가할 수 있습니다 axios 응답 차단: 로그인 판단 내비게이션 선행 수위beforeEach: 로그인 여부를 판단할 수 있지만, 응답으로 차단하는 것이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.