微信小程序页面跳转的方法都有哪些

Posted 2023-04-16

参考技术A 您好！很高兴能为您解答， 　 　　 　　 　　 　　　　微信小程序 跳转页面
小程序页面有2种跳转，可以在wxml页面或者js中：
1，在wxml页面中：
?

1
2
3

跳转到新页面
在当前页打开
切换到首页Tab

2，在js页面中：

【注意】此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。 app.json文件中tabBar中注册过的tab页，即为“tabBar页面”，非tabBar中注册占用的页面即为“应用内的页面” 。 如下图：home页面为“应用内的页面”,index和logs页面则为 “tabBar页面”。

微信小程序Page页面跳转（路由/返回）并传参

页面跳转的方法参考官方文档：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html

---

 

问题：使用wx.navigator打开新页面时可以带参，但如果要wx.navegateBack回到上一级页面，该如何传参。

 

方法一：

将数据保存到app.js文件中。因为该文件中的属性是全局的，可以在任意Page页面中获取到app.js中的数据。

但是如果所有全局变量都放到app.js中，会导致该文件很臃肿。

 

方法二：

使用getCurrentPages()，找到上一级页面的Page实例，再通过setData来直接给上一级页面的data设置数据，实现传参！

Page({

  data: {
  },

  // 其他省略。。。

  // 输入框失去焦点的回调，添加条目
  addItem: function (event){
    console.log("添加条目！");
    wx.navigateBack();

    // 往上一级页面传参
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; // 当前页面
    var prevPage = pages[pages.length - 2]; // 上一级页面

    // 直接调用上一级页面Page对象，存储数据到上一级页面中
    var str = event.detail.value;
    prevPage.setData({
        \'addItemContent\': str,
    });
  },
    
})