微信小程序--携参数跳转界面

原创已于 2024-03-04 22:36:01 修改 · 749 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2022-08-29 11:43:10 首次发布

本文介绍了微信小程序中不同界面间的跳转方法及参数传递技巧，包括tabBar界面和非tabBar界面的跳转方式，以及如何解决传参过长的问题。

tabBar界面跳转

wx.switchTab({
        url: '/pages/logs/logs', //不可携带参数
    })

  wx.reLaunch({
    url: '/pages/classifi/classifi?category_name='+category_name,//可携带参数
  })

setTimeout(() => {
            wx.switchTab({
              url: '../index/index',
            })
           }, 2000);

就非tabBar界面跳转

 wx.navigateBack({
    delta: 1 // 返回的页面层数，1表示返回上一页，2表示返回上两页，以此类推
  })

wxml
<navigator url="../navigator/navigator?title=我是参数" >跳转新页面</navigator>

wx.navigateTo({
  url: '../txt/txt?id='+txt+'&name='+name //不关闭当前界面，可使用wx.navigateBack可以返回到原页面
})

wx.redirectTo({
  url: '../txt/txt?id='+txt  //关闭当前页面，跳转到txt页面
})

//二级页面Js
 onUnload: function () {
 	var pages = getCurrentPages(); // 获取页面栈
	var currPage = pages[pages.length - 1]; // 当前页面
	var prevPage = pages[pages.length - 2]; // 上一级界面
	prevPage.setData({
  		name: 'name'  //为上一级界面赋值
  		 });
  		 

wx.navigateBack({
  delta: 1    //返回上一级界面 1是返回一级 2是返回二级界面
})
  },

解决传参参数太长问题。

// 传递
toweb_view: function (e) {
      console.log('推文',e.currentTarget.dataset.url);
      var url = e.currentTarget.dataset.url;
      
      //跳转并传参
      wx.navigateTo({
        url: '../toweb_view/toweb_view?url=' + encodeURIComponent(JSON.stringify(url)),
      })
    },

// 接收
onLoad: function (options) {
   this.setData({
     url : JSON.parse(decodeURIComponent(options.url))
   })
},