您的位置:

微信小程序路由跳转

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

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

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()方法。

微信小程序路由跳转

2023-05-17
微信小程序路由详解

2023-05-23
微信小程序跳转公众号

2023-05-19
微信小程序中引入js(添加微信小程序)

本文目录一览: 1、微信小程序 怎么用第三方js库 jquery 2、微信小程序,weixin,小程序怎么引入js闭包 3、微信小程序wxml中使用js函数 4、微信小程序(上) 5、重磅:微信小程序

2023-12-08
微信小程序js改变dom(微信小程序appjs)

本文目录一览: 1、微信小程序 动态修改元素class 2、微信小程序点击切换class 3、微信小程序怎么将EBD格式的文件转化成json? 4、微信小程序不能操作dom吗 5、微信小程序怎么开发

2023-12-08
小程序路由传参的使用

2023-05-18
微信小程序php传值,微信小程序 传值

2022-12-02
微信小程序php开发,微信小程序php后端搭建

2023-01-06
微信小程序跳一跳辅助java,微信小程序跳一跳辅助功能

2022-11-18
JavaScript路由跳转:完整教程

2023-05-19
微信小程序带参数跳转页面

2023-05-20
php开发微信小程序步骤,thinkphp开发微信小程序

2022-11-28
微信小程序php文件路径,微信小程序php文件路径怎么改

2022-11-18
微信小程序js动画,微信小程序各种动画

本文目录一览: 1、微信小程序—用动画实现自定义轮播图 2、重磅:微信小程序发布WeUI.js 官方视觉组件库! 3、微信小程序之自定义模态弹窗(带动画)实例 微信小程序—用动画实现自定义轮播图 新接

2023-12-08
微信小程序js动画,微信小程序各种动画

本文目录一览: 1、微信小程序—用动画实现自定义轮播图 2、重磅:微信小程序发布WeUI.js 官方视觉组件库! 3、微信小程序之自定义模态弹窗(带动画)实例 微信小程序—用动画实现自定义轮播图 新接

2023-12-08
php获取小程序码,获取微信小程序代码

2022-11-17
印象笔记记录java学习(Java成长笔记)

2022-11-12
小程序跳转公众号

2023-05-18
jsp实现微信小程序(微信小程序 html5)

本文目录一览: 1、你好,请问你把jsp文件转成微信小程序做到了吗 2、开发微信小程序需要哪些技术 3、微信收集信息小程序怎么做 4、jsp网站转换成微信小程序 你好,请问你把jsp文件转成微信小程序

2023-12-08
微信网页js操作(微信网页js操作流程)

本文目录一览: 1、微信小程序wxs的使用(当页面数据渲染前添加js操作) 2、公众号h5中使用微信JS-SDK(个人笔记) 3、JS交互微信之JSAPI支付 微信小程序wxs的使用(当页面数据渲染前

2023-12-08