サンプルコード:

//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. 
 }, 
 onPullDownRefresh: function() { 
  // Do something when pull down 
 }, 
 // Event handler. 
 viewTap: function() { 
  this.setData({ 
   text: 'Set some data for updating view.' 
  }) 
 } 
})

初期化データ

初期化データは、ページの最初のレンダリングとして使用されます。データはロジック層からレンダリング層に JSON 形式で送信されるため、データは JSON に変換できる形式 (文字列、數(shù)値、ブール値、オブジェクト、配列) である必要があります。
レンダリングレイヤーは、WXML を通じてデータをバインドできます。

サンプルコード:

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

Page({ 
 data: { 
  text: 'init data', 
  array: [{msg: '1'}, {msg: '2'}] 
 } 
})

ライフサイクル関數(shù)

onLoad: ページの読み込み

ページは 1 回だけ呼び出されます。

パラメータは、wx.navigateTo、wx.redirectTo、 でクエリを取得できます。

onShow: ページ表示

はページが開かれるたびに呼び出されます。

onReady: ページの最初のレンダリングが完了します

ページは 1 回だけ呼び出されます。これは、ページの準(zhǔn)備ができており、ビュー レイヤーと対話できることを意味します。

onReadyの後にwx.setNavigationBarTitleなどのインターフェース設(shè)定を行ってください。詳細についてはライフサイクルを參照してください

onHide: ページが非表示になります

navigateTo または下部タブが切り替わったときに呼び出されます。

onUnload: ページのアンロード

redirectTo または navigateBack のときに呼び出されます。

ページ関連のイベント処理関數(shù)

onPullDownRefresh: プルダウン更新

ユーザーのプルダウン更新イベントをリッスンします。

設(shè)定のウィンドウオプションでenablePullDownRefreshを有効にする必要があります。

データ更新の処理後、wx.stopPullDownRefresh は現(xiàn)在のページのプルダウン更新を停止できます。

イベント処理関數(shù)

初期化データとライフサイクル関數(shù)に加えて、Page はいくつかの特別な関數(shù)、つまりイベント処理関數(shù)も定義できます。レンダリング層では、コンポーネントにイベント バインディングを追加でき、トリガー イベントに到達すると、Page で定義されたイベント処理関數(shù)が実行されます。

サンプルコード:

Page({ 
 viewTap: function() { 
  console.log('view tap') 
 } 
})

Page.prototype.setData()

関數(shù)を使用しますにuse データはロジック層からビュー層に送信され、同時に this.data の対応する値が変更されます。

注:

this.data を直接変更することは無効であり、ページのステータスを変更することもできません。また、データの不整合が発生します。
一度に設(shè)定できるデータは1024kBを超えないようにしてください。

setData()のパラメータ形式

は、keyとvalueの形式でオブジェクトを受け取り、this.dataのkeyに対応する値をvalueに変更します。
キーは非常に柔軟であり、array[2].message、a.b.c.d などのデータ パスの形式で指定でき、this.data で事前に定義する必要はありません。

サンプルコード:

<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: 'init data', 
  array: [{text: 'init data'}], 
  object: { 
   text: 'init data' 
  } 
 }, 
 changeText: function() { 
  // this.data.text = 'changed data' // bad, it can not work 
  this.setData({ 
   text: 'changed data' 
  }) 
 }, 
 changeItemInArray: function() { 
  // you can use this way to modify a danamic data path 
  this.setData({ 
   'array[0].text':'changed data' 
  }) 
 }, 
 changeItemInObject: function(){ 
  this.setData({ 
   'object.text': 'changed data' 
  }); 
 }, 
 addNewField: function() { 
  this.setData({ 
   'newField.text': 'new data' 
  }) 
 } 
})

以下の內(nèi)容をすぐに理解する必要はありませんが、後で役立ちます。

ライフサイクル

次の図は、ページ インスタンスのライフ サイクルを示しています。

ページルーティング

ミニプログラムでは、すべてのページのルーティングはフレームワークによって管理されます。ルーティングのトリガー方法とページライフサイクル機能は次のとおりです。
ルーティングメソッド

トリガー時間 ルーティング後のページ ルーティング前のページ