ミニプログラム開発ページサンプルコード

ページ(オブジェクトオブジェクト)

東莞ミニプログラム開発ページのサンプルコード、ミニプログラムにページを登録します。ページの初期データ、ライフサイクル コールバック、イベント処理関数などを指定するオブジェクト タイプのパラメータを受け入れます。

パラメータ

オブジェクトオブジェクト

東莞アプレット開発ページのサンプルコード

//index.jsページ({
  データ： {
    テキスト:「これはページデータです。」
  },
  onLoad: 関数(オプション) {
    // ページの読み込み時に初期化を実行します。
  },
  onReady: 関数() {
    // ページの準備ができたら何かを実行します。
  },
  onShow: 関数() {
    // ページが表示されたら何かを実行します。
  },
  onHide: 関数() {
    // ページが非表示になったときに何かを実行します。
  },
  onUnload: 関数() {
    // ページが閉じるときに何かを実行します。
  },
  onPullDownRefresh: 関数() {
    // プルダウン時に何かを実行します。
  },
  onReachBottom: 関数() {
    // ページの下部に到達したら何かを実行します。
  },
  onShareAppMessage: 関数 () {
    // ユーザーが共有するときにカスタム共有データを返します。
  },
  onPageScroll: 関数() {
    // ページスクロール時に何かする
  },
  onResize: 関数() {
    // ページのサイズが変わったときに何かする
  },
  onTabItemTap(アイテム) {
    console.log(アイテム.インデックス)
    console.log(アイテム.ページパス)
    console.log(アイテム.テキスト)
  },
  // イベント ハンドラー。
  ビュータップ: 関数() {
    this.setData({
      テキスト: 'ビューを更新するためのデータを設定します。'
    }、 関数（） {
      // これはsetDataコールバックです
    })
  },
  カスタムデータ: {
    こんにちは: 'ミナ'
  }})

小規模プログラム開発データ

data は、ページが最初にレンダリングされるときに使用される初期データです。

ページが読み込まれると、データはロジック レイヤーからレンダリング レイヤーに JSON 文字列の形式で渡されるため、data 内のデータは JSON に変換できる型 (文字列、数値、ブール値、オブジェクト、配列) である必要があります。

レンダリング レイヤーは WXML 経由でデータをバインドできます。

ミニプログラム開発データサンプルコード:

開発者ツールで効果をプレビューする

<ビュー>{{テキスト}}</ビュー><ビュー>{{配列[0].msg}}</ビュー>

ページ（{
  データ： {
    テキスト: 'init data'、
    配列: [{メッセージ: '1'}, {メッセージ: '2'}]
  }})

ミニプログラム開発ライフサイクルコールバック関数

ライフサイクルとページルーティングのトリガーの詳細については、

onLoad(オブジェクトクエリ)

ページが読み込まれたときに発生します。ページは 1 回だけ呼び出され、現在のページのパスのパラメータは onLoad パラメータで取得できます。

パラメータ:

オンショー()

ページがフォアグラウンドに表示されたり切り取られたりしたときに発生します。

準備完了()

ページの初期レンダリングが完了したときに発生します。ページは 1 回だけ呼び出され、ページがビュー レイヤーと対話する準備ができていることを示します。

注意: wx.setNavigationBarTitle などのインターフェース コンテンツを設定する API は、onReady の後に実行する必要があります。詳細については、ライフサイクルを参照してください。

非表示()

ページが非表示になったり、背景に入ったりしたときにトリガーされます。 たとえば、wx.navigateTo または下部のタブで他のページに切り替わり、ミニプログラムはバックグラウンドに移動します。

onUnload()

ページがアンロードされたときに発生します。他のページへの wx.redirectTo または wx.navigateBack など。

ページイベント処理関数

onPullDownRefresh()

ユーザーのプルツーリフレッシュ イベントをリッスンします。

• app.json の window オプションまたはページ設定で enablePullDownRefresh を有効にする必要があります。
• wx.startPullDownRefresh を使用すると、プルダウンの更新アニメーションをトリガーして、プルダウンの更新をトリガーできます。その効果は、ユーザーが手動でプルダウンして更新するのと同じです。
• データの更新を処理した後、wx.stopPullDownRefresh は現在のページのプルダウンの更新を停止できます。

オンリーチボトム()

ユーザーのプルアップボトミングイベントをリッスンします。

• トリガー距離 onReachBottomDistance は、app.json の window オプションまたはページ構成で設定できます。
• このイベントは、トリガー距離内でスライドしている間に 1 回だけトリガーされます。

onPageScroll(オブジェクトオブジェクト)

ユーザー ページのスライド イベントをリッスンします。

ParametersObject オブジェクト:

注意: このメソッドは必要な場合にのみページで定義し、空のメソッドを定義しないでください。レンダリング層とロジック層の通信における不要なイベントディスパッチの影響を軽減します。 注意: ロジック レイヤーとレンダリング レイヤー間の通信を引き起こす setData などの操作を onPageScroll で頻繁に実行しないようにしてください。特に、毎回大量のデータを送信する場合は、通信時間に影響を及ぼします。

onShareAppMessage(オブジェクトオブジェクト)

ページ上の転送ボタン (ボタン コンポーネント open-type="share") または右上隅のメニューの [転送] ボタンをクリックするユーザーの動作を監視し、転送されるコンテンツをカスタマイズします。

注: このイベントハンドラが定義されている場合にのみ、右上隅のメニューに「進む」ボタンが表示されます。

ParametersObject オブジェクト:

このイベント ハンドラー関数は、カスタム転送コンテンツのオブジェクトを返す必要があります。返されるコンテンツは次のとおりです。

カスタム転送コンテンツ基本ライブラリ 2.8.1 以降では、共有画像でクラウド画像がサポートされるようになりました。

サンプルコード

開発者ツールで効果をプレビューする

ページ（{
  onShareAppMessage: 関数 (res) {
    if (res.from === 'ボタン') {
      // ページ内の進むボタンから console.log(res.target)
    }
    戻る {
      タイトル: 「カスタム転送タイトル」
      パス: '/page/user?id=123'
    }
  }})

onResize(オブジェクトオブジェクト)

サポートは基本ライブラリ 2.4.0 から利用可能であり、下位バージョンとの互換性が必要です。

アプレット画面が回転したときにトリガーされます。詳細については、「応答表示領域の変更」を参照してください。

onTabItemTap(オブジェクトオブジェクト)

サポートは基本ライブラリ 1.9.0 から利用可能であり、下位バージョンとの互換性が必要です。

タブがクリックされたときにトリガーされます

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

サンプルコード:

ページ（{
  onTabItemTap(アイテム) {
    console.log(アイテム.インデックス)
    console.log(アイテム.ページパス)
    console.log(アイテム.テキスト)
  }})

コンポーネントイベント処理関数

コンポーネント イベント処理関数も Page で定義できます。レンダリング レイヤーのコンポーネントにイベント バインディングを追加します。イベントがトリガーされると、ページで定義されたイベント処理関数が実行されます。

サンプルコード:

開発者ツールで効果をプレビューする

<view bindtap="viewTap"> クリックしてください </view>

ページ（{
  ビュータップ: 関数() {
    console.log('タップを表示')
  }})

ページルート

サポートは基本ライブラリ 1.2.0 から利用可能であり、下位バージョンとの互換性が必要です。

現在のページへのパス（文字列型）。

ページ（{
  onShow: 関数() {
    コンソールログ(このルート)
  }})

Page.prototype.setData(オブジェクトデータ、関数コールバック)

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

ミニプログラム開発ページパラメータの説明

オブジェクトはキー:値の形式で表されます。this.data 内のキーに対応する値を値に変更します。

キーはデータパスの形式で指定することができ、配列内の項目やオブジェクトのプロパティ（array[2].message、abcdなど）の変更をサポートし、this.dataで事前に定義する必要はありません。

知らせ：

1. this.setData を呼び出さずに this.data を直接変更すると、ページの状態は変更されず、データの不整合が発生します。
2. JSON 対応データの設定のみをサポートします。
3. 一度に設定するデータは 1024kB を超えることはできません。一度に設定しすぎるデータは避けてください。
4. データ内のどの項目の値を undefined に設定しないでください。そうしないと、項目が設定されず、潜在的な問題が発生する可能性があります。

サンプルコード:

開発者ツールで効果をプレビューする

<!--index.wxml--><view>{{text}}</view><button bindtap="changeText"> 法線データの変更 </button><view>{{num}}</view><button bindtap="changeNum"> 法線数値の変更 </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> 配列データの変更 </button><view>{{object.text}}</view><button bindtap="changeItemInObject"> オブジェクトデータの変更 </button><view>{{newField.text}}</view><button bindtap="addNewField"> 新しいデータの追加 </button>

 // index.jsPage({
  データ： {
    テキスト: 'init data'、
    番号: 0,
    配列: [{text: 'init data'}],
    物体： {
      テキスト: 'init data'
    }
  },
  テキストの変更: 関数() {
    // this.data.text = '変更されたデータ' // this.data を直接変更しないでください
    // setData を使用する必要があります
    this.setData({
      テキスト: '変更されたデータ'
    })
  },
  数値の変更: 関数() {
    // あるいは、this.data を変更し、すぐに setData を使用して変更されたフィールドを設定することもできます。this.data.num = 1
    this.setData({
      数値: this.data.num })
  },
  配列内の項目を変更する: 関数() {
    // オブジェクトまたは配列フィールドの場合、その下のサブフィールドを直接変更できます。これは通常、オブジェクトまたは配列全体を変更するよりも優れています。this.setData({
      'array[0].text':'変更されたデータ'
    })
  },
  オブジェクト内のアイテムを変更: 関数(){
    this.setData({
      'object.text': '変更されたデータ'
    });
  },
  新しいフィールドを追加します: 関数() {
    this.setData({
      'newField.text': '新しいデータ'
    })
  }})