登录  /  注册

带大家聊聊小程序中的几种页面传参方式

青灯夜游
发布: 2021-10-25 10:52:39
转载
2763人浏览过

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

带大家聊聊小程序中的几种页面传参方式

小程序中页面传参的方式

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.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 来获取

    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);
  },
})
登录后复制

更多编程相关知识,请访问:编程视频!!

以上就是带大家聊聊小程序中的几种页面传参方式的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号