WeChat アプレット Page() 関数の詳細な説明

WeChat ミニ プログラム—Page():

WeChat ミニ プログラムを開発するときに、機能や理解できないことに遭遇した場合は、公式 Web サイトにアクセスして対応する知識を確認するのが最善です。 ここで、エディターが役立ちます。 page() 関数の使用法を整理します。

ページの登録にはPage()関数を使用します。ページの初期データ、ライフサイクル関数、イベント処理関数などを指定するオブジェクト パラメーターを受け入れます。

オブジェクトパラメータの説明:

属性タイプの説明

data オブジェクト ページの初期データ

onLoad 関数 ライフサイクル関数 -- ページの読み込みを監視

onReady 関数 ライフサイクル関数 -- 初期読み込みの完了をリッスンページのレンダリング

onShow 関数 ライフサイクル関数 - ページの表示を監視

onHide 関数 ライフサイクル関数 - ページの非表示を監視

onUnload 関数 ライフサイクル関数 - ページのアンロードを監視

onPullDownRereash 関数 ページ関連のイベント処理関数 - ユーザーのダウンロードを監視プル アクション

その他 開発者はオブジェクト パラメーターに任意の関数またはデータを追加できます。これには次の

サンプル コードを使用してアクセスできます:

//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 に変換できる形式 (文字列、数値、ブール値、オブジェクト、配列) である必要があります。

レンダリングレイヤーは、WXML を通じてデータをバインドできます。

サンプルコード:

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

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

ライフサイクル関数

onLoad: ページの読み込み

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

パラメータを使用して、wx.navigateTo、wx.redirectTo を取得し、 でクエリを実行できます。

onShow: ページが開かれるたびにページ表示

が呼び出されます。

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

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

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

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

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

onUnload: ページのアンロード

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

ページ関連イベント処理関数

onPullDownRefresh: プルダウン更新

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

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

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

イベント処理関数

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

サンプルコード:

click me

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

Page.prototype.setData()

setData 関数はロジック層からビューにデータを送信するために使用されます。同時に、this.dataの対応する値を変更します。

注:

this.data を直接変更することは無効であり、ページのステータスを変更することもできません。また、データの不整合が発生します。

一度に設定できるデータは1024kBを超えないようにしてください。

setData() パラメータ形式

は、キーと値の形式でオブジェクトを受け取り、this.data のキーに対応する値を値に変更します。

キーは非常に柔軟で、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'   
  })   
 }   
})

以下をすぐに理解する必要はありませんが、後で役立ちます。

ライフサイクル

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

ページのルーティング


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

ルーティング方法

トリガーのタイミング Afterルーティング ページルーティング前 ページ

トリガータイミングプログラム onLoad、onShow によって開かれた最初のページ

新しいページを開く API wx.navigateTo を呼び出すか、コンポーネント onLoad、onShow onHide を使用します

ページ リダイレクト API wx.redirectTo を呼び出すか、コンポーネント onLoad、onShow onUnload を使用します

ページを返すAPI wx.navigateBack またはユーザーが左上隅の戻るボタンを押す onShow onUnload

タブ切り替え ユーザーがマルチタブ モードでタブを切り替えると、onLoad、onshow が初めて開きます。それ以外の場合は、onShow onHide

。上記は、WeChat アプレット Page() 関数の内容の詳細な説明です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。