【小程序】uni-app 页面的传参和接参

这篇具有很好参考价值的文章主要介绍了【小程序】uni-app 页面的传参和接参。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

值得一提的是小程序只能使用字符串的方式进行传递,不像vue的路由传参。至于为什么要这样,这就需要看文档怎么说了。

1.传参

注意:传递参数只能以 ?key=value&key=value 方式传递

 <navigator
   v-for="item2 in item.children"
   :key="item2.cat_id"
   :url="`/pages/goods_detail/goods_detail?goods_id=${item2.cat_id}`"
 >
     <!-- 在起始页面跳转到goods_detail.vue页面并传递参数 -->
 </navigator>

2.接收参数

使用 onLoad() 钩子函数来接收

 onLoad(query){
     console.log("接收参数",query);      // query 就是传递过来的参数
 }

3.复杂数据传递和接收

小程序只能以 字符串的方式进行传递和接收,那么复杂类型对象和数组怎么传呢?

可以使用 encodeURIComponentdecodeURIComponent ,并解码编码配置 json格式来进行。

encodeURIComponent()  函数可把字符串作为 URI 组件进行编码。

注意 不转义的字符:     A-Z a-z 0-9 - _ . ! ~ * ' ( )

decodeURIComponent()  函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

传递参数

 goData(){
     const obj = {
         name:'jack',
         id:1
     }
     const arr = [1,2,'asdasd']
     // 进行编码并转换 json格式    
     const list = encodeURIComponent(JSON.stringify(arr))
     // 跳转传参
     uni.navigateTo({ url: '/pages/goods_detail/goods_detail?list='+list })
 }

接收参数文章来源地址https://www.toymoban.com/news/detail-434105.html

 onLoad(query){
     // 进行解码并 json格式转复杂类型
     const res = JSON.parse(decodeURIComponent(query.list))
     console.log("接收参数",res);
 }

到了这里,关于【小程序】uni-app 页面的传参和接参的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app分享小程序页面

    uni-app的小程序页面默认是不可分享的,点击页面右上角按钮进行分享时会提示:“当前页面不可转发/当前页面不可分享” 打开项目的manifest.json文件,在“App模块配置”项的“Share(分享)”下,勾选“微信分享”: 在代码中开启分享转发按钮 再次打开小程序页面,会发现已经

    2024年02月11日
    浏览(50)
  • uni-app小程序设置页面背景色

    在原生微信小程序中,可以通过下面的设置来设置页面背景色 但是在uni-app上,这样的设置在小程序端并没有起作用。 原因是因为style标签上加了scoped,那么如何在使用scoped的同时又能设置page背景色呢? 解决方案:

    2024年02月15日
    浏览(56)
  • uni-app 微信小程序 保存当前页面为图片

    由于在微信小程序环境下面没法获取dom,很多方法都很难去实现保存html结构的页面,比较有效的#painter 可以不需要操作dom,但是那玩意儿和重新用js写个页面一样,简单的页面还好,复杂的,元素比较多的就很麻烦,所以考虑用webview+html2canvas来完成 先说一下思路,既然在微

    2024年02月11日
    浏览(55)
  • uni-app | 小程序嵌入H5页面实现支付功能

    前一阵在做公司小程序时,有个需要对接支付的功能。但是本着订单数据和支付统一入口的设计原则,计划是对接公司商城现有的支付体系。故本方案是分析对接商城支付几种可行方案以及每种方案的可行性,最后综合选出一种最佳的方案。 实现方式 跳转商城小程序支付 跳

    2024年02月07日
    浏览(70)
  • uni-app小程序刷新当前页面的两种方法

    方法一 wx.relaunch来刷新当前页面,页面会被重载,若路由携带参数需自行拼接,方法如下 (如果用电脑打开小程序,该方法有bug) 上面是获取页面路由和参数的方法,具体使用如下 方法二(推荐) 通过获取该页面实例执行其内部的生命周期方法来刷新页面

    2024年02月12日
    浏览(55)
  • uni-app微信小程序,在页面顶部添加返回按键,返回上一个页面

    1.示例: 2.实现方式: 在page.json文件中的style里添加如下代码: 3.tips: 在page.json中的页面顺序就是小程序加载过程中的页面顺序

    2024年02月12日
    浏览(52)
  • uni-app框架 微信小程序页面显示正常,但安卓页面样式显示异常

    今天在继续复习uni-app项目时,使用模拟器运行时,突然发现封装的search组件样式无法正常显示,但是小程序页面又是正常的,打包后真机也是一样的结果。在uni-app的控制台报如下错误: [Vue warn]: Error in render: “TypeError: Cannot read property ‘children’ of undefined” TypeError: Cannot rea

    2024年04月11日
    浏览(69)
  • uni-app小程序uni.navigateBack返回上一个页面并传递参数.返回上个页面并刷新

    返回上一个打开的页面并传递一个参数。有种办法就是使用 假如从B页面返回A页面: 经过测试,在uni.app中使用B页面使用setData设置A页面参数无法实现(应该是被更改为常量属性了)。 打印console.log(prevPage)前一页面对象可得: 方法1:我们可以使用A页面原有方法 B页面传递:

    2024年02月16日
    浏览(62)
  • uni-app 返回上一个页面并传递参数(微信小程序)

    方法一 问题: 会记住每次返回. 并在下次获取参数时把所有的返回监听进行 全部返回 ( 不确定别人使用时是否会出现此问题 ) 打印示例结果如下: 打印说明: 获取用户信息1: 为每次进入第二个页面 (onload) 请求的数据 监听到事件来自返回的参数: 为第一个页面监听获取的数据 方

    2024年02月09日
    浏览(71)
  • uni-app小程序跳转其他小程序、获取目标小程序的页面地址

    一、小程序中跳转其他小程序 1、在manifest.json中的mp-weixin目录下添加配置(替换目标小程序appid) 2、在需要跳转的页面添加按钮点击事件,替换path以及传参 二、获取其他小程序页面地址 微信小程序中官方文档获取地址入口已经关闭不能用了(https://kf.qq.com/faq/180725biaAn21807

    2024年02月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包