微信开发者工具之页面跳转

1.声明式页面导航(跳转):

//跳转到tabBar页面
<navigator url="路径" open-type="switchTab">打开tabBar界面</navigator> 

//跳转到非tabBar页面  此处open-type可以省略
<navigator url="路径" open-type="navigate">打开非tabBar页面</navigator> 

//后退到前一个页面 delta后退页数(默认为1,不需要后退页数多于1可以省略)
<navigator  open-type="navigateBack" delta="1">后退</navigator> 

2.编程式页面导航(跳转):

//abc.wxml
<button bindtap="gotomessage">跳到其他页面</button>

//abc.js
page({
      gotomessage(){
         wx.switchTab({      //wx.switchTab自带API跳转到tabBar页面  
             url:'路径'      //跳转到非tabBar页面:wx.navigateTo代替wx.switchTab即可
         })                 
      }  
})

// 后退页面:
wx.navigateBack({
         delta:1(可省略)
 })  

3导航参数:

  3.1页面传参

<navigator url="路径?name=imbzz&age=20">页面跳转</navigator>
 
//?:分隔路径和参数

//&:分隔不同参数

微信开发者工具左下角调试器可查看页面参数

3.2 onLoad接受页面参数:

page({ 
      data:{
        query:   //默认为传递过来的参数
       }

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options){        //options就是导航传递过来的参数对象
       this.setData({
             query:options   //将传递过来的参数(例:name:imbzz age:20)储存到data中的query
       })
    },




})

  • 8
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值