小程序开发学习记录——页面导航、页面事件、生命周期、WXS脚本

最新推荐文章于 2025-12-03 10:01:15 发布
原创 最新推荐文章于 2025-12-03 10:01:15 发布 · 251 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习 #前端 #微信小程序

本文深入探讨了小程序中的声明式和编程式导航，包括如何导航到tabBar和非tabBar页面，以及参数传递。同时，详细介绍了页面的下拉刷新和上拉触底事件的配置与监听。此外，还涵盖了小程序页面的生命周期函数及其使用，以及WXS脚本的基础知识和特点。

页面导航

声明式导航

在页面上声明一个导航组件
通过点击组件实现页面跳转

导航到tabBar页面

在这里插入图片描述

导航到非tabBar页面

在这里插入图片描述
为了简便
在这里插入图片描述

后退导航

在这里插入图片描述
在这里插入图片描述

编程式导航

调用小程序导航的API 实现页面跳转

导航到tabBar界面

在这里插入图片描述

导航到非tabBar界面

在这里插入图片描述

后退导航

在这里插入图片描述

导航传参

声明式导航传参

在这里插入图片描述
在这里插入图片描述

编程式导航传参

在这里插入图片描述

导航传参

在这里插入图片描述
在这里插入图片描述

页面事件

下拉刷新事件

是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

全局开启下拉刷新

在这里插入图片描述

局部开启下拉刷新

在这里插入图片描述

下拉刷新窗口的样式

在这里插入图片描述

监听页面的下拉刷新事件

在这里插入图片描述

停止下拉刷新的效果

在这里插入图片描述

上拉触底事件

上拉触底是移动端的专有名词 通过手指在屏幕上的上拉动作 从而加载更多数据的行为
在这里插入图片描述

监听页面的上拉触底事件

在这里插入图片描述

配置上拉触底的距离

在这里插入图片描述

生命周期

生命周期的分类

在这里插入图片描述

生命周期函数

在这里插入图片描述

生命周期函数分类

在这里插入图片描述

应用生命周期函数

在这里插入图片描述

页面生命周期函数

在这里插入图片描述

WXS脚本

在这里插入图片描述

wxs和javaScript之间的关系

在这里插入图片描述

基础语法

内嵌的wxs脚本

在这里插入图片描述

外联的wxs脚本

在这里插入图片描述
在这里插入图片描述

wxs的特点

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

