智能小程序页面配置、运行机制及路由

页面介绍

Page 代表应用的一个页面,负责页面展示和交互。每个页面对应一个子目录,一般有多少个页面,就有多少个子目录。它也是一个构造函数,用来指定页面的初始数据、生命周期回调、事件处理函数等。

每个小程序页面一般包含以下文件。

  • [pagePath].js:注册页面
  • [pagePath].tyml:页面结构
  • [pagePath].tyss:页面样式(可选)
  • [pagePath].json:页面配置(可选)
  • [pagePath].rjs:页面渲染脚本文件(可选)

注册页面

小程序页面必须使用 Page() 函数 注册且只注册一次。

Page({data: {title: 'Smart',},onShow: function () {ty.showToast({ title: this.data.title });},say: function () {this.setData({ title: 'hello world' });},
});

以上注册页面对象,且初始化数据为 { title: 'Smart' },并响应 onShow 生命周期函数。

页面结构

页面结构通过组件标签以及自定义组件标签,进行结构描述。页面由标签、属性和页面数据组成。

<view class="my-view" bind:tap="say">{{title}}</view>

更多模板语法,请参考 TYML 语法参考。

页面样式

.my-view {color: blue;
}

页面配置

{"navigationBarTitleText: "页面名"
}

以上示例初始化时展示 Smart 样式表现为蓝色。当单击后调用页面方法 say(),修改页面数据,重新渲染后,显示为 hello world

[pagePath].json 文件用于配置当前页面的窗口表现。页面配置比 app.json 全局配置简单得多,只能设置 window 相关配置项,但无需写 window 这个键。页面配置项会优先于全局配置项。

配置项

用于设置小程序当前页面的状态栏、导航条、标题、窗口背景色。

属性类型默认值描述
backgroundColorHexColor#ffffff窗口的背景色。
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持。
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持。
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark 和 light
disableScrollbooleanfalse是否禁用页面滚动。默认 false。开启后页面将无法滚动。
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新。
navigationBarBackgroundColorHexColor#ffffff导航栏背景颜色,如 #000000。
navigationBarTextStylestringblack导航栏标题颜色,仅支持 black 和 white
navigationBarTitleTextstring导航栏标题文字内容。
navigationStylestringdefault导航栏样式。default:默认样式。custom 自定义导航栏,只保留右上角胶囊按钮。
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为 px。
pageOrientationstringportrait屏幕旋转设置。取值范围:
portrait:竖屏,默认值。
landscape:横屏。
auto:自动。
usingComponentsobject当前页面引用的自定义组件。
boardMenusarray[]自定义菜单配置。容器版本 ≥ 2.3.0。

usingComponents

声明页面引用组件。当一个组件被多个页面所引用时,避免重复在页面配置中声明,可使用全局声明的形式。组件路径支持:

  1. 绝对路径形式,以 / 开头,表示小程序源码目录。
  2. 相对路径形式,以 . 开头,基于当前 json 文件所在目录。
  3. npm 三方包。
{"usingComponents": {"foo": "/absolute/foo/index","foo": "./relative/foo/index","foo": "package/es/foo/index"}
}

注意:路径地址必须精确到文件名,不可省略缺省 index

完整示例

{"navigationBarBackgroundColor": "#000","navigationBarTextStyle": "black","navigationBarTitleText": "首页","navigationStyle": "default","backgroundColor": "#000","backgroundTextStyle": "dark","backgroundColorTop": "#fff","backgroundColorBottom": "#fff","enablePullDownRefresh": true,"onReachBottomDistance": 50,"disableScroll": false,"pageOrientation": "portrait","usingComponents": {"foo": "/components/foo/index"},"boardMenus": [{"key": "home","iconPath": "@iconPath1","text": "主页"}]
}

页面运行机制

小程序启动时,将所有页面注册到逻辑层中,等待路由进入具体页面时将其实例化。在启动阶段(或路由变更),触发应用生命周期及页面生命周期。

页面生命周期

小程序由视图层和逻辑层两个部分组成。视图层和逻辑层同时运行。

  • 应用逻辑层启动后运行 app.onLaunch 和 app.onShow 以完成 App 创建,再运行 page.onLoad 和 page.onShow 以完成 Page 创建。此时,等待视图层初始化完成通知运行。
  • 视图层初始化完成通知逻辑层,逻辑层将初始化数据发送给视图层进行渲染。此时,视图层完成第一次数据渲染。
  • 第一次渲染完成后,视图层进入就绪状态并通知逻辑层。逻辑层调用 page.onReady 函数并进入活动状态。
  • 逻辑层进入活动状态后,每次数据修改将会通知视图层进行渲染。当切换页面进入后台,逻辑层调用 page.onHide 函数后,进入存活状态。页面返回到前台将调用 page.onShow 函数,进入活动状态。当页面返回或重定向到其它页面后,将调用 page.onUnload 函数,进行页面销毁。

