navigateToMini Program path如何传参
时间: 2025-05-26 13:36:23 浏览: 6
### 小程序 `navigateToMiniProgram` 传参方法详解
在小程序开发中,`navigateToMiniProgram` API 提供了两种主要的方式来实现跨小程序间的参数传递:一种是通过 `path` 参数附带查询字符串的形式;另一种则是借助 `extraData` 对象来完成更为复杂的结构化数据传输。
#### 1. 利用 Path Query String 实现简单参数传递
这种方式适用于需要传送少量且简单的键值对情况。开发者可以在调用 `navigateToMiniProgram` 方法时,在其配置项中的 `path` 字段后面追加形如 `key=value&anotherKey=anotherValue...` 的查询字符串[^2]。
```javascript
uni.navigateToMiniProgram({
appId: '目标小程序的AppId',
path: '/pages/example/example?param1=value1¶m2=value2', // 在这里设置路径和参数
success(res) {
console.log('跳转成功:', res);
},
fail(err) {
console.error('跳转失败:', err);
}
});
```
在目标小程序端,则需在其对应页面的 `onLoad` 生命周期函数内提取这些参数:
```javascript
Page({
onLoad(options) {
console.log('接收到的参数:', options); // 输出 { param1: 'value1', param2: 'value2' }
}
});
```
此法直观易懂,但对于较为复杂或者敏感的信息并不适用,因为它暴露在外容易被篡改或窃取[^2]。
#### 2. 借助 ExtraData 安全高效地发送更多样化的数据
对于那些不适合公开展示亦或是体积较大的数据来说,应该选用 `extraData` 来承载它们。相比起直接拼接到URL上的做法,这种方法更加隐蔽安全,并支持JSON格式的对象序列化[^1]。
下面是一个完整的例子展示了如何运用 `extraData` 向另一个小程序分享信息:
```javascript
uni.navigateToMiniProgram({
appId: '目标小程序的AppId',
path: '/pages/receiver/receiver',
extraData: {
user_id: 123,
session_key: 'unique_session_identifier'
}, // 设置额外的数据
success(res) {
console.log('导航至其他小程序成功');
},
fail(err) {
console.error('发生错误:', err);
}
});
```
而在接收方一侧,应当监听应用层面的 `onShow` 事件而非仅限于具体某页的加载动作,这样才能确保即使是在后台切换回来的情况下也能够正常获取到最新的 `extraData`[^2]:
```javascript
App({
onShow(option){
if (option.referrerInfo && option.referrerInfo.extraData){
const dataFromOther = option.referrerInfo.extraData;
console.log(dataFromOther.user_id, dataFromOther.session_key);
}
}
})
```
值得注意的是,为了保障用户体验的一致性以及考虑到不同平台间可能存在差异性的表现,务必测试清楚各个主流机型下的实际效果[^4]。
---
###
阅读全文
相关推荐



