微信小程序路由跳转

一、微信小程序路由跳转方式

微信小程序实现跳转的方式有两种方法：

1、使用wx.navigateTo()跳转到应用内非tabbar页面；

//跳转到应用内的其他页面，以index页为例
wx.navigateTo({
  url: '/pages/index/index'
})

2、使用wx.switchTab()跳转到tabbar页面。

//跳转到tabBar页面，以user页为例
wx.switchTab({
  url: '/pages/user/user'
})

二、微信小程序路由跳转后闪退问题

在微信小程序中，若使用wx.navigateTo()方法进行页面跳转，可能会因为占用资源过多等原因出现闪退问题。一般的解决方法有两个：

1、使用wx.redirectTo()方法进行页面跳转，这样可以减少资源占用。

//跳转到detail页并关闭当前页面
wx.redirectTo({
  url: '/pages/detail/detail',
})

2、使用wx.reLaunch()方法重新打开一个应用页面，这样可以清除原来的页面栈。

//跳转到应用首页
wx.reLaunch({
  url: '/pages/index/index'
})

三、微信小程序路由跳转到组件

可以使用__displayReporter.showKeyboard()方法跳转到app-service封装的组件。该方法需要三个参数：;

1、name——组件名称；

2、data——组件参数；

3、callback——组件回调函数。

__displayReporter.showKeyboard({
    name: 'contact',
    data: {
      name: 'hello',
      phone: '10086'
    },
    callback: function(ret) {
        console.log(ret);
    }
})

四、微信小程序路由跳转返回参数

在调用页面跳转方法时，可以传递一个对象作为参数，该对象可以在目标页面的onLoad生命周期函数中获取到。

//跳转到detail页并传递参数
wx.navigateTo({
  url: '/pages/detail/detail?id=1&name=xxx',
})

在detail页面中onLoad生命周期函数中获取该参数：

onLoad: function (options) {
  console.log(options.id) //1
  console.log(options.name) //xxx
}

五、微信小程序路由跳转带参数

在跳转页面时，可以使用encodeURIComponent()方法进行参数编码，避免特殊字符引起的问题。

var params = {
  id: 1,
  name: '小程序'
};
var paramStr = '?' + encodeURIComponent(JSON.stringify(params));
wx.navigateTo({
  url: '/pages/index/index' + paramStr
});

在跳转后的页面中onLoad生命周期函数中获取该参数：

onLoad: function (options) {
  var paramStr = options.query;
  var params = JSON.parse(decodeURIComponent(paramStr));
  console.log(params.id) //1
  console.log(params.name) //小程序
}

六、微信小程序路由跳转报错

在使用页面跳转方法时，可能会因为路径错误、参数错误等原因报错。常见的错误信息有：

1、navigateTo:fail 参数错误：path不能为空或为空字符串或参数错误，请检查后重试。

2、reLaunch:fail 跳转链接不存在，请检查跳转链接是否正确并存在。

3、switchTab:fail 页面（xxxxx）不存在，请检查url是否打错，并且文件是否存在。

对于以上错误，可以通过检查路径、参数是否正确来解决。

七、微信小程序路由跳转传参

可以使用页面栈来实现页面之间的传参。页面栈是一个栈结构，用来存储当前页面和历史页面。

可以使用getCurrentPages()方法获取页面栈数组，数组最后一个元素就是当前页面，倒数第二个元素才是上一个页面。

//跳转到detail页面并传递参数
var params = {
  id: 1,
  name: '小程序'
};
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //#获取上一个页面实例对象
prevPage.setData({
  params: params
});
wx.navigateBack({
  delta: 1
});

在detail页面中可以通过onLoad函数获取到上一个页面传递过来的参数：

onLoad: function (options) {
  var pages = getCurrentPages();
  var prevPage = pages[pages.length - 2];//#上一个页面实例对象
  var params = prevPage.data.params;
  console.log(params.id) //1
  console.log(params.name) //小程序
}

八、小程序路由跳转怎么做

小程序路由跳转可以使用wx.navigateTo()和wx.switchTab()方法，前者跳转到应用内非tabbar页面，后者跳转到tabbar页面。

可以通过getCurrentPages()方法获取页面栈，使用页面栈来实现参数传递。

如果跳转后出现闪退问题，可以使用wx.redirectTo()或wx.reLaunch()方法解决。

如果需要跳转到组件，可以使用__displayReporter.showKeyboard()方法。

原创文章，作者：MKIL，如若转载，请注明出处：https://www.506064.com/n/138659.html