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、0e1e9be57d3815196e4c83d329f1e05f でクエリを取得できます。

onShow: ページ表示

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

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

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

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

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

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

onUnload: ページのアンロード

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

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

onPullDownRefresh: プルダウン更新

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

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

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

イベント処理関数

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

サンプルコード:

28fc5bc5e96f2874305665c92c2f4c7d

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 またはコンポーネント 57a737e6177310cdb6fcd032ddad3df4	onLoad, onShow	onHide
Page Redirect	Call API wx.redirectTo を使用するか、コンポーネント 57a737e6177310cdb6fcd032ddad3df4	onLoad, onShow	onUnload onUnload onshow; それ以外の場合は onShow

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