WeChat ミニ プログラム Page() 関数の概要

この記事では主に、WeChat アプレットの Page() 関数の詳細な説明に関する情報を紹介します。必要な方の参考になれば幸いです。

WeChat アプレット ——PAGE ():
WeChat ミニプログラムを開発するときに関数に遭遇したり、理解できない場所がある場合は、公式 Web サイトにアクセスして、対応する知識をまとめるのをお手伝いします。ページ () 関数の使用法。

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

objectパラメータの説明:

属性TypedataObjectFunctionFunctionFunction関数関数関数Any

Description

ページの初期データ

onLoad

lifeサイクル関数 -- ページの読み込みをリッスン

onReady

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

onShow

ライフサイクル関数 -- ページの表示をリッスン

onHide

ライフサイクル関数--ページの非表示をリッスン

onUnload

ライフサイクル関数--ページのアンロードをリッスン

onPullDownRefresh

ページ関連のイベント処理function -- ユーザーのプルダウン アクションをリッスンします

Others

開発者は、この

でアクセスできるオブジェクト パラメータに任意の関数またはデータを追加できます。

サンプルコード:

//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 で定義されたイベント処理関数が実行されます。

サンプルコード:

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

Page.prototype.setData()

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

注:

this.data を直接変更することは無効であり、ページのステータスを変更することもできません。また、データの不整合が発生します。
一度に設定できるデータは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' 
  }) 
 } 
})

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

ライフサイクル

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

ページルーティング

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

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

を使用しますonHide その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。 関連する推奨事項: WeChat ミニ プログラムでの wx:for および wx:for-item の使用 WeChat ミニ プログラムの getUserInfo コールバックの概要

トリガータイミング	ルーティング後のページ	ルーティング前のページ
初期化	アプレットによって開かれた最初のページ	onLoad、onShow
新しいページを開く	APIを呼び出すwx.navigateTo またはコンポーネント	onLoad, onShow	onHide
Page Redirect	Call API wx.redirectTo を使用するか、コンポーネント	onLoad, onShow	onUnload onUnload onshow; それ以外の場合は onShow

以上がWeChat ミニ プログラム Page() 関数の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。