快速学会小程序参数传递与路径获取

本文首发自个人自有博客:【FaxMiao个人博客】,一个关注Web前端开发技术、关注用户体验、记录前端点滴,坚持更多原创,为大家提供高质量技术博文!

首先在小程序中,所有页面的路由都由框架统一管理。getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

// 获取加载的页面对象
const pages = getCurrentPages();
// 获取当前页面的对象
const currentPage = pages[pages.length - 1];

tips:
1.不要尝试修改页面栈,会导致路由以及页面状态错误。
2.不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

一、获取当前页面url

// 当前页面url
const url = currentPage.route;

二、参数传递
1.全部变量,小程序初始化时会读取app.js文件,我们可以在这里配置全局变量,如:图片访问地址、请求地址、appid等等。

globalData: {
	appid: '123654',
	requestUrl: 'https://www.test.com/'
}

在页面中,可以通过 getApp()方法获取到全局应用对象,可以进行读取或更改。

var app = getApp();
var appid = app.globalData.appid;

2.小程序本地缓存
可以将一些常用变量(如appid)或者用户行为(如搜索历史)、长期不改变的图片(减少请求)等。本地缓存一经储存,其它页面均可随时获取使用。

// 存储
wx.setStorageSync("appid", "123654");
// 读取
wx.getStorageSync("appid");

3.url传递
这个方法较适用于页面之前跳转(如商品列表跳转商品详情),直接拼接在url里就可以了。

wx.navigateTo({
    url: '../test/test?id=1'
})

获取方式:
①getCurrentPages() 函数获取
const options = currentPage.options;

②onLoad里直接获取
onLoad: function (options) {
console.log(options)
}
在这里插入图片描述

小结:
小程序参数、数据传递包括不限于以上几种,大家可以结合实际情况使用,如:
1.全局变量,就在app.js配置
2.父、子及传递可以使用url传递
3.登录状态(token)等可以使用本地缓存,方便随时调用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Good Lucky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值