url 参数传递的两种方式_小程序,跳转页面的两种方式及其页面传参数

一:navigator方式:

  1. 页面跳转不传参:

要想通过 navigator 实现页面跳转我们要用到url属性。

6eeb24fdbf5e2f30e6763098cb4c3eb4.png

open-type属性可用值(直接上官网截图):

9661405d7ff0bfe94e2b6969c70909be.png

注意点:不能带页面后缀文件“.wxml”,带了后不能跳转。

错的方式:

热门推荐页面跳到肉类页

对的方式:

热门推荐页面跳转

2.页面跳转传参:

热门推荐页面跳转传参数

d280bd4e5bd830c5a5cb5b3490fa3f51.png

被跳到的页面接收参数:

只要我们在url中定义了param参数,在被跳转页面里就能在 onload周期函数的参数options里拿到。

f78eb1427a2943bf6b964066e09df029.png
2e4088b3b36a8cf02badc2c627726711.png

取出参数值

二:API方式(官网:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html):

Api跳转方法列表:

wx.navigateTo()保留当前⻚⾯,跳转到应⽤内的某个⻚⾯。但是不能跳到 tabbar ⻚⾯

wx.switchTap()跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯

wx.reLaunch()关闭所有⻚⾯,打开到应⽤内的某个⻚⾯

wx.redirectTo()关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯。但是不允许跳转到 tabbar ⻚⾯

wx.navigateBack()关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯

b6421f62f335b6306a743ce276698bb6.png

官网截图

1.API跳转页面不带参数:

/** api跳转**/

bindNavigateto:function(){

url: '/pages/fgclass/meateclass/meateclass',

})

},

2:API跳转页面带参数:

/** api跳转**/

bindNavigateto:function(){

wx.navigateTo({

//url: '/pages/fgclass/meateclass/meateclass.wxml',

url: '/pages/fgclass/meateclass/meateclass?param=apijump',

})

},

在meateclass.js里这样接收参数:

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

console.log(options);

this.setData({

meateparater:options.param,

})

},

2adc25fdb18d5d503cc9c9787ad640f7.png

注意点:不能带页面后缀文件“.wxml”,带了后不能跳转。

总结:

以上就是小程序的两种跳转方式,是不是很简单?另外的几个跳转api就不写啦。

谢谢浏览,谢谢点赞和评论,觉得对你有用的就关注下呗,我也会关注你的。

我是只说代码的大饼。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值