《微信小程序开发从入门到实战》学习六十

news/2024/7/20 2:16:27 标签: 学习, 微信小程序, 小程序

6.2 账号信息API

6.2.3 小程序账号信息API

使用wx.getAccountInfoSync接口可以获取小程序账号信息,该接口自基础库2.2.2版本开始支持。代码如下:

const accountInfo = wx.getAccountInfoSync()

console.log(accountInfo.miniProgram.appId) // 小程序appId

6.3 路由API

小程序使用路由API从一个页面跳转到另一个页面。页面跳转,两个页面都有一些生命周期函数会被调用。用户打开的所有页面都会被保存到一种名叫“页面栈”的存储结构。本节对这三部分会进行介绍。

  小程序通过调用API可以跳转到其他的小程序中。该接口不属于路由API,但功能接近,会在本节介绍。

6.3.1 页面栈

  所谓“栈”,是指一种逻辑上的数据结构,用于存储数据。最初,栈里面没有任何数据。可以对栈进行两种操作:一种是将数据放进去,称为“入栈”(或“进栈”);另一种是将栈里面的数据取出来,称为“出栈”(或“退栈”)。栈里面保存的数据拥有先后顺序,第一个入栈的数据位于“栈底”,最后一个入栈的数据位于“栈顶”。只有当栈里面包含数据时才可以执行出栈操作,出栈时只能取出位于栈顶的数据,在这之后,被取出的数据的前一个数据会成为新的栈顶。

  “页面栈”是指专门用于存储页面的栈,页面栈的示意图如下所示:

  小程序将已打开的页面保存在页面栈中,栈顶的页面就是当前用户看到的页面。用户刚打开小程序小程序首页自动加入页面栈。使用路由API时,实际上就是对页面栈进行操作,每当用户打开新页面,该页面就会入栈,当用户返回前一个页面,就是对页面执行了出栈操作。

  页面栈决定了小程序的当前页面,以及用户可后退到哪些页面。

6.3.2 路由API

路由API实际上是对页面栈进行操作。

小程序使用路由API从一个页面跳转到另一个页面。用户单击A页面按钮跳转到B页面时,实际上是在页面A按钮上设置了单击事件监听函数,在函数中使用路由API。

一共有五种路由API,实现了不同的页面切换功能。

1.wx.navigateTo(Object object)

调用该接口时,将保留当前页面,并跳转到新的页面。即保留页面栈的所有内容,将新的页面入栈。

小程序规定页面栈最多保存10个页面,超过是会导致调用接口失败。因此开发者需要避免用户打开过多的层级,也要避免页面之间的循环跳转(如页面A可以打开页面B,B也可打开A)。

wx.navigateTo传入Object类型的参数,该参数支持四个属性,url和回调函数success,fail,complete。url表示需要跳转的页面的路径,可以带页面路径参数,用?分隔,不同参数&分隔,如‘path?key=value&key2=value2’。接口示例代码如下:

    wx.navigateTo({

      url: 'test?id=1',

    })

不能使用该接口跳转到tabBar页面,需要使用另一个接口

2.wx.navigateBack(Object object)

wx.navigateBack是wx.navigateTo接口的逆操作。调用该接口将关闭当前页面,返回到上一级或多级页面。即让页面栈的栈顶页面依次出栈,使它前一个或前n个页面重新成为栈顶。调用该接口会使页面栈的内容减少。如果当前页面栈只有一个页面,调用接口会失败。

wx.navigateBack传入一个Object类型的参数,delta参数和三个回调函数。delta表示返回的页面数,默认值为1表返回上一页,如果大于现有页面数,则返回到首页。代码示例如下:

// 此处是A页面

    wx.navigateTo({

      url: 'B?id=1',

    })

    // 此处是B页面

    wx.navigateTo({

      url: 'C?id=1',

    })

    // 在C页面内navigateBack返回2个页面,将返回到A页面

    wx.navigateBack({

      delta: 2

    })

3.wx.redirectTo(Object object)

