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

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

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

页面导航

声明式导航

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

导航到tabBar页面

在这里插入图片描述

导航到非tabBar页面

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

后退导航

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

编程式导航

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

导航到tabBar界面

在这里插入图片描述

导航到非tabBar界面

在这里插入图片描述

后退导航

在这里插入图片描述

导航传参

声明式导航传参

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

编程式导航传参

在这里插入图片描述

导航传参

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

页面事件

下拉刷新事件

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

全局开启下拉刷新

在这里插入图片描述

局部开启下拉刷新

在这里插入图片描述

下拉刷新窗口的样式

在这里插入图片描述

监听页面的下拉刷新事件

在这里插入图片描述

停止下拉刷新的效果

在这里插入图片描述

上拉触底事件

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

监听页面的上拉触底事件

在这里插入图片描述

配置上拉触底的距离

在这里插入图片描述

生命周期

生命周期的分类

在这里插入图片描述

生命周期函数

在这里插入图片描述

生命周期函数分类

在这里插入图片描述

应用生命周期函数

在这里插入图片描述

页面生命周期函数

在这里插入图片描述

WXS脚本

在这里插入图片描述

wxs和javaScript之间的关系

在这里插入图片描述

基础语法

内嵌的wxs脚本

在这里插入图片描述

外联的wxs脚本

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

wxs的特点

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

微信小程序的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、付费专栏及课程。

余额充值