前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >小程序中页面传参的方式你都知道吗

小程序中页面传参的方式你都知道吗

作者头像
万少
发布2025-02-11 14:10:35
发布2025-02-11 14:10:35
10500
代码可运行
举报
运行总次数:0
代码可运行

小程序中页面传参的方式你都知道吗

主要有以下几种方式

  • url传参
  • 事件通道 EventChannel
  • 本地存储
  • 应用全局变量
  • 公共变量

url传参

方式和web中的方式一致。

index1 页面

代码语言:javascript
代码运行次数:0
复制
<navigator url="/pages/index2/index2?name=海贼王">页面2</navigator>

或者

代码语言:javascript
代码运行次数:0
复制
    wx.navigateTo({
      url: "/pages/index2/index2?name=海贼王"
    })

index2 页面

代码语言:javascript
代码运行次数:0
复制
  onLoad: function (options) {
    console.log(options);// { name : 海贼王}
  },

需要注意的是,如果 index2 是tabbar页面,那么无法在onLoad中获取页面参数

事件通道 EventChannel

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

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

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

index1.wxml

代码语言:javascript
代码运行次数:0
复制
<view>
  来自于页面2 传递的数据: {{msg}}
</view>

index1.js

代码语言:javascript
代码运行次数:0
复制
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

代码语言:javascript
代码运行次数:0
复制
Page({
  onLoad: function () {
    // 被使用 wx.navigatorTo打开的页面获取获取到一个事件通道对象
    const EventChannel = this.getOpenerEventChannel();
    // 触发事件和传递参数到 页面1中
    EventChannel.emit("data", { name: '海贼王' });
  }
})

本地存储

小程序中的本地存储用法类似web中,可以实现在整个应用中获取数据和存储数据

index1.js

代码语言:javascript
代码运行次数:0
复制
wx.setStorageSync('data', {name:'海贼王'});// 可以直接存任意类型的数据

index2.js

代码语言:javascript
代码运行次数:0
复制
wx.getStorageSync('data');// 获取

应用全局变量

不同的页面都是处于一个共同的应用当中的,这个应用可以理解为 app.js

app.js

在这里可以定义公共数据

代码语言:javascript
代码运行次数:0
复制
App({
  myData: {
    name: "悟空"
  }
})

index1.js

页面中可以通过 getApp 来获取

代码语言:javascript
代码运行次数:0
复制
    let app = getApp();
    console.log(app.myData);

当然也可以直接修改

代码语言:javascript
代码运行次数:0
复制
    let app = getApp();
    app.myData.name="八戒";

公共变量

单独定义一个独立的js文件,把数据存储进去,即可

common.js

代码语言:javascript
代码运行次数:0
复制
const data = {
  name: "海贼王"
};

module.exports = data;

index1.js

代码语言:javascript
代码运行次数:0
复制
const data = require("../../common");
Page({
  onLoad: function () {
    console.log(data);
  },
})

听懂掌声

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小程序中页面传参的方式你都知道吗
    • url传参
      • index1 页面
      • index2 页面
    • 事件通道 EventChannel
      • index1.wxml
      • index1.js
      • index2.js
    • 本地存储
      • index1.js
      • index2.js
    • 应用全局变量
      • app.js
      • index1.js
    • 公共变量
      • common.js
      • index1.js
    • 听懂掌声
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档