WeChat Mini 프로그램 튜토리얼 등록 페이지-미니 프로그램 개발-php.cn

WeChat Mini 프로그램 튜토리얼 등록 페이지

黄舟

풀어 주다： 2017-01-16 15:18:25

원래의

2545명이 탐색했습니다.

WeChat 애플릿 - 페이지

Page() 함수를 사용하여 페이지를 등록합니다. 페이지의 초기 데이터, 수명주기 기능, 이벤트 처리 기능 등을 지정하는 개체 매개변수를 허용합니다.

객체 매개변수 설명:

속성 유형 설명

data 객체 페이지의 초기 데이터

onLoad 함수 라이프 사이클 함수--listen to 페이지 로딩

onReady 함수 라이프 사이클 함수--페이지 렌더링 완료 수신

onShow 함수 라이프 사이클 함수--페이지 표시 수신

onHide 함수 라이프 사이클 함수- -페이지 숨기기 수신

onUnload 함수 수명 주기 함수--페이지 언로드 수신

기타 모든 개발자는 이

샘플 코드:

//index.js  
Page({  
 data: {  
 text: "This is page data."  
 },  
 onLoad: function(options) {  
 // Do some initialize when page load.  
 },  
 onReady: function() {  
 // Do something when page ready.  
 },  
 onShow: function() {  
 // Do something when page show.  
 },  
 onHide: function() {  
 // Do something when page hide.  
 },  
 onUnload: function() {  
 // Do something when page close.  
 },  
 // Event handler.  
 viewTap: function() {  
 this.setData({  
  text: &#39;Set some data for updating view.&#39;  
 })  
 }  
})

로그인 후 복사

초기화 데이터

초기화 데이터는 페이지의 첫 번째 렌더링으로 사용됩니다. 데이터는 JSON 형식으로 논리 레이어에서 렌더링 레이어로 전송되므로 데이터는 JSON으로 변환할 수 있는 형식(문자열, 숫자, 부울 값, 개체, 배열)이어야 합니다.

렌더링 레이어는 WXML을 통해 데이터를 바인딩할 수 있습니다.

샘플 코드:

<view>{{text}}</view>  
<view>{{array[0].msg}}</view>

로그인 후 복사

Page({  
 data: {  
 text: &#39;init data&#39;,  
 array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]  
 }  
})

로그인 후 복사

이벤트 처리 기능

페이지는 초기화 데이터 및 수명 주기 기능 외에도 몇 가지 특수 기능, 즉 이벤트 처리 기능을 정의할 수도 있습니다. 렌더링 레이어에서는 트리거 이벤트에 도달하면 페이지에 정의된 이벤트 처리 기능이 실행되는 이벤트 바인딩을 추가할 수 있습니다.

샘플 코드:

클릭하세요

Page({  
 viewTap: function() {  
 console.log(&#39;view tap&#39;)  
 }  
})

로그인 후 복사

Page.prototype.setData()

setData 함수는 로직 레이어에서 뷰 레이어로 데이터를 전송하는 동시에 this.data의 해당 값을 변경하는 데 사용됩니다.

참고:

this.data를 직접 수정하는 것은 유효하지 않으며 페이지 상태를 변경할 수 없습니다. 또한 데이터 불일치가 발생합니다.

한 번에 설정하는 데이터는 1024kB를 초과할 수 없습니다. 한 번에 너무 많은 데이터를 설정하지 않도록 하세요.

setData() 매개변수 형식

은 this.data의 키에 해당하는 값을 value로 변경하기 위해 키와 값의 형태로 객체를 허용합니다.

키는 매우 유연하며 array[2].message, a.b.c.d와 같은 데이터 경로 형태로 제공될 수 있으며 this.data에 미리 정의할 필요가 없습니다.

샘플 코드:

<!--index.wxml-->  
<view>{{text}}</view>  
<button bindtap="changeText"> Change normal data </button>  
<view>{{array[0].text}}</view>  
<button bindtap="changeItemInArray"> Change Array data </button>  
<view>{{obj.text}}</view>  
<button bindtap="changeItemInObject"> Change Object data </button>  
<view>{{newField.text}}</view>  
<button bindtap="addNewField"> Add new data </button>

로그인 후 복사

//index.js  
Page({  
 data: {  
 text: &#39;init data&#39;,  
 array: [{text: &#39;init data&#39;}],  
 object: {  
  text: &#39;init data&#39;  
 }  
 },  
 changeText: function() {  
 // this.data.text = &#39;changed data&#39; // bad, it can not work  
 this.setData({  
  text: &#39;changed data&#39;  
 })  
 },  
 changeItemInArray: function() {  
 // you can use this way to modify a danamic data path  
 var changedData = {}  
 var index = 0  
 changedData[&#39;array[&#39; + index + &#39;].text&#39;] = &#39;changed data&#39;  
 this.setData(changedData)  
 },  
 changeItemInObject: function(){  
 this.setData({  
  &#39;object.text&#39;: &#39;changed data&#39;  
 });  
 },  
 addNewField: function() {  
 this.setData({  
  &#39;newField.text&#39;: &#39;new data&#39;  
 })  
 }

로그인 후 복사

다음 내용을 바로 이해할 필요는 없지만 나중에 이해하면 도움이 됩니다.

라이프 사이클 기능

다음 그림은 페이지 인스턴스의 라이프 사이클을 보여줍니다.

WeChat Mini 프로그램 튜토리얼 등록 페이지