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

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

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

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

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:php;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 サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。