微信小程序:页面跳转时传递数据到另一个页面

一、功能描述

页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示

二、功能实现

1. 代码实现

test1页面

// pages/test1/test1.js
Page({/*** 页面的初始数据*/data: {name:'Tom',age:'12'},buttonListener:function(){var that = thiswx.navigateTo({url: '/pages/test2/test2?nameData=' + that.data.name + '&ageData=' + that.data.age})}
})<!--pages/test1/test1.wxml-->
<view>
<text>姓名:{{name}}</text>
</view>
<view>
<text>年龄:{{age}}</text>
</view>
<button bindtap='buttonListener'>携带数据跳转</button>

test2页面

// pages/test2/test2.js
Page({/*** 页面的初始数据*/data: {name:null,age:null},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thisthat.setData({name:options.nameData,age:options.ageData})}
})<!--pages/test2/test2.wxml-->
<view>
<text>姓名为:{{name}}</text>
</view>
<view>
<text>年龄为:{{age}}</text>
</view>

  

2. 代码分析

1. test1页面

(1)Button点击事件

  案例中采用了点击button触发跳转事件,所以要为button添加一个监听函数。在test1.wxml页面的<button>中添加bindTap属性,来命名该button的监听函数名称。然后在test1.js中实现该监听函数即可

(2)跳转函数

  微信小程序提供自带的页面跳转函数,具体可参考微信小程序API;

  跳转时携带数据:  url: '/pages/test2/test2?数据a的名称=' + 数据a的内容 + '&数据b的名称=' + 数据b的内容, 

 

2. test2页面

(1)接收数据

  使用onLoad函数在加载页面时接收数据,通过options.数据a的名称来获取数据a的内容,并赋值给本地变量

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473384.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 1685. 有序数组中差绝对值之和(前缀和)

文章目录1. 题目2. 解题1. 题目 给你一个 非递减 有序整数数组 nums 。 请你建立并返回一个整数数组 result&#xff0c;它跟 nums 长度相同&#xff0c;且result[i] 等于 nums[i] 与数组中所有其他元素差的绝对值之和。 换句话说&#xff0c; result[i] 等于 sum(|nums[i]-…

对一个 复杂的json结果进行取值的例子