【微信小程序前端开发】入门Day03 —— 页面导航、事件、生命周期、WXS 脚本及自定义组件
2303_76696898的博客
10-02 3016
本文详细介绍了小程序开发中的多个关键知识点，包括页面导航（声明式和编程式导航及传参）、页面事件（下拉刷新和上拉触底）、生命周期（应用和页面生命周期函数）、WXS 脚本（概述、基础语法和特点）以及自定义组件（创建、引用、样式、数据、监听器、生命周期、插槽和父子通信等）
微信小程序——生命周期，生命周期的分类，页面生命周期，生命周期函数的分类，应用的生命周期函数，页面的生命周期函数，wxs脚本概述
WZY22502701的博客
01-29 2963
生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。生命周期函数的作用：允许程序员在特定的时间点执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。注意：生命周期强调的是时间段，生命周期函数强调的是时间点。什么是wxswxs ( WeiXin Script ）是小程序独有的一套脚本语言，结合 WXML ，可以构建出页面的结构。
【小程序 - 基础】页面导航、页面事件、生命周期、WXS脚本_04
青春木鱼的博客
10-01 1488
【小程序】页面导航、页面事件、生命周期、WXS脚本
微信小程序（页面导航、页面事件、生命周期、WXS脚本）
ZHAOKAIYUR的博客
03-14 697
黑马程序员，学习记录黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战分类应用生命周期函数/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）} , /*** 当小程序启动，或从后台进入前台显示，会触发 onShow} , /*** 当小程序从前台进入后台，会触发 onHide} , /*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息} })页面生命周期函数Page({/**
微信小程序学习第6天——生命周期函数与WXS脚本
背心的博客
02-05 638
生命周期函数与WXS脚本
微信小程序开发实战 ⑩③（WX周期及WXS脚本）
m0_61490399的博客
10-05 2605
WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。本文到这里就结束了,大佬们的支持是我持续更新的最大动力，希望这篇文章能帮到大家💪相关专栏连接🔗下篇文章再见ヾ(￣▽￣)ByeByeHomePage社区链接🔗专栏连接🔗。
微信小程序8——生命周期与wxs
Phoenix1st的博客
02-10 497
简要介绍微信小程序的生命周期函数和wxs的用法
小程序学习——day3
m0_69380938的博客
08-02 2503
指的是页面间的相互跳转，小程序实现页面导航有两种方式。
微信小程序学习总结——③
qq_45947850的博客
06-06 1289
微信小程序学习日记
小程序开发踩坑记——初识小程序
qq_40903080的博客
08-23 455
小程序开发踩坑记——初识小程序 前言 暑假期间做了一个小程序，一个专属于我们学校学生的小程序。这也算我自从学习前端以来第一次自己独立前后端兼顾开发的项目了。由于当初给自己立的flag是在8月22日之前完成，正好今天将最后一些小bug给修复了，然后已经上交审核了。暑假的剩下几天时间，打算把小程序开发过程中的一些心得体会写下来，也算为以后自己的开发提供一些帮助。 初识小程序 之前是从vue开始接触的前...
微信小程序框架 —— 视图层、逻辑层与页面的生命周期
让优秀成为一种习惯！
10-15 1595
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
【微信小程序开发】入门Day2 —— 从视图逻辑到配置请求全方位解析
2303_76696898的博客
10-01 1631
本文详细介绍了微信小程序开发中的多个关键要点，包括 WXML 模板语法、WXSS 模板样式、配置文件、网络数据请求、页面导航、页面事件、生命周期以及 WXS 脚本。
【AI学习-comfyUI学习-第十二节-FLUX局部重绘工作流-各个部分学习-第十二节】
qq_22146161的博客
12-02 834
最近，学习comfyUI，这也是AI的一部分，想将相关学习到的东西尽可能记录下来。加载图像这就是上传的那张桥墩照片没问题这也算各一个开始吧，我也在学习摸索中。
C++基础：Stanford CS106L学习笔记 1 类型与结构
WM2101的博客
12-02 307
本文介绍了C++的类型系统和结构体特性。在类型系统方面，C++采用静态类型，变量类型一旦确定不可更改，与Python的动态类型形成对比。静态类型能提高效率并减少运行时错误。文章还介绍了using类型别名、auto类型推断以及函数重载等现代类型特性。在结构体方面，展示了如何定义和使用结构体，以及使用std::pair模板简化多值返回的实现方式。通过对比Python和C++的代码示例，突出了C++在类型安全性和编译时检查方面的优势。
windows上位机开发学习（二）计时器案例（下） int大小
qq_43091070的博客
11-29 912
本文介绍了Windows上位机开发中计时器案例的代码实现过程。首先通过工具箱添加Timer控件并设置1秒间隔，然后详细讲解了核心代码：1)声明全局变量记录时间；2)实现"开始"按钮点击事件，解析用户输入并初始化计时器；3)编写Timer的Tick事件处理逻辑，每秒更新界面并判断倒计时结束。文章还展示了完成效果图，并附带单片机int类型大小对照表。最后提供了C#串口通信编程的学习参考网址，欢迎交流讨论。
【Prompt学习技能树地图】LangChain原理及应用操作指南
最新发布
致力于成为一名data scientist 的奋斗者
12-03 478
基础层主要解决两个核心问题：模型调用的统一化和数据存储的标准化。通过抽象接口设计，为上层应用提供了稳定、可预测的编程模型。表3.2：基础层核心组件概览组件类别核心功能解决的关键问题典型实现模型抽象统一模型调用接口屏蔽不同模型API差异存储抽象统一数据访问方式标准化各类存储系统操作文档处理多格式文档加载与转换统一文档处理流程PDF、HTML、Markdown解析接口规范定义标准化调用契约确保组件间兼容性BaseLLM、VectorStore接口。
学习：《The QUIC Transport Protocol: Design and Internet-Scale Deployment》
qq_45913654的博客
12-02 535
QUIC协议是基于UDP的新型传输协议，旨在解决TCP协议在互联网环境中的固有缺陷。
DeepSeekMath-V2学习
hang on it more longer
11-29 906
DeepSeekMath-V2 通过 **"生成器 - 验证器 - 元验证器" 三位一体架构和"验证器先行" 训练策略 **，实现了 AI 数学推理的质的飞跃，不仅在顶级数学竞赛中达到人类金牌水平，更建立了一个能够自我验证、自我完善的推理系统，为 AI 在科学证明、复杂推理领域的应用开辟了新道路。注：本介绍基于 DeepSeekAI 于 2025 年 11 月 27 日发布的官方论文和技术文档。
鸿蒙学习实战之路：设备能力检测：自适应不同硬件环境
u011864152的博客
11-29 2575
设备能力检测是指应用程序在运行时识别当前设备硬件特性，并据此调整应用行为的技术。屏幕尺寸和分辨率检测传感器可用性检查硬件性能评估外设连接状态监控。
微信小程序开发框架及资源汇总整理
- **小程序的生命周期**：开发者需要了解小程序的生命周期函数，例如onLaunch（小程序启动时触发）、onShow（小程序显示时触发）和onHide（小程序隐藏时触发）等。 - **WXML（WeiXin Markup Language）**：类似HTML...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值