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

最新推荐文章于 2025-07-22 21:54:40 发布
最新推荐文章于 2025-07-22 21:54:40 发布
阅读量240 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 学习 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/spring0205/article/details/124840618
本文深入探讨了小程序中的声明式和编程式导航，包括如何导航到tabBar和非tabBar页面，以及参数传递。同时，详细介绍了页面的下拉刷新和上拉触底事件的配置与监听。此外，还涵盖了小程序页面的生命周期函数及其使用，以及WXS脚本的基础知识和特点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面导航

声明式导航

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

导航到tabBar页面

在这里插入图片描述

导航到非tabBar页面

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

后退导航

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

编程式导航

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

导航到tabBar界面

在这里插入图片描述

导航到非tabBar界面

在这里插入图片描述

后退导航

在这里插入图片描述

导航传参

声明式导航传参

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

编程式导航传参

在这里插入图片描述

导航传参

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

页面事件

下拉刷新事件

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

全局开启下拉刷新

在这里插入图片描述

局部开启下拉刷新

在这里插入图片描述

下拉刷新窗口的样式

在这里插入图片描述

监听页面的下拉刷新事件

在这里插入图片描述

停止下拉刷新的效果

在这里插入图片描述

上拉触底事件

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

监听页面的上拉触底事件

在这里插入图片描述

配置上拉触底的距离

在这里插入图片描述

生命周期

生命周期的分类

在这里插入图片描述

生命周期函数

在这里插入图片描述

生命周期函数分类

在这里插入图片描述

应用生命周期函数

在这里插入图片描述

页面生命周期函数

在这里插入图片描述

WXS脚本

在这里插入图片描述

wxs和javaScript之间的关系

在这里插入图片描述

基础语法

内嵌的wxs脚本

在这里插入图片描述

外联的wxs脚本

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

wxs的特点

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

