微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()…

文章目录

微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...
- wx.navigateTo(Object object)
- - 1.只有指定跳转路径的情况
  - 2 包含路径参数
- wx.redirectTo(Object object)
- wx.reLaunch(Object object)

路由跳转是指由当前页面跳转到另一个页面的事件。是很常见的事件，比如我们小程序点击查看健康码，就会涉及跳转页面的情况。

使用情况是把路由跳转API放在点击事件的回调函数里。

微信官方给我们提供了很多的路由api

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

常用的有

wx.navigateTo(Object object)

特点：跳转到指定页面，可以返回，保留之前页面的数据。

官网文档说明：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

返回按钮如下红框

简单使用：

1.只有指定跳转路径的情况

index.js


wx.navigateTo({// url的路径要在app.json注册，要加 / ,(前加 / 为绝对路径，不加为相对路径)url: '/pages/logs/logs',
})

注意：url的路径要在app.json注册，要加 / ,(前加 / 为绝对路径，不加为相对路径)

2 包含路径参数

这个就和网页的路径传参一样，缺点是都有长度的限制


wx.navigateTo({url: '/pages/home/home?id=1',
})

home页面的home.js接收代码(要在指定函数内接收)

说明：接收的参数是字符串String类型，如果要转为整形可以使用parseInt(a)函数，

  /*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options)console.log(options.id)let indexId = options.id  //使用},

wx.redirectTo(Object object)

特点：重定向跳转到指定页面，不能返回之前页面，只能返回主页面。只清除前页面的数据。

返回主页面按钮如下图红框

重定向跳转，关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

使用和wx.navigateTo(Object object)一样

wx.reLaunch(Object object)

特点：重新加载指定页面，所有页面的数据会清除掉。

关闭所有页面，打开到应用内的某个页面

使用和wx.navigateTo(Object object)一样

微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...相关推荐

微信小程序开发：路由跳转以及传参的使用
前言微信小程序开发中的大部分知识点和前端开发是一模一样的,就算具体的语法不一样,但是套路都是一样的,可以说微信小程序开发和前端开发使用的知识点基本一致.本篇博文就来分享一下在微信小程序开发中必用的知 ...
微信小程序学习(四)路由页面配置
创建路由,也就是把我们之前几个示例的页面连起来,可以相互跳转在app.json添配置是给主页面添加tab页代码 {"pages": ["pages/todo/to ...
微信小程序页面栈_浅谈下微信小程序中的路由(页面跳转、返回、刷新、页面栈)...
什么是小程序里的"路由"?路由器吗?蒙蔽?好吧,在WEB应用中它其实就是分组数据包从源到目的地时,决定端到端路径的网络范围的进程:在小程序里就是设置页面的跳转,返回,自动刷新等一些 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数文章目录微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...

微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...