阿里云开发者社区

电脑版
提示:原网页已由神马搜索转码, 内容由developer.aliyun.com提供.

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

2024-05-2626
版权
版权声明:
本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
简介:本文介绍了微信小程序中页面间参数传递的方法。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(简单数据看板)
|
21天前
|
存储缓存小程序
微信小程序怎么进行页面传参
微信小程序怎么进行页面传参
|
13天前
|
JavaScriptJava测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
1111
|
30天前
|
JSON小程序JavaScript
实现小程序与SSM后台数据交互
该文介绍了如何实现小程序与SSM后台的数据交互。在Java控制器中,通过`@RequestMapping`注解的`queryShop`方法处理HTTP请求,设置响应头允许跨域并返回JSON格式的商品列表。小程序端使用wx.request进行GET请求,接收到数据后在控制台打印。示例还包括了传递参数的方法和展示的交互效果图片。
2322
|
21天前
|
JavaScriptJava测试技术
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
1400
|
22天前
|
Python数据格式
使用Python批量处理微信榜单数据
使用Python批量处理微信榜单数据
|
28天前
|
JavaScriptJava测试技术
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
3000
|
1月前
|
JavaScript小程序
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
|
1月前
|
小程序JavaScript前端开发
微信小程序全栈开发中的数据交互与渲染优化
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的数据交互与渲染优化,旨在提升小程序性能和用户体验。数据交互涉及GET、POST、PUT和DELETE请求,优化措施包括使用HTTPS、数据压缩、缓存及限流。渲染优化则涵盖虚拟DOM、减少DOM操作、组件化和模板使用,以及WXSS样式设计和媒体查询。利用性能监控工具可识别并优化性能瓶颈。开发者应综合运用这些策略,持续优化小程序。
|
1月前
|
小程序API数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。

热门文章

最新文章

  • 1
    微信小程序如何在切换页面后原页面状态不变
    110
  • 2
    微信小程序如何刷新当前页面
    123
  • 3
    微信小程序——解决异步问题
    58
  • 4
    微信小程序——属性配置大全
    40
  • 5
    mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
    37
  • 6
    在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
    148
  • 7
    微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
    563
  • 8
    【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
    189
  • 9
    【微信小程序】TypeError: Cannot read property ‘get‘ of undefined& Error: MiniProgramError
    203
  • 10
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
    71