小程序开发踩坑记——初识小程序
qq_40903080的博客
08-23 433
小程序开发踩坑记——初识小程序 前言 暑假期间做了一个小程序，一个专属于我们学校学生的小程序。这也算我自从学习前端以来第一次自己独立前后端兼顾开发的项目了。由于当初给自己立的flag是在8月22日之前完成，正好今天将最后一些小bug给修复了，然后已经上交审核了。暑假的剩下几天时间，打算把小程序开发过程中的一些心得体会写下来，也算为以后自己的开发提供一些帮助。 初识小程序 之前是从vue开始接触的前...
小程序源码
03-14
总之，"小程序源码"是一个实践微信小程序开发的宝贵资源，通过学习和研究这个源码，开发者不仅可以掌握微信小程序的开发技术，还能深入了解前端开发的实践策略和设计模式。对于想要入行小程序开发的人员来说，这是一...
【微信小程序前端开发】入门Day03 —— 页面导航、事件、生命周期、WXS 脚本及自定义组件
2303_76696898的博客
10-02 2925
本文详细介绍了小程序开发中的多个关键知识点，包括页面导航（声明式和编程式导航及传参）、页面事件（下拉刷新和上拉触底）、生命周期（应用和页面生命周期函数）、WXS 脚本（概述、基础语法和特点）以及自定义组件（创建、引用、样式、数据、监听器、生命周期、插槽和父子通信等）
【小程序 - 基础】页面导航、页面事件、生命周期、WXS脚本_04
青春木鱼的博客
10-01 1429
【小程序】页面导航、页面事件、生命周期、WXS脚本
微信小程序（页面导航、页面事件、生命周期、WXS脚本）
ZHAOKAIYUR的博客
03-14 628
黑马程序员，学习记录黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战分类应用生命周期函数/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）} , /*** 当小程序启动，或从后台进入前台显示，会触发 onShow} , /*** 当小程序从前台进入后台，会触发 onHide} , /*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息} })页面生命周期函数Page({/**
微信小程序——生命周期，生命周期的分类，页面生命周期，生命周期函数的分类，应用的生命周期函数，页面的生命周期函数，wxs脚本概述
WZY22502701的博客
01-29 2917
生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。生命周期函数的作用：允许程序员在特定的时间点执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。注意：生命周期强调的是时间段，生命周期函数强调的是时间点。什么是wxswxs ( WeiXin Script ）是小程序独有的一套脚本语言，结合 WXML ，可以构建出页面的结构。
微信小程序学习第6天——生命周期函数与WXS脚本
背心的博客
02-05 605
生命周期函数与WXS脚本
微信小程序开发实战 ⑩③（WX周期及WXS脚本）
m0_61490399的博客
10-05 2579
WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。本文到这里就结束了,大佬们的支持是我持续更新的最大动力，希望这篇文章能帮到大家💪相关专栏连接🔗下篇文章再见ヾ(￣▽￣)ByeByeHomePage社区链接🔗专栏连接🔗。
微信小程序8——生命周期与wxs
Phoenix1st的博客
02-10 477
简要介绍微信小程序的生命周期函数和wxs的用法
小程序学习——day3
m0_69380938的博客
08-02 2386
指的是页面间的相互跳转，小程序实现页面导航有两种方式。
微信小程序学习总结——③
qq_45947850的博客
06-06 1265
微信小程序学习日记
微信小程序入门.docx
10-05
- `app.js`：小程序逻辑代码，管理整个小程序的生命周期。 - `app.json`：全局配置文件，包括页面路径、窗口表现、网络超时时间等。 - `app.wxss`：全局样式表，定义小程序的公共样式。 2. **页面文件**： - 每...
微信小程序开发框架及资源汇总整理
- **小程序的生命周期**：开发者需要了解小程序的生命周期函数，例如onLaunch（小程序启动时触发）、onShow（小程序显示时触发）和onHide（小程序隐藏时触发）等。 - **WXML（WeiXin Markup Language）**：类似HTML...
【Linux】重生之从零开始学习运维之Mysql安装
qq_40427704的博客
07-21 232
【代码】【Linux】重生之从零开始学习运维之Mysql安装。
C++编程学习（第13天）
醉后不知天在水，满船清梦压星河。
07-22 732
C++的选择结构
学习小结记录
A57645467的博客
07-22 458
1、首先客户端位置是一台电脑或手机，在打开浏览器以后，比如输入http://www.zdns.cn的域名，它首先是由浏览器发起一个DNS解析请求，如果本地缓存服务器中找不到结果，则首先会向根服务器查询，根服务器里面记录的都是各个顶级域所在的服务器的位置，当向根请求http://www.zdns.cn的时候，根服务器就会返回.cn服务器的位置信息。2、递归服务器拿到.cn的权威服务器地址以后，就会寻问cn的权威服务器，知不知道http://www.zdns.cn的位置。
零基础学习性能测试第一章-为什么会有性能问题
u011537504的博客
07-20 979
理解性能问题的根源，将使你在工作中从被动救火转向主动防御，成为团队中的性能守护者。：理解性能问题的根源，掌握快速定位瓶颈的思维模型，获得即学即用的排查工具集。[描述具体表现，如：订单提交接口平均响应时间从500ms升至5s]：仅当ROI > 3时执行优化。
从零开始学习 NumPy 库：核心功能与实践指南
最新发布
2201_75607087的博客
07-22 1016
本文系统介绍了NumPy库的核心功能与应用。主要内容包括：数组创建与属性操作、维度变换、元素选取与修改、数学运算、组合与分割、随机数生成、文件读写、统计计算以及数组拷贝机制。NumPy提供了高效的多维数组对象和丰富的运算工具，支持从列表转换、特殊数组生成到复杂矩阵运算等操作。特别强调了数组的视图与副本概念、元素级与矩阵级运算的区别，以及常用的统计函数应用。通过具体代码示例，展示了NumPy在科学计算中的基础性作用，为数据处理和机器学习等领域提供了核心支持。
模拟电路硬件开发学习记录（二）带LVDS输出的比较器TLV3801
2404_89853580的博客
07-22 233
最近在设计一款射频比较器，在德州仪器的官网选择了这款满足要求的芯片，最开始只注意到了他那ps级的延迟和3GHz的切换频率，对于手册提到的LVDS输出没有在意，指导测试过程中芯片OUT+输出幅度只有350mv左右，没有像其他比较器一样输出TTL电平才觉得奇怪，于是了解了这种LVDS输出的比较器，记录如下。
微信小程序——wxs脚本，怎么写地图
09-20
微信小程序的WXML（WeiXin Markup Language）是用于描述界面的语法，而WXSS（WeiXin Style Sheets）则是样式语言。如果你想要在微信小程序中添加地图功能，你需要使用腾讯地图的API，而不是直接编写JavaScript（因为WXS和JS是分开的）。地图相关的操作通常在JS文件中完成。 首先，在项目中引入腾讯地图的SDK，可以在`app.json`的`jsapis`配置里开启： ```json { "pages": [...], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "页面标题", "navigationBarTextStyle": "black", "jsApiList": [ "mapLoad" // 其他需要的地图API ] } } ``` 然后，在需要地图的页面的JS文件中，你可以这样初始化地图： ```javascript Page({ data: { map: null, }, onLoad() { this.initMap(); }, initMap() { wx.cloud.callFunction({ name: 'getMapToken', // 这里假设你有一个云函数获取地图token success: res => { const token = res.result; wx.map.load({ key: 'YOUR_MAP_API_KEY', // 替换为你的腾讯地图key zoom: 10, // 初始缩放级别 latitude: 39.913856, // 经度 longitude: 116.407722, // 纬度 marker: { // 马克点信息 .latitude: 39.913856, longitude: 116.407722, infoContent: '这里是起点', }, ak: token, // 使用地图API的token isShowZoomControl: true, // 是否显示缩放控件，默认true }).then(map => { this.setData({ map }); }); }, fail: err => console.error('加载地图失败:', err) }); } }) ``` 记得替换上述代码中的`YOUR_MAP_API_KEY`为你的实际腾讯地图API Key。在这个基础上，你可以通过地图实例来添加标记、监听事件等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值