微信小程序页面传参(多条数据的传递)

简介: 本文介绍了微信小程序中页面间参数传递的方法。1) 单个数据传递:通过`wx.navigateTo`将ID拼接在URL中传递,接收页面在`onLoad`中获取。2) 多个参数传递:将数据转换为JSON字符串,然后通过URL参数传递,接收页面同样在`onLoad`中解析JSON恢复数据。3) 提到了JSON作为数据交换格式的基础知识。全文鼓励读者尝试并点赞。

微信小程序页面传参(多条数据的传递)

1.单个数据的传参
image.png

传递页面

//去商品详情页
goDetail(e){
   
   
  let id=e.currentTarget.dataset.item._id
  console.log("单个参数的传递",id)
  wx.navigateTo({
   
   
    url: '/pages/shop_detail/shop_detail?id='+id,
  })
},

接受页面

 onLoad (e) {
   
   
  console.log('接受到传送的单个参数',e)
}

2.多个参数的传递
image.png

代码(要传递参数的页面)

 getpass: function(e) {
   
   
    let id = e.currentTarget.dataset.id;
    let number=this.data.list[id]
    let strr = JSON.stringify(number);
    console.log("多个参数的传递",number)
    wx.navigateTo({
   
   
      url: '/pages/payfor/payfor?jsonStr=' + strr ,
    })
  },

接受页面的代码

onLoad: function(options) {
   
   
    let that = this
    // console.log(options)
    //  console.log(options.jsonStr)
    //  console.log(options.strr)
    let item = JSON.parse(options.jsonStr)
    console.log('上个页面跳转的参数', item)
    wx.setStorageSync('address', item)
    let address=wx.getStorageSync('address')
    console.log(address.name)
    that.setData({
   
   
      address:item
    })
  },

3.Json
Json即JavaScript Object notation,是一种基于文本,独立于语言的轻文本交换格式,易于人的阅读和编写,也易于机器的解析和生成。有两种结构,对象格式和数组格式

好了,今天的分享就到这里了。点个赞吧
在这里插入图片描述

目录
相关文章
|
1月前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
13天前
|
存储 缓存 小程序
微信小程序怎么进行页面传参
微信小程序怎么进行页面传参
17 3
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
9 1
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
10 0
|
14天前
|
Python 数据格式
使用Python批量处理微信榜单数据
使用Python批量处理微信榜单数据
|
20天前
|
JavaScript Java 测试技术
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
25 0
|
22天前
|
JSON 小程序 JavaScript
实现小程序与SSM后台数据交互
该文介绍了如何实现小程序与SSM后台的数据交互。在Java控制器中,通过`@RequestMapping`注解的`queryShop`方法处理HTTP请求,设置响应头允许跨域并返回JSON格式的商品列表。小程序端使用wx.request进行GET请求,接收到数据后在控制台打印。示例还包括了传递参数的方法和展示的交互效果图片。
21 2
|
25天前
|
JavaScript 小程序
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
|
1月前
|
小程序 JavaScript 前端开发
微信小程序全栈开发中的数据交互与渲染优化
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的数据交互与渲染优化,旨在提升小程序性能和用户体验。数据交互涉及GET、POST、PUT和DELETE请求,优化措施包括使用HTTPS、数据压缩、缓存及限流。渲染优化则涵盖虚拟DOM、减少DOM操作、组件化和模板使用,以及WXSS样式设计和媒体查询。利用性能监控工具可识别并优化性能瓶颈。开发者应综合运用这些策略,持续优化小程序。
|
23天前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
43 5

热门文章

最新文章