WeChat Mini 프로그램 개발 등록 페이지 소개-미니 프로그램 개발-php.cn

WeChat Mini 프로그램 개발 등록 페이지 소개

高洛峰

풀어 주다： 2017-03-23 13:50:32

원래의

2160명이 탐색했습니다.

이 글은 주로 위챗 미니 프로그램 등록 페이지에 대한 정보를 소개하고 있습니다. 도움이 필요한 친구들은

위챗 미니 프로그램——페이지

를 참고하세요.

페이지()함수는 페이지를 등록하는데 사용됩니다. 페이지의 초기 데이터, 라이프 사이클 함수, 이벤트 처리 함수 등을 지정하는 객체 매개변수를 허용합니다.

객체 매개변수 설명:

onLoad td>

샘플 코드:

//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;)
 }
})

로그인 후 복사

페이지. 프로토타입.setData()

setData 함수는 this.data의 해당 값을 변경하면서 논리 계층에서 뷰 계층으로 데이터를 보내는 데 사용됩니다.

참고:

this.data를 직접 수정할 수 없으며 페이지의 상태를 수정할 수 없습니다. 변경되어 데이터 불일치가 발생합니다.
한 번에 설정하는 데이터는 1024kB를 초과할 수 없습니다. 한 번에 너무 많은 데이터를 설정하지 않도록 하세요.

setData() 매개변수 형식

은 key 형식의 객체 값을 허용하며, 이 값은 이 키에 해당하는 값을 나타냅니다. .data 값으로 변경합니다.
키는 매우 유연하며 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 프로그램 개발 등록 페이지 소개

페이지 라우팅

미니 프로그램의 모든 페이지 라우팅 모두 Framework에 의해 관리됩니다. 라우팅 트리거 방식과 페이지 생명주기 기능은 다음과 같습니다:

속성

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数--监听页面加载
onReady	Function	生命周期函数--监听页面渲染完成
onShow	Function	生命周期函数--监听页面显示
onHide	Function	生命周期函数--监听页面隐藏
onUnload	Function	生命周期函数--监听页面卸载
其他	Any	开发者可以添加任意的函数或数据到Object参数中，用this可以访问

유형

설명

data

Object

페이지의 초기 데이터

기능

수명 사이클 함수--페이지 로딩 수신

onReady

함수

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

onShow

함수

라이프 사이클 기능 - 모니터링 페이지 표시

onHide td>

기능

라이프 사이클 기능--페이지 숨김 듣기

onUnload

기능

라이프 사이클 기능--페이지 언로드 수신 대기

기타

모두

개발자는 이것을 사용하여 액세스할 수 있는 Object 매개변수에 함수나 데이터를 추가할 수 있습니다.

구성요소를 사용하세요. td>

라우팅 방법

트리거 타이밍

라우팅 후 페이지

이전 페이지 라우팅

초기화

애플릿이 연 첫 번째 페이지

onLoad, onShow

새 페이지 열기

API

路由方式	触发时机	路由后页面	路由前页面
初始化	小程序打开的第一个页面	onLoad，onShow
打开新页面	调用 API wx.navigateTo或使用组件	onLoad，onShow	onHide
页面重定向	调用 API wx.redirectTo或使用组件	onLoad，onShow	onUnload
页面返回	调用 API wx.navigateBack或用户按左上角返回按钮	onShow	onUnload
Tab切换	多 Tab 模式下用户切换 Tab	第一次打开 onLoad，onshow；否则 onShow	onHide