uniapp开发微信小程序,路由跳转传参多种方式

news/2024/7/20 1:20:02 标签: 微信小程序, uni-app, 小程序

方式一:

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});


// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

方式二:

// 在起始页面跳转到test.vue页面,并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面,向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

url有长度限制,太长的字符串会传递失败,可改用窗体通信全局变量,另外参数中出现空格等特殊字符时需要对参数进行编码,如下为使用encodeURIComponent对参数进行编码的示例。

            let URLcoursePay = encodeURIComponent(JSON.stringify(e))
            let url = `/pagesA/course/course?item=${URLcoursePay}`
            uni.navigateTo({
                url
            })
           
// 在test.vue页面接受参数
onLoad: function (option) {
 let optionItem = decodeURIComponent(option.item)
            let Obj=JSON.parse(optionItem)
            console.log(Obj);
}

页面通讯:

uni.$emit(eventName,OBJECT)

触发全局的自定义事件。附加参数都会传给监听器回调。

    uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。

    uni.$on('update',function(data){
        console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
    })

uni.$off([eventName, callback])

移除全局自定义事件监听器.

Tips

  • 如果没有提供参数,则移除所有的事件监听器;

  • 如果只提供了事件,则移除该事件所有的监听器;

  • 如果同时提供了事件与回调,则只移除这个回调的监听器;

  • 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;

注意事项

  • uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等

  • 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听

Tips

  • 如果页面没有打开,将不能 注册监听事件 uni.$onuni.$once

  • 一次性的事件,直接使用 uni.$once 监听,不需要移除。

特别需要注意的是如果页面没有打开 那么相当于uni.$on就没有被注册到监听事件

一般业务场景是 页面1跳转页面2 ;1给2传递信息 ,那么emit写在1,这个时候2写的$on,当页面1触发emit并跳转页面2时候,1页面emit触发时 2页面的事件并没有监听,所以会通讯失败,只有是当2页面传递给1页面信息时候,那么进入1页面会先监听事件,再在2页面emit传值,才符合逻辑。

但是像一级页面跳转二级页面传值,可以通过上面讲的方式二中可以实现


http://www.niftyadmin.cn/n/176459.html

相关文章

银河麒麟v10sp2安装nginx

nginx官网下载:http://nginx.org/download/ 银河麒麟系统请先检查yum源是否配置,若没有配置请参考:https://qdhhkj.blog.csdn.net/article/details/129680789 一、安装 1、yum安装依赖 yum install gcc gcc-c make unzip pcre pcre-devel …

xss labs(11-14)

pass11这里是直接查看的源码的,结果发现也是有很多input标签,并且不知道为啥还有个标签的参数的我上一道题构造的表达式等我随便执行一个,他就没有了还是依照上一题的语句进行注入,结果发现还是只有一个回显了,而且对双…

从零到亿学pytorch系列一:使用远程服务器在pycharm上运行简单的训练模型

参考视频和代码来源详见up主Leo在这的b站教学视频:1、Pytorch的安装与环境配置【小学生都会的Pytorch】_哔哩哔哩_bilibili如何在pycharm上连接远程服务器详见:(7条消息) 如何使用租用的云服务器实现神经网络训练过程(超详细教程,…

2023年3月广东软考中/高级报名在这里,高效备考

软考是全国计算机技术与软件专业技术资格(水平)考试(简称软考)项目,是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试,既属于国家职业资格考试,又是职称资格考试。 系统集成…

【Unity3D简单项目开发】疯狂点击01

使用Unity3D的内置资源,制作一个简单的游戏项目,通过这个项目,掌握使用Unity3D开发简单游戏的一个基本流程。第一步,使用Unity Hub创建一个项目,选择一个Unity版本之后,点击创建即可。注意,在创…

MySQL 执行计划分析

文章目录前言idselect_typetabletype(重要)possible_keyskey(重要)key_lenrefrowsExtra(重要)前言 执行计划 是指一条 SQL 语句在经过 MySQL 查询优化器 的优化会后,具体的执行方式。 执行计划…

黑盒预测模型有哪些问题?可解释模型有哪些重要意义?

随着大数据的积累和算法的复杂化,"黑盒"模型已经越来越成为主流。纵观一下预测类文章,很多都是"大而复杂的黑盒模型"。"黑盒模型"固然有其好处,即预测性能高,但缺点很明显,那就是可解释…

Swagger2与openAPI3主机更改说明

1 注解对应修改说明 Swagger2ApiFox标注位置ApiTag(name “接口类名”,description “接口类描述”)Controller 控制层ApiOperationOperation(summary “接口方法描述”)Controller 控制层ApiImplicitParamsParametersController 控制层的方法参数参数ApiImplicitParamParam…