微信小程序:页面跳转时传递数据到另一个页面
一、功能描述
页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示
二、功能实现
1. 代码实现
test1页面
// pages/test1/test1.js
Page({ /**
* 页面的初始数据
*/
data: {
name:'Tom',
age:'12' }, buttonListener:function(){
var that = this
wx.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 = this
that.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的内容,并赋值给本地变量
微信小程序:页面跳转时传递数据到另一个页面的更多相关文章
- 微信小程序wx.request请求服务器json数据并渲染到页面
[原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...
- 微信小程序 发现之旅(一)—— 项目搭建与页面跳转
开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...
- 微信小程序之跳转、请求、带参数请求小例子
wx.request(OBJECT) wx.request发起的是 HTTPS 请求.一个微信小程序,同时只能有5个网络请求连接. 具体参数说明参看微信小程序官方文档-发起请求. 例: //当页面加载 ...
- 微信小程序路由跳转
微信小程序路由跳转 1.wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面, 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 参数 O ...
- 用python一步一步教你玩微信小程序【跳一跳】
12月28日,微信上线了小游戏「跳一跳」,瞬间成了全民游戏,如何牢牢占据排行榜的第一位呢?用Python帮助你,Python真的无所不能. 作为技术出身的我们,是不是想用技术改变排名呢? 注意:本文适 ...
- [微信小程序]在应用地图时,如何设置满屏(高度)
微信小程序在做地图功能时 用常规的办法height:100%:来设置高度来占满屏幕是不行的 它不会生效 应该改用单位vh 例如 height:100vh 这样就可以是地图占满整个屏幕高度
- 微信小程序如何跳转到另一个小程序
微信小程序如何跳转到另一个小程序,要注意:在app.json文件里也要配置 navigateToMiniProgramAppIdList,如下图: "navigateToMiniProgra ...
- 利用python实现微信小程序游戏跳一跳详细教程
利用python实现微信小程序游戏跳一跳详细教程 1 先安装python 然后再安装pip <a href="http://newmiracle.cn/wp-content/uploa ...
- 微信小程序结合后台数据管理实现商品数据的动态展示、维护
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...
随机推荐
- 【[SHOI2007]园丁的烦恼】
\(CDQ\) 分治的神奇操作 这个问题跟偏序问题好像差的不小啊 但是就是可以转化过去 对于一个查询我们可以把它拆成四个,也就是用二维前缀和的方式来查询 我们发现其实前缀和的定义就是多少个点的横纵坐标 ...
- Js 中的 this
Js 中 this 的理解 this 是啥 ? this是 JavaScript 语言的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用; 随着函数使用场合的不同,this ...
- JNI由浅入深_7_c调用Java方法一
1.在Java中声明方法 <span style="font-size:14px;">/** * javah -encoding utf-8 -jni com.exam ...
- toad调用存储过程,存储过程调用sql 类
1.定义一个sql 类Hello DROP JAVA SOURCE NEWXZXT."Hello"; CREATE OR REPLACE AND RESOLVE JAVA SOUR ...
- C#中如果用await关键字来await一个为null的Task对象会抛出异常
await & async模式是C#中一个很重要的特性,可以用来提高异步程序(多线程程序)的执行效率.但是如果尝试用await关键字来await一个为null的Task对象,会导致程序抛出Nu ...
- 关于Oracle的认识
一.Oracle认识: 1.安装时的全局数据库Orcl可以使用吗?可以的 2.Oracle相关服务: 3.数据库与用户,表空间的关系“ 4.切换数据库 5.关于命令:sqlplus 6\
- 3.5mm手机插孔自制万能遥控器
电视机 空调等遥控器用5MM LED发射二极管 940nm红外发射管 50只 拍一份就是100只 包邮 电压:1.1-1.4v 电流:20mA 发射角度:45°
- macOS:按钮类型
for (int i = 0; i < 10; i++) { for (int j = 1; j < 16; j++) { NSButton *btn = [[NSButton alloc ...
- react 配置开发环境
一:先自行下载安装node和npm 二:cnpm install create-react-app -g 三:create-react-app my-project 四:cd my-project ...
- Eclipse部署Web项目,常用操作和常见错误的解决方案
部署Web项目到tomcat 在eclipse中找到Servers项,打开服务器(F3)(建议直接删除服务器,重新建立再设置比较好)1.Servers Locations 中选择Use Tomcat ...