### [带大家聊聊小程序中的几种页面传参方式](https://www.prosaas.cn/article/16368)

**Published:** 2021-10-25T02:52:39

**Author:** 5201314

**Excerpt:** 本篇文章给大家介绍一下小程序中的几种页面传参方式，希望对大家有所帮助！小程序中页面传参的方式url传参方式和w…

本篇文章给大家介绍一下小程序中的几种页面传参方式，希望对大家有所帮助！

![](https://img.php.cn/upload/article/000/000/024/61761b72c543e138.jpg)

## **小程序中页面传参的方式**

**url传参**

方式和web中的方式一致。

**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` 是tabbar页面，那么无法在onLoad中获取页面参数。【相关学习推荐：小程序开发教程】

**事件通道 EventChannel**

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

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

这两个 `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: '海贼王' });
  }
})

**本地存储**

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

**index1.js**

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

**index2.js**

wx.getStorageSync('data');// 获取

**应用全局变量**

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

**app.js**

在这里可以定义公共数据

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

**index1.js**

页面中可以通过 `getApp` 来获取

    let app = getApp();
    console.log(app.myData);

当然也可以直接修改

    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);
  },
})

更多编程相关知识，请访问：编程视频！！

以上就是带大家聊聊小程序中的几种页面传参方式的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** JS, this, 事件, 全局变量, 对象

**Categories:** 后端开发

---