ホームページ  >  記事  >  WeChat アプレット  >  ミニプログラムでのいくつかのページパラメータ転送メソッドについて話しましょう。

ミニプログラムでのいくつかのページパラメータ転送メソッドについて話しましょう。

青灯夜游
青灯夜游転載
2021-10-25 10:52:393045ブラウズ

この記事では、ミニ プログラムでのページ パラメーターの受け渡し方法をいくつか紹介します。お役に立てば幸いです。

ミニプログラムでのいくつかのページパラメータ転送メソッドについて話しましょう。

ミニ プログラムのページでパラメータを渡す方法

URL を介してパラメータを渡す

この方法は Web の方法と一致しています。

index1 Page

<navigator url="/pages/index2/index2?name=海贼王">页面2</navigator>

または

    wx.navigateTo({
      url: "/pages/index2/index2?name=海贼王"
    })

index2 Page

  onLoad: function (options) {
    console.log(options);// { name : 海贼王}
  },

支払う必要がありますはい、index2 がタブバーページの場合、onLoad でページパラメータを取得できないことに注意してください。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

イベント チャネル EventChannel

ページがwx.navigateTo を通じて別のページが開かれ、2 つのページ間にデータ チャネルが確立されます。

  • 開いたページは # を通じて開くことができます。 ## this.getOpenerEventChannel() メソッドで EventChannel オブジェクトを取得します;
  • wx.navigateTosuccess コールバックにも含まれますEventChannel オブジェクト。
これら 2 つの

EventChannel オブジェクトは、emit メソッドと on メソッドを使用してイベントを送信したりリッスンしたりできます。

index1.wxml

<view>
  来自于页面2 传递的数据: {{msg}}
</view>

index1.js

Page({
  data: {
    msg: ""
  },
  onLoad: function () {
    // 1 跳转到页面2
    wx.navigateTo({
      url: "/pages/index2/index2",
      // 2 在成功的回调函数中获取事件通道对象
      success: ({ eventChannel }) => {
        // 3 监听自定义事件
        eventChannel.on("data", (e) => {
          // 4 获取页面2传递过来的数据 设置到 data中
          this.setData({
            msg: e.name
          })
        })
      }
    });
  },
})

index2.js

Page({
  onLoad: function () {
    // 被使用 wx.navigatorTo打开的页面获取获取到一个事件通道对象
    const EventChannel = this.getOpenerEventChannel();
    // 触发事件和传递参数到 页面1中
    EventChannel.emit("data", { name: &#39;海贼王&#39; });
  }
})

ローカル ストレージ

アプレットでのローカル ストレージの使用量は Web での使用量と似ており、アプリケーション全体でデータを取得して保存できます

index1.js

wx.setStorageSync(&#39;data&#39;, {name:&#39;海贼王&#39;});// 可以直接存任意类型的数据

index2.js

wx.getStorageSync(&#39;data&#39;);// 获取

グローバル変数の適用

異なるページが共通のアプリケーション内にあります。このアプリケーションは

app.js

app.js # として理解できます##パブリック データはここで定義できます

App({
  myData: {
    name: "悟空"
  }
})

index1.js

ページは

getApp

<pre class="brush:js;toolbar:false;"> let app = getApp(); console.log(app.myData);</pre>## を通じて取得できます #もちろん、直接変更することもできます

    let app = getApp();
    app.myData.name="八戒";

パブリック変数

独立した js ファイルを別途定義し、その中にデータを保存します

common.js

const data = {
  name: "海贼王"
};

module.exports = data;
index1.js

const data = require("../../common");
Page({
  onLoad: function () {
    console.log(data);
  },
})
プログラミング関連の知識の詳細については、こちらをご覧ください: プログラミング ビデオ

! !

以上がミニプログラムでのいくつかのページパラメータ転送メソッドについて話しましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。