详细有关 Page 的生命周期,请参考 Page。

下图说明了页面 Page 实例过程中,视图层与逻辑层的进程关系及页面生命周期的触发顺序。

可逐步在实际业务开发中增加对上图的理解。

页面路由

在小程序中所有页面的路由全部由框架进行管理。

路由栈

小程序中的页面路由是一个栈结构,只能通过 ty.navigateTo 和 ty.redirectTo 等方式操作。且页面路由栈最多十层。路由操作则不再生效。

路由方式

对于路由的触发方式以及页面生命周期函数如下:

路由方式触发时机路由前页面路由后页面页面栈
初始化小程序打开的第一个页面onLoad onShow onReady[A]
打开新页面ty.navigateToonHideonLoad onShow onReady[A, B]
页面重定向ty.redirectToonUnloadonLoad onShow onReady[A, C]
页面返回ty.navigateBackonUnloadonShow[A]
Tab 切换ty.switchTab各种情况请参考下表[D]
重启动ty.reLaunchonUnloadonLoad onShow onReady[A]

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):

当前页面路由后页面触发的生命周期(按顺序)
AANothing happend
ABA.onHide(), B.onLoad(), B.onShow()
AB(再次打开)A.onHide(), B.onShow()
CAC.onUnload(), A.onShow()
CBC.onUnload(), B.onLoad(), B.onShow()
DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(从转发进入)AD.onUnload(), A.onLoad(), A.onShow()
D(从转发进入)BD.onUnload(), B.onLoad(), B.onShow()

 

路由路径 URL

路由路径是一个绝对路径,以 / 开头,后面跟随页面的路径,如 /pages/index/index。路由路径是一个相对于小程序根目录的路径。

路由路径必须是一个有效的路径,在 app.json 中声明过的页面路径。

相对路径模式

相对路径模式是指在路由路径中不以 / 开头,如 index/index。相对路径模式会以当前页面​​​​​​​为基准,进行路径的拼接。