1 JSON结果集 1 [2 {3 "J_LP_OPERATE_MAIN": {4 "ID": "1900036295",5 "FILL_MAN": "周兴福",6 "FILL_DEPT": "运维一班",7 "STATE…

微信小程序正则判断姓名和手机号

一、页面效果 二、json文件 //获取应用实例 const app getApp() Page({/*** 页面的初始数据*/data: {array: [速美, 现代, 淮安],mode: scaleToFill,src: ../../images/1.png,userInfo: {},hasUserInfo: false,canIUse: wx.canIUse(button.open-type.getUserInfo),userName: …

LeetCode 1686. 石子游戏 VI(贪心)

文章目录1. 题目2. 解题283 / 1660&#xff0c;前17%681 / 6572&#xff0c;前10.4%1. 题目 Alice 和 Bob 轮流玩一个游戏&#xff0c;Alice 先手。 一堆石子里总共有 n 个石子&#xff0c;轮到某个玩家时&#xff0c;他可以 移出 一个石子并得到这个石子的价值。 Alice 和 B…

T4生成实体和简单的CRUD操作

主要跟大家交流下T4,我这里针对的是mysql,我本人比较喜欢用mysql,所以语法针对mysql,所以你要准备mysql的DLL了,同理sqlserver差不多,有兴趣可以自己写写,首先网上找了一个T4的帮助类,得到一些数据库属性,命名为 DbHelper.ttinclude <# template debug"false" hos…

LeetCode 1688. 比赛中的配对次数(模拟)

文章目录1. 题目2. 解题1. 题目 给你一个整数 n &#xff0c;表示比赛中的队伍数。比赛遵循一种独特的赛制&#xff1a; 如果当前队伍数是 偶数 &#xff0c;那么每支队伍都会与另一支队伍配对。总共进行 n / 2 场比赛&#xff0c;且产生 n / 2 支队伍进入下一轮。如果当前队…

微信小程序使用函数的方法

一、使用来自不同页面的函数 函数写在util.js页面 function formatTime(date) {var year date.getFullYear()var month date.getMonth() 1var day date.getDate()var hour date.getHours()var minute date.getMinutes()var second date.getSeconds()return [year, mon…

LeetCode 1689. 十-二进制数的最少数目(脑筋急转弯)

文章目录1. 题目2. 解题1. 题目 如果一个十进制数字不含任何前导零&#xff0c;且每一位上的数字不是 0 就是 1 &#xff0c;那么该数字就是一个 十-二进制数 。 例如&#xff0c;101 和 1100 都是 十-二进制数&#xff0c;而 112 和 3001 不是。 给你一个表示十进制整数的字…

WeUI for 小程序使用教程文档总结

WeUI 是一套同微信原生视觉体验一致的基础样式库&#xff0c;由微信官方设计团队为微信 Web 开发量身设计&#xff0c;可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、弹出菜单actionsheet、图标icon等各式元…

如何安装Pycharm官方统计代码行插件

最近一直想统计Pycharm的总计代码行数&#xff0c;找到了官方的统计行数插件&#xff0c;发现效果还不错。 官方代码统计插件指导&#xff1a; https://plugins.jetbrains.com/plugin/4509-statistic&#xff08;英文版&#xff09; (初级教程&#xff0c;大牛请忽略) ***该…

LeetCode 1690. 石子游戏 VII(博弈DP)

文章目录1. 题目2. 解题1. 题目 石子游戏中&#xff0c;爱丽丝和鲍勃轮流进行自己的回合&#xff0c;爱丽丝先开始 。 有 n 块石子排成一排。每个玩家的回合中&#xff0c;可以从行中 移除 最左边的石头或最右边的石头&#xff0c;并获得与该行中剩余石头值之 和 相等的得分。…

LeetCode 1691. 堆叠长方体的最大高度(排序+最大上升子序DP)

文章目录1. 题目2. 解题2.1 暴力超时解2.2 排序最长上升子序463 / 3709&#xff0c;前 12.5%1240 / 9290&#xff0c;前13.3%1. 题目 给你 n 个长方体 cuboids &#xff0c;其中第 i 个长方体的长宽高表示为 cuboids[i] [widthi, lengthi, heighti]&#xff08;下标从 0 开始…

使用LSTM建立seq2seq模型进行语言翻译

文章目录1. 数据处理2. 编码器、解码器数据2.1 编码器2.2 解码器2.3 模型3. 训练4. 推理模型5. 采样参考 基于深度学习的自然语言处理 1. 数据处理 读取数据 with open(deu.txt, r, encodingutf-8) as f:lines f.read().split(\n) print("文档有 {} 行。".format(…

【struts2】预定义拦截器

&#xff11;&#xff09;预定义拦截器 Struts2有默认的拦截器配置&#xff0c;也就是说&#xff0c;虽然我们没有主动去配置任何关于拦截器的东西&#xff0c;但是Struts2会使用默认引用的拦截器。由于Struts2的默认拦截器声明和引用都在这个Struts-default.xml里面&#xff0…

使用注意力机制建模 - 标准化日期格式

文章目录1. 概述2. 数据3. 模型4. 训练5. 测试参考 基于深度学习的自然语言处理本文使用attention机制的模型&#xff0c;将各种格式的日期转化成标准格式的日期 1. 概述 LSTM、GRU 减少了梯度消失的问题&#xff0c;但是对于复杂依赖结构的长句子&#xff0c;梯度消失仍然存…

牛客 数学实验(模拟)

文章目录1. 题目2. 解题1. 题目 链接&#xff1a;https://ac.nowcoder.com/acm/contest/10166/A 来源&#xff1a;牛客网 牛牛在做数学实验。 老师给了牛牛一个数字n&#xff0c;牛牛需要不断地将所有数位上的值做乘法运算&#xff0c;直至最后数字不发生变化为止。 请你帮牛…

css动画之波纹

样式定义&#xff1a; #ContactAbout { height: auto; position: relative; overflow: hidden; } #sectioncontact { display: block; width: 100%; position: relative; height: 700px; z-index: 10; }#sectioncontact .map { width: 370px; height: 280px; position: absolut…

牛客 奇怪的排序问题(单调栈/遍历)

文章目录1. 题目2. 解题1. 题目 链接&#xff1a;https://ac.nowcoder.com/acm/contest/10166/B 来源&#xff1a;牛客网 操场上有n个人排成一队&#xff0c;这n个人身高互不相同&#xff0c;可将他们的身高视为一个1到n的排列。 这时需要把队伍变成升序&#xff0c;也就是从…

Python 中,matplotlib绘图无法显示中文的问题

在python中&#xff0c;默认情况下是无法显示中文的&#xff0c;如下代码&#xff1a; import matplotlib.pyplot as plt# 定义文本框和箭头格式 decisionNode dict(boxstyle "sawtooth", fc "0.8") leafNode dict(boxstyle "round4", fc …

牛客 XOR和(找规律)

文章目录1. 题目2. 解题1. 题目 链接&#xff1a;https://ac.nowcoder.com/acm/contest/10166/C 来源&#xff1a;牛客网 牛牛最近学会了异或操作&#xff0c;于是他发现了一个函数 f(x)x⊕(x−1)f(x)x\oplus (x-1)f(x)x⊕(x−1)&#xff0c;现在牛牛给你一个数 n&#xff0c…