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

一、功能描述

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

二、功能实现

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…

微信小程序的不同函数调用的几种方法

一、调取参数 直接调取当前js中的方法, 调取参数that.bindViewTap(); 二、跳转页面 navigateTo: function () { wx.navigateTo({ url: ../page4/page4 }); },全局变量使用方法 a.js var app getApp() Page({ data: { hex1: [], })} //设置全局变量 if (hex1 ! null) { app.…

微信小程序中带参数返回上一页的方法总结(三种)

本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结&#xff08;三种&#xff09;&#xff0c;有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对你有所帮助。 方法一 把当前页面数据放入本地缓存&#xff08; wx.setStorage&…

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

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

golang的sync包例子

package mainimport ("fmt""sync" )var wg sync.WaitGroupfunc asyncTestFunc() {for i : 0; i < 100; i {fmt.Println(i)}wg.Done() }func main() {wg.Add(1)go asyncTestFunc()wg.Wait() } 转载于:https://www.cnblogs.com/ziyouchutuwenwu/p/3719523…

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

一、使用来自不同页面的函数 函数写在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 不是。 给你一个表示十进制整数的字…

LeetCode OJ - Valid Palindrome

题目&#xff1a; Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases. For example,"A man, a plan, a canal: Panama" is a palindrome."race a car" is not a palindrome. Note:Have you …

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;并获得与该行中剩余石头值之 和 相等的得分。…

Python批量删除错误图片、修改文件名以及删除重复图片

一、批量删除错误图片&#xff1a; 代码如下&#xff1a; import osfor name in range(1,150):with open(C:\\Users\\adimin\\Desktop\\Pixiv_Img\\{}.png .format(str(name)), rb) as fp:data fp.read()if(len(data) 58):  # 查看一下错误图片的信息&#xff0c;看到错误…

char、varchar、nchar、nvarchar的区别

【整】char、varchar、nchar、nvarchar的区别 http://www.cnblogs.com/smjack/archive/2008/04/14/1152342.html 转载于:https://www.cnblogs.com/vivianlou/p/3729843.html

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 开始…

doctype声明、浏览器的标准、怪异等模式

doctype 标准(严格)模式(Standards Mode)、怪异(混杂)模式(Quirks Mode),如何触发&#xff0c;区分他们有何意义&#xff1f; 触发标准模式 1、加DOCTYPE声明,比如&#xff1a;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xht…

python:文件操作

1. 文件操作介绍 说到操作文件我们肯定会想到流&#xff0c;文件的操作都是通过流来操作的。在python中文件的操作非常简单&#xff0c;并不像Java等其他语言一样有各种各样的流操作&#xff0c;我们直接使用open函数即可打开一个文件&#xff0c;然后进行各种操作&#xff0c…