微信小程序中不同页面间的参数传递

  1. 从样式页面WXML向逻辑页面JS传递点击事件的响应函数中传递参数
1 <!--此为样式页面-->
2 <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
3     <view catchtap="onPostTap" data-postid="{{item.postId}}">
4         <template is="postItem" data="{{...item}}"/>
5     </view>
6 </block>    
1 //此为逻辑层代码
2 onPostTap: function (event){
3     var postId = event.currentTarget.dataset.postid;
4     wx.navigateTo({
5         url: "post-detail/post-detail?id=" + postId;
6     })
7 }

  样式页面通过data-***来传递;逻辑层页面通过event.currentTarget.dataset.***(只接受小写)来接收,多用于在wx: for中告知逻辑层用户所点击模块的序号

  2. wx.navigate通过url跳转页面时向所要跳转到的页面传递参数

1 //需要传递的参数名为postId
2 wx.navigateTo({
3     url: "post-detail/post-detail?id=" + postId
4 })
1 //另一页面接收参数
2 onLoad: function (option) {
3     var postId = option.id;
4 }

注:以上为七月老师在慕课网视频的学习笔记

原文地址:https://www.cnblogs.com/rrxxdd/p/8457751.html

时间: 2024-10-08 10:45:13

微信小程序中不同页面间的参数传递的相关文章

微信小程序——动态修改页面数据及参数传递

动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下: data: { array: [{ text: '数组' }] } onLoad:function(){ this.data.array[0].text=1; console.log(this.data.array[0].text); } 修改代码: onLoad:function(

微信小程序--更改启动页面

在微信小程序中,如果想把子页面设置成打开程序的第一眼页面而不是首页,只需要在公共json文件中的pages里面的第一位设置成你想要的页面路径即可: "pages":[ "pages/index/index",//把要放在启动第一位显示的页面路径放在此处. "pages/logs/logs", "pages/news/news", "pages/products/products", "pages/

微信小程序详解——页面之间的跳转方式【路由】和参数传递

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navi

微信小程序中target与currentTarget

如有错误,请纠出,大家一起进步!!! target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象.在微信小程序中也可总结为:target指向发生事件的组件,currentTarget指向绑定事件的组件. 下面请看例子: text.wxml: <view class="view1&

微信小程序中获取高度及设备的方法

由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度 wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 wx.getSystemInfoSync().model // 获取当前采用的设备 wx.getSystemInfoSync().pixelRatio wx.get

如何在微信小程序中使用字体图标

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // 源页面A相关代码 wx.navigateTo({ url: "/pages/mypage/mypage?a=1&b=2" }) // 目标页面B相关代码 Page({ onLoad: function (options) { var a = options.a; // 值:1 va

微信小程序中如何上传图片

本篇文章给大家带来的内容是关于微信小程序中如何上传图片(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style='width:600rpx; height:6

微信小程序中的 hover-class

微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button.navigator. 不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation.hover-start-time.hover-stay-time 这三个属性. 使用方法: <view hover-class="bg_red">这是