原生微信小程序跳转传参 : [非TabBar跳转传参] 和 [TabBar跳转传参]
一般常用的微信小程序跳转分为两种
1、非TabBar跳转
2、TabBar跳转
1、非TabBar跳转
非TabBar页面的跳转通常使用wx.navigateTo来跳转页面,在链接后面加 ? 传参,如下:
// 跳转页面 ? 后面传参 goods_id = 参数
wx.navigateTo({
url: `../goodsDetail/goodsDetail?goods_id=${goodsid}`,
})
// 跳转页面接参
onLoad(options) {
// 此处的options.goods_id 就是页面跳转传过来的参数
this.setData({
goods_id : options.goods_id
})
},
2、TabBar跳转
跳转TabBar页面,一般使用wx.switchTab跳转,跳转TabBar常规的带参方式是不行的,官方文档已有说明
所以这里无法在链接上带参,此处可以使用全局变量 getApp() ,具体操作如下:
// 跳转购物车
jumpCart() {
// 给全局变量添加一个参数 id
getApp().id = 1
wx.switchTab({
url: '/pages/cart/cart'
})
},
// 购物车页面
let app = getApp() // 获取全局变量
Page({
onLoad(options) {
console.log(app.id); // 此处的app.id就是上个页面跳转带过来的参数
},
)}
原生微信小程序跳转传参 : [非TabBar跳转传参] 和 [TabBar跳转传参]的更多相关文章
- Taro -- 原生微信小程序转taro
微信小程序转Taro (转发https://nervjs.github.io/taro/docs/taroize.html) Taro 可以将你的原生微信小程序应用转换为 Taro 代码,进而你可以 ...
- 微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题
想要的效果 1.第一页只显示第一道题的内容,如图红框2.答题后,点击下一题,内容显示第二道题的内容 代码 answer.wxml <!--pages/answer/answer.wxml--&g ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
- 微信小程序从入坑到放弃之坑十二:navigator无法跳转的坑
转自:http://www.yilingsj.com/xwzj/2018-11-25/weixin-miniprogram-navigator.html 微信小程序中的页面跳转用navigator就行 ...
- 原生微信小程序数据渲染
一直在写vue,第一次接触微信小程序,还是原生,最开始做的时候真的很闹心啊啊啊啊啊啊啊啊啊啊啊啊!!所以最近大概更新的都是微信小程序原生的内容了~~么么哒!!一定会继续努力的!!tips:在小程序项目 ...
- 原生微信小程序脚手架(支持npm)
微信小程序支持npm 为了支持生态扩展,社区贡献者可以提供更加丰富的功能,已经支持了第三方小程序开发功能,见如下地址. 微信小程序支持npm https://developers.weixin.qq. ...
- 微信小程序 - 自适应swiper高度(非组件)
微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情 原理: 利用css3 横轴滚动属性overflow:scroll,设置死swipe ...
- 如何将原生微信小程序页面改成原生VUE框架的H5页面
项目背景: 公司为了实现小程序与H5页面共同覆盖,全面推广.特此想将已有的小程序进行快速改造上线(二周内),研发出H5版本.目前公司前端技术较为薄弱,现有的技术解决方案还停留在JSP. 问题: 如何将 ...
- 原生微信小程序的生命周期
小程序的生命周期函数:onLaunch:function(){当启动小程序时触发小程序只会启动1次,一般为初次打开时一般只会触发一次},onShow:function(){当小程序从后台切入到前台时触 ...
- 原生微信小程序里类似于计算属性写法
可直接在wxml文件里直接写入直接调用.变量只支持var命名,不支持let const </view> <view class="wx_bgc" ...
随机推荐
- i春秋Blog
打开是个普普通通的hello world 然后有注册有登录 不多说我们直接注册登录试试 登录后有个POST选项,可以上传东西,先试试上传文字 没什么重要的回显 再上传一个文档试试 爆出提示:这里使用的 ...
- 学生管理系统Python
student1=[ {1:'lucy','age':17,'sex':'n','Pnum':1111111}, {2:'tom','age':17,'sex':'m','Pnum':2222222} ...
- 什么是NineData?突然就火了
NineData 是集成了 SQL 开发.数据复制.数据备份.数据对比多个模块的云服务,支持混合云(自建库+云数据库的业务架构)和多云(多个不同云厂商数据库组成的业务架构)架构下的企业数据管理,大幅降 ...
- Zabbix6.0使用教程 (一)—zabbix新增功能介绍1
使用zabbix的小伙伴应该都有关注到目前zabbix的大版本已经更新到了6.0,后面乐乐将会对如何使用zabbix6.0做一个使用教程的系列,大家可以持续关注,这篇我们主要聊聊zabbix6.0新增 ...
- jupyter 数据显示设置
#设置显示行数pd.set_option('display.max_row',None)#设置显示列数pd.set_option('display.max_column',None)#设置显示宽度pd ...
- .net6制作让同事不能上网的arp欺骗工具
摘一段来自网上的arp欺诈解释:ARP欺骗(ARP spoofing),又称ARP毒化(ARP poisoning,网络上多译为ARP病毒)或ARP攻击,是针对以太网地址解析协议(ARP)的一种攻击技 ...
- nuxt.js安装使用
首先要学会看文档,https://www.nuxtjs.cn/guide/configuration 一.创建项目,并运行 终端运行 npx create-nuxt-app <项目名> ( ...
- 网络监测工具之Zabbix的搭建与测试方法(一)
简介 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案,它能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的 ...
- [R语言] 基于R语言实现树形图的绘制
树状图(或树形图)是一种网络结构.它由一个根节点组成,根节点产生由边或分支连接的多个节点.层次结构的最后一个节点称为叶.本文主要基于R语言实现树形图的绘制.关于python实现树形图的绘制见:基于ma ...
- [OpenCV实战]10 使用Hu矩进行形状匹配
目录 1 什么是图像矩? 2 如何计算图像矩 2.1 质心获取 2.2 中心矩 2.3 Hu矩 3 基于Hu矩实现形状匹配 3.1 Hu矩的计算 3.2 基于matchShapes函数计算两个图形之间 ...