微信小程序跨页面传参

使用微信小程序，可以自定义页面样式和交互逻辑 #生活知识# #生活经验# #软件#

本文主要介绍微信小程序如何跨页面传参

方法一：通过js带参数跳转页面(常用)

相关代码如下：
mall.wxml

<block wx:for="{{data}}" wx:key="" wx:for-index="index"> <view class='relative food-list-wrapper' bindtap='detailTap' data-id="{{index}}"> // `data-id`为所需传参的对象;`detailTap`为点击跳转事件 <template is="list" data="{{item}}"/> // 列表页的代码 </view> </block> 12345

mall.js

detailTap: function (event) {//参数传递 let postId = event.currentTarget.dataset.id; // 获取所需传递的参数对象 if (postId != "" || postId != undefined) { wx.navigateTo({ url: 'mallInfo?id=' + postId, // 页面带参数跳转 }) } }, 12345678

mallInfo.js

onLoad: function (options) { if (options) { console.log(options.id); // 此处为我们从上一个页面传递过来的参数对象（可以是一个数组） this.setData({ id: options.id }) } // this.initData(); //获取详情页数据 }, 123456789 方法二：通过本地缓存，跨页面获取

mall.wxml代码如上所示
mall.js

detailTap: function (event) { let postId = event.currentTarget.dataset.id; if (postId != "" || postId != undefined) { wx.setStorageSync('id', postId);//第一次点击之后存储数据在本地 wx.navigateTo({ url: 'mallInfo, }) } }, 123456789

mallInfo.js

onLoad: function (options) {let id= wx.getStorageSync(id);/**获取本地同步数据 */ if (id) { console.log(id); // 此处为缓存本地的参数对象（可以是一个数组） this.setData({ id:id }) } // this.initData(); //获取详情页数据 }, 12345678910

网址：微信小程序跨页面传参 https://www.yuejiaxmz.com/news/view/511542

相关内容

微信小程序开发之——WebView
小程序毕业设计基于微信小程序的健康生活助手小程序
微信小程序模版｜健康菜谱微信小程序源码
基于微信小程序社区旧衣物品回收系统小程序设计与实现
微信小程序常用控件汇总
微信小程序开发：洺宸传媒引领移动应用新潮流！
基于微信小程序的时间管理小程序
微信小程序的所有scene场景值 2020
微信小程序开发
【微信小程序】基础篇

随便看看