调用该接口,将关闭当前页面,然后跳转到一个新的页面,即让页面栈的栈顶页面出栈,然后将新的页面入栈。调用该接口不会让栈的数量发生改变,可以避免栈超出容量限制。

Object支持的属性是url和三回调函数,和wx.navigateTo同,示例代码如下:

    wx.redirectTo({

      url: 'test?id=1',

    })

4.wx.reLaunch(Object object)

调用该接口时将关闭所有已打开的页面,然后打开一个新的页面,可以是tabBar页面也可不是。

即清空页面栈,再将新的页面入栈,会使栈只保留一个页面。

Object和wx.navigateTo同,示例代码如下:

    wx.reLaunch({

      url: 'test?id=1',

    })

5.wx.switchTab(Object object)

最特殊,只能在小程序开启tabBar功能时使用。调用时,将关闭所有非tabBar页面,并跳转到指定的tabBar页面。即删除页面栈所有非tabBar页面,如果新打开的页面不在页面栈中,则将它入栈。

Object同wx.navigateTo的Object参数。

需注意,Object.url必须是在app.json的tabBar字段声明的页面,并且不能带页面路径参数。代码如下:

    wx.switchTab({

      url: '/index',

    })


http://www.niftyadmin.cn/n/5284454.html

相关文章

Transactional注解的失效场景

我们知道,spring框架支持两种类型的事务管理,分别是编程式事务管理和声明式事务管理,声明式事务管理又支持两种方式:基于xml的声明式事务管理、基于注解的声明式事务管理。 基于注解的声明式事务管理用Transactional注解来实现&am…

数据库中修改表的语句

1.修改表名:ALTER TABLE 旧表名 RENAME AS 新表名 例:ALTER TABLE teacher RENAME AS teacher1 2.增加表的字段:ALTER TABLE 表名 ADD 字段名 列属性 例:ALTER TABLE teacher1 ADD age INT(11) …

WEB 3D技术 three.js 集合体 讲解三角形构建图形 顶点概念 顶点值重用

那么 本文 我们来说一下集合体 我们要创建物体 都要先创建一个集合体 集合体也决定了我们元素的形态 材质 决定了我们的外观 我们结合体 其实基础都是三角形 我们编写如下代码 import ./style.css import * as THREE from "three"; import { OrbitControls } from …

电脑清理误删文件工具EasyRecovery14win电脑版下载

俗话说:工欲善其事,必先利其器。我们平时应该熟练掌握集中磁盘诊断工具的使用方法,这样当遇到磁盘故障时才不至于晕头转向、手忙脚乱。那么磁盘诊断工具应具备哪些功能呢? EasyRecovery是一款功能齐全的数据恢复软件,它…

第一章 mysql相识

第一章 mysql相识 1.mysql 定义2.mysql 安装2.1 bin目录的可执行文件 3.客户端与服务端链接4.服务端处理过程5.存储引擎 1.mysql 定义 用于存储数据 可以理解为一个存取数据的容器是客户端与服务端架构 我们在客户端输入操作数据命令,通过某种方式发送到服务端&…

JavaScript 中的短路求值(if语句简洁写法--逻辑运算符||和的高级用法)

在JavaScript中,Short-Circuit Evaluation(短路求值)是一种逻辑运算的行为,其中表达式的求值在达到不必要的部分时就提前终止(所以短路一词非常贴切)。这种行为可以通过逻辑运算符(例如&&am…

Quartz.NET 事件监听器

1、调度器监听器 调度器本身收到的一些事件通知,接口ISchedulerListener,如作业的添加、删除、停止、挂起等事件通知,调度器的启动、关闭、出错等事件通知,触发器的暂停、挂起等事件通知,接口部分定义如下&#xff1a…

VSCode中配置prettier和ESLint

文章目录 了解ESLint和Prettier的作用prettier配置ESLint配置常见问答ESLint 和Prettier 有什么区别?为什么我应该同时使用ESLint 和Prettier?在使用ESLint 和Prettier 时,有可能出现它们之间的规则冲突吗?我已经在项目中使用了ES…