Page({onLoad() {// 当前页面是 /pages/homety.navigateTo({url: 'index/index', // 跳转到 /pages/index/index (相对于 /pages/home)})},
})

注意:任何时候优先使用绝对路径模式,避免出现路径错误的情况。除非你明确知道当前页面的路径!

注意事项

  • navigateTo, redirectTo 只能打开非 tabBar 页面。 -switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的 onLoad(query) 中获取。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/653642.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MarkDown快速入门-以Obsidian编辑器为例

直接上图&#xff0c;左右对应。 首先是基础语法。 # 标题&#xff0c;几个就代表几级标题&#xff1b;* 单个是序号&#xff0c;两个在一起就是斜体&#xff1b;- [ ] 代表任务&#xff0c;注意其中的空格&#xff1b; 然后是表格按钮代码 | 使用中竖线代表表格&#xff0c…

Ubuntu22.04安装docker

君衍. 一、认识docker二、查看Docker的依赖三、在Ubuntu22.04上安装Docker步骤1、更新Ubuntu2、添加Docker库3、安装Docker4、Docker测试 四、安装docker-compose 一、认识docker Docker是一个软件容器平台&#xff0c;属于Linux容器的一种封装&#xff0c;同时提供简单易用的…

3. 构建以太网交换网络

3.1 实验一&#xff1a;以太网基础与 VLAN 配置实验 3.1.1 实验介绍 3.1.1.1 关于本实验 以太网是一种基于 CSMA/CD&#xff08;Carrier Sense Multiple Access/Collision Detection&#xff09;的共享通讯介质的数据网络通讯技术。当主机数目较多时会导致冲突严重、广播泛滥…

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-友情链接管理实现

锋哥原创的SpringbootLayui python222网站实战&#xff1a; python222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火…

github连不上

github连不上 错误提示解决方案steam 采用Hosts加速 错误提示 fatal: unable to access ‘https://github.com/Ada-design/qianduan.git/’: Failed to connect to github.com port 443 after 21073 ms: Couldn’t connect to server 解决方案 下载steam https://steampp.ne…

latent-diffusion model环境配置--我转载的

latent-diffusion model环境配置&#xff0c;这可能是你能够找到的最细的博客了_latent diffusion model 训练 autoencoder-CSDN博客 前言 最近在研究diffusion模型&#xff0c;并对目前最火的stable-diffusion模型很感兴趣&#xff0c;又因为stable-diffusion是一种latent-di…

Mysql大数据量分页优化

前言 之前有看过到mysql大数据量分页情况下性能会很差&#xff0c;但是没有探究过它的原因&#xff0c;今天讲一讲mysql大数据量下偏移量很大&#xff0c;性能很差的问题&#xff0c;并附上解决方式。 原因 将原因前我们先做一个试验&#xff0c;我做试验使用的是mysql5.7.2…

Arm AArch64 alignment(对齐)

数据和指令必须与合适的边界保持对齐(alignment)。访问是否对齐会影响ARM核的性能&#xff0c;并且在将代码从早期的体系结构移植到ARMv8-A时可能会出现可移植性问题。出于性能原因&#xff0c;或者在移植代码时&#xff0c;都值得去注意下对齐问题。本文将讲述了ARMv8-A AArch…

初识人工智能,一文读懂贝叶斯优化进阶的知识文集(9)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

[机器学习]简单线性回归——梯度下降法

一.梯度下降法概念 2.代码实现 # 0. 引入依赖 import numpy as np import matplotlib.pyplot as plt# 1. 导入数据&#xff08;data.csv&#xff09; points np.genfromtxt(data.csv, delimiter,) points[0,0]# 提取points中的两列数据&#xff0c;分别作为x&#xff0c;y …

[BUUCTF]-PWN:pwnable_hacknote解析

先看保护 32位&#xff0c;没开pie&#xff0c;got表可修改 看ida 总的来说就是alloc创建堆块&#xff0c;free释放堆块&#xff0c;show打印堆块内容 但alloc处的函数比较特别&#xff0c;他会先申请一个0x8大小的堆来存放与puts相关的指针 完整exp&#xff1a; from pwn …

<网络安全>《9 入侵防御系统IPS》

1 概念 IPS&#xff08; Intrusion Prevention System&#xff09;是电脑网络安全设施&#xff0c;是对防病毒软件&#xff08;Antivirus Programs&#xff09;和防火墙&#xff08;Packet Filter, Application Gateway&#xff09;的补充。 入侵预防系统&#xff08;Intrusio…

数据结构【图的遍历】

数据结构之图 图的类型定义和存储结构图的遍历遍历的定义图的特点图常用的遍历深度优先搜索 DFS&#xff08;DepthFirstSearch&#xff09;算法实现算法效率分析 广度优先搜索 BFS&#xff08;BreadthFirstSearch&#xff09;算法实现算法效率分析 DFS与BFS算法效率比较 图的类…

第八篇【传奇开心果短博文系列】Python的OpenCV技术点案例示例:深度学习

传奇开心果短博文系列 系列短博文目录Python的OpenCV技术点案例示例系列 短博文目录一、前言二、OpenCV深度学习介绍三、OpenCV常用深度学习算法和实现分别示例代码四、归纳总结 系列短博文目录 Python的OpenCV技术点案例示例系列 短博文目录 一、前言 OpenCV深度学习&…

【UVM源码】UVM Config_db机制使用总结与源码解析

UVM Config_db机制使用总结与源码解析 UVM Config_db机制介绍UVM Config_db 机制引入的背景基本介绍使用方法优缺点&#xff1a; UVM Config_db机制使用示例&#xff1a;UVM Config_db使用高阶规则Config_db资源优先级 UVM Config_db 源码解析 UVM Config_db机制介绍 UVM Conf…

idea引入ojdbc包报错

网上下载或者让同事传两个jar过来&#xff0c;ojdbc6-11.2.0.7.0.jar 以及jconn3.0.jar 放入同一个文件夹中&#xff1a; 在此文件夹中cmd如下&#xff1a;回车&#xff0c;进入cmd控制台。 输入如下两个命令&#xff1a; mvn install:install-file -DgroupIdcom.oracle -Dar…

【网络】:网络套接字

网络套接字 一.网络字节序二.端口号三.socket1.常见的API2.封装UdpSocket 网络通信的本质就是进程间通信。 一.网络字节序 我们已经知道,内存中的多字节数据相对于内存地址有大端和小端之分, 磁盘文件中的多字节数据相对于文件中的偏移地址也有大端小端之分,网络数据流同样有大…

可曾听闻Nginx?

目录 一.简介 二.Nginx的优点 三.反向代理 四.负载均衡 五.动静分离 六.总结 说起Nginx&#xff0c;耳边好像经常听到&#xff0c;但是不知道用来干嘛的。最近用到了&#xff0c;所以我就大概总结了基本知识&#xff0c;它经常与一个词出现在一起——反向代理。那接下来…

配置华为交换机环路检测案例

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 厦门微思网络​​​​​​https://www.xmws.cn 华为认证\华为HCIA-Datacom\华为HCIP-Datacom\华为HCIE-Datacom 思科认证\CCNA\CCNP\CCIE Linux\RHCE…

YOLOv5可视化热力图 | 支持自定义模型、置信度选择等功能(论文必备)

一、本文介绍 本文给大家带来的机制是的可视化热力图功能,热力图作为我们论文当中的必备一环,可以展示出我们呈现机制的有效性,本文的内容支持YOLOv5最新版本,同时支持视频讲解,本文的内容是根据检测头的输出内容,然后来绘图。 在开始之前给大家推荐一下我的专栏,本专…