PHP前端开发

微信小程序路由跳转的三种形式详解

百变鹏仔 3天前 #前端问答
文章标签 三种

微信小程序路由跳转,共有三种形式,页面中使用navigator组件做页面链接形式路由跳转,js中可以使用wx.navigateto--保留当前页面,跳转到应用内的某个页面,wx.redirectto--关闭当前页面,跳转到应用内的某个页面 wx.navigateback()--关闭当前页面,回退前一页面。

navigator组件做页面链接

               属性名                类型                默认值                说明
                url               String                                 应用内的跳转链接
                redirect                Boolean                false                是否关闭当前页面
                hover-class                String                navigator-hover                指定点击时的样式类,当hover-时,没有点击态效果

注:navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子节点背景色应为透明色

示例代码:

/** wxss **//** 修改默认的navigator点击态 **/.navigator-hover {    color:blue;}/** 自定义其他点击态样式类 **/.other-navigator-hover {    color:red;}
<!-- sample.wxml --><view>  <navigator>跳转到新页面</navigator>  <navigator>在当前页打开(关闭了当前页面)</navigator></view>
<!-- navigator.wxml --><view> {{title}} </view><view> 点击左上角返回回到之前页面 </view>
<!-- redirect.wxml --><view> {{title}} </view><view> 点击左上角返回回到上级页面 </view>
// redirect.js navigator.jsPage({  onLoad: function(options) {    this.setData({      title: options.title    })  }})

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

OBJECT参数说明:

                参数                类型                必填                说明
                url                String                是                需要跳转的应用内页面的路径
                success                Function                否               接口调用成功的回调函数
                fail                Function                否                接口调用失败的回调函数
                complete                Function                否                接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.navigateTo({  url: 'test?id=1'})

注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。

wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

OBJECT参数说明:

参数 类型 必填 说明
url String 需要跳转的应用内页面的路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.redirectTo({  url: 'test?id=1'})

wx.navigateBack()

关闭当前页面,回退前一页面。