当前位置：首页 > news >正文

鸿蒙OSUniApp 制作简单的页面跳转与参数传递功能#三方框架 #Uniapp

news 来源：原创 2025/6/17 3:52:36

UniApp 制作简单的页面跳转与参数传递功能

在移动应用开发中，页面跳转与参数传递是最基础也是最常用的功能之一。无论是商品详情、用户信息、搜索结果还是表单填写，页面之间的数据流转都离不开参数传递。随着 HarmonyOS（鸿蒙）生态的不断发展，如何用 UniApp 实现一个兼容鸿蒙的页面跳转与参数传递方案，成为许多开发者关注的话题。本文将结合实际项目经验，详细讲解如何用 UniApp 制作一个简单、易用、适配鸿蒙的页面跳转与参数传递功能。

为什么要掌握页面跳转与参数传递？

页面解耦：不同页面间通过参数传递，降低耦合度，提升可维护性。
数据流转：如商品ID、用户ID、搜索关键词等，需在页面间传递。
多端适配：在鸿蒙、微信小程序、H5等多端保持一致跳转体验。

方案设计与技术要点

页面跳转：使用 uni.navigateTo、uni.redirectTo、uni.switchTab 等API实现页面跳转。
参数传递：通过URL query参数传递数据，目标页面通过 onLoad 获取。
参数解析：支持字符串、数字、布尔等常用类型，复杂对象可用JSON序列化。
鸿蒙适配：兼容 HarmonyOS 端的页面栈、返回、动画等体验。
易用性与扩展性：代码结构清晰，便于业务集成和后续扩展。

1. 页面跳转与参数传递实现

我们以商品列表跳转到商品详情为例，演示参数传递的完整流程。

商品列表页（list.vue）

<template><view class="list-page"><view v-for="item in goodsList" :key="item.id" class="goods-item" @click="goDetail(item)"><text>{{ item.name }}</text><text class="price">￥{{ item.price }}</text></view></view>
</template><script>
export default {data() {return {goodsList: [{ id: 101, name: '鸿蒙智能手表', price: 1299 },{ id: 102, name: 'HarmonyOS 蓝牙耳机', price: 399 },{ id: 103, name: '鸿蒙生态路由器', price: 599 }]};},methods: {goDetail(item) {// 通过URL参数传递id和nameuni.navigateTo({url: `/pages/detail/detail?id=${item.id}&name=${encodeURIComponent(item.name)}`});}}
};
</script><style scoped>
.list-page {padding: 40rpx;
}
.goods-item {background: #fff;border-radius: 12rpx;margin-bottom: 24rpx;padding: 32rpx;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);display: flex;justify-content: space-between;align-items: center;font-size: 32rpx;color: #333;
}
.price {color: #007dff;font-weight: bold;
}
</style>

商品详情页（detail.vue）

<template><view class="detail-page"><text class="title">商品详情</text><text class="label">商品ID：{{ id }}</text><text class="label">商品名称：{{ name }}</text><button class="back-btn" @click="goBack">返回</button></view>
</template><script>
export default {data() {return {id: '',name: ''};},onLoad(query) {// 获取URL参数this.id = query.id;this.name = decodeURIComponent(query.name || '');},methods: {goBack() {uni.navigateBack();}}
};
</script><style scoped>
.detail-page {padding: 40rpx;
}
.title {font-size: 40rpx;font-weight: bold;margin-bottom: 32rpx;color: #222;
}
.label {display: block;font-size: 32rpx;margin-bottom: 24rpx;color: #555;
}
.back-btn {width: 100%;height: 88rpx;background: linear-gradient(90deg, #007dff 0%, #00c6ff 100%);color: #fff;border: none;border-radius: 12rpx;font-size: 32rpx;margin-top: 40rpx;
}
</style>

2. 复杂参数的传递与解析

如果需要传递对象或数组等复杂参数，可以用 JSON.stringify 序列化后传递，目标页用 JSON.parse 解析：

// 跳转时
const obj = { id: 1, name: '鸿蒙设备', tags: ['智能', '生态'] };
uni.navigateTo({url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(obj))}`
});// 详情页 onLoad
onLoad(query) {if (query.data) {const obj = JSON.parse(decodeURIComponent(query.data));// 使用 obj.id, obj.name, obj.tags ...}
}