> 위챗 애플릿 > 미니 프로그램 개발 > 미니 프로그램의 여러 페이지 매개변수 전달 방법에 대해 이야기해 보겠습니다.

미니 프로그램의 여러 페이지 매개변수 전달 방법에 대해 이야기해 보겠습니다.

青灯夜游
풀어 주다: 2021-10-27 09:41:49
앞으로
3072명이 탐색했습니다.

이 기사에서는 미니 프로그램의 여러 페이지 매개변수 전달 방법을 소개하겠습니다.

미니 프로그램의 여러 페이지 매개변수 전달 방법에 대해 이야기해 보겠습니다.

미니 프로그램에서 페이지 매개변수 전달 방법

url 매개변수 전달

은 웹에서의 방법과 동일합니다.

index1 페이지

<navigator url="/pages/index2/index2?name=海贼王">页面2</navigator>
로그인 후 복사

또는

    wx.navigateTo({
      url: "/pages/index2/index2?name=海贼王"
    })
로그인 후 복사

index2 페이지

  onLoad: function (options) {
    console.log(options);// { name : 海贼王}
  },
로그인 후 복사

index2가 탭바 페이지인 경우 onLoad에서 페이지 매개변수를 얻을 수 없다는 점에 유의해야 합니다. [관련 학습 권장사항: 미니 프로그램 개발 튜토리얼index2 是tabbar页面,那么无法在onLoad中获取页面参数。【相关学习推荐:小程序开发教程

事件通道 EventChannel

如果一个页面由另一个页面通过 wx.navigateTo 打开,这两个页面间将建立一条数据通道:

  • 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象;
  • wx.navigateTosuccess 回调中也包含一个 EventChannel 对象。

这两个 EventChannel 对象间可以使用 emiton 方法相互发送、监听事件。

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]

이벤트 채널 EventChannel wx.navigateTo

Open, 두 페이지 사이에 데이터 채널이 설정됩니다:

  • 열린 페이지는 this.getOpenerEventChannel()을 통해 열 수 있습니다. </ code> 메소드를 사용하여 <code>EventChannel 객체를 획득합니다.
  • wx.navigateTosuccess 콜백에는 <도 포함되어 있습니다. 코드> EventChannel 객체.

두 개의 EventChannel 개체는 emiton 메서드를 사용하여 서로 이벤트를 보내고 수신할 수 있습니다. .

index1.wxml

r

    let app = getApp();
    console.log(app.myData);
로그인 후 복사
index1.js

r

    let app = getApp();
    app.myData.name="八戒";
로그인 후 복사
index2.js

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

module.exports = data;
로그인 후 복사
🎜🎜🎜local stac 애플리케이션 전반에 걸쳐 구현 가능 🎜🎜🎜index1.js🎜🎜
const data = require("../../common");
Page({
  onLoad: function () {
    console.log(data);
  },
})
로그인 후 복사
🎜🎜index2.js🎜🎜rrreee🎜🎜🎜Apply 전역 변수🎜🎜🎜🎜다른 페이지가 공통 애플리케이션에 있으므로 이 애플리케이션이 이해할 수 있음 app.js🎜🎜🎜app.js🎜🎜🎜의 경우 공개 데이터는 여기에서 정의할 수 있습니다🎜rrreee🎜🎜index1.js🎜🎜🎜 페이지는 getApp를 통해 얻을 수 있습니다 🎜 rrreee🎜물론 🎜rrreee🎜🎜🎜공용 변수🎜🎜🎜🎜를 직접 수정하여 독립적인 js 파일을 별도로 정의하고 그 안에 데이터를 저장할 수도 있습니다. 🎜🎜🎜common.js🎜🎜rrreee🎜🎜index1. js🎜🎜 rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 미니 프로그램의 여러 페이지 매개변수 전달 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