WeChatミニプログラム開発の詳しい説明

このシリーズは、初心者がシリーズに従って段階的に見て学ぶのに適しています

図 1 に示すコードを追加します。最初のページへ:index.js

図 1

[コンパイル] をクリックした後、この小さなプログラムを実行します: ログは図 2 に示されています: 初期ページのindex.js の起動はライフサイクル メソッドから開始されますアプリ内で js を呼び出します: onLaunch---onShow、そして開始します。index.js ページでライフサイクル メソッドを呼び出します: onLoad---onShow---onReady 「Background」をクリックすると、index.js ページが表示されます。このとき、図 3 に示すように、ライフ サイクル メソッド onHide がコールバックされます。ページをフォアグラウンドに戻すには、もう一度 [フォアグラウンド] をクリックすると、ページ ライフ サイクル メソッドがコールバックされます。図 4 に示すように、onShow (現時点では onLoad がコールバックされなくなっていることに注意してください)

図 2

図 3

図 4

2: ページジャンプ

図 5 に示すように、index.wxml コードを記述します。テキスト コンポーネントがイベント itemClick にバインドされていることがわかります。 itemClick メソッドの実装の詳細については、図 1:

itemClick: function (){
     console.log("---index page itemClick---");
    wx.navigateTo({
      url: '../logs/logs'
    })

を参照してください。 : wx.navigateTo は、index.js ページから pages/logs/logs ページへのジャンプを表します。 注: navigateTo は、ログ ページへのジャンプを表します。ログ ページの下では、インデックス ページに戻ることができます。 wx.redirectTo の場合は、インデックス ページが破棄され、ログ ページからインデックス ページに戻ることはできません。ここでは例として wx.navigateTo のみを取り上げます。

図 5

シミュレーターで記事 2 のテキスト コンポーネントをクリックすると、図 6 に示すように、対応するログ インターフェイスのログにジャンプします。ログ ページの対応する js コードを図 7 に示します。図 6 と図 7 を比較すると、インデックス ページからログ ページにジャンプする場合、インデックス ライフ サイクル メソッド onHide を最初に呼び出す必要があることがわかります (wx.redirectTo ジャンプの場合は、インデックス ライフ サイクル メソッド onUnload も呼び出す必要があります)。メソッド: onLoad---onShow---onReady

図 6

図 7

3: パラメーターページ間の転送

図 1 のindex.js コードを次のように変更します:

wx.navigateTo({

URL: "../logs/logs?id=1&title=title abc"

})

つまり:インデックス ページからログ ページにジャンプするとき、id=1 と title=title abc という 2 つのパラメーターが渡されます

図 7 に示すように、ログ ページのコードを見てみましょう。onLoad では、渡されたパラメーター id と title=title abc を取得します。 title にパラメータ: options を渡し、これら 2 つのパラメータをコード内のログに設定します。wxml によってバインドされた 2 つの変数のうち、articleId、pageTitle、表示結果と logs.wxml コードを図 8 に示します。

図 8

図 8 のシミュレーターの結果が表示され、ログ ページが表示されます。インデックス ページから渡された 2 つのパラメーター: id=1 と title=title abc

注:図 5 のコードに示すように、ページ ジャンプは .wxml で構成することもできます。記事 1 コンポーネントに対応するテキストは、次のコード構成を通じてジャンプできます:

<navigator url="../logs/logs?id=100&title=标题" >

WeChat アプレット開発の詳細な説明と関連記事については、 PHP 中国語 Web サイトにご注意ください。