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

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

青灯夜游
リリース: 2021-10-27 09:41:49
転載
3072 人が閲覧しました

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

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

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

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

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> let app = getApp(); console.log(app.myData);</pre><div class="contentsignin">ログイン後にコピー</div></div>## を通じて取得できます #もちろん、直接変更することもできます

    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 までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート