uni-app怎么实现微信小程序的内嵌小程序跳转 uni-app跨小程序交互

夜芳吖_8309

夜芳吖_8309

2026-05-11

885人浏览

原创

uni.navigatetominiprogram 调用失败主因是权限与配置缺失,需同时满足:目标小程序在 app.json 中配置 navigatetominiprogramappidlist 白名单、当前小程序开通跳转权限、仅真机支持;参数中 appid 和 envversion 必须严格校验,extradata 需为 plain object,path 须以 / 开头且页面已注册。

uni-app怎么实现微信小程序的内嵌小程序跳转 uni-app跨小程序交互

uni.navigateToMiniProgram 调用失败的典型表现

点击后无反应、控制台报 err: invalid appid 或 fail no permission,甚至直接静默失败——这基本不是代码写错了,而是权限或配置没到位。微信对跨小程序跳转有强管控,uni.navigateToMiniProgram 必须同时满足三个硬条件:目标小程序已配置白名单、当前小程序已开通跳转权限、调用环境是真机(开发者工具不支持)。

必须在目标小程序 app.json 中声明 navigateToMiniProgramAppIdList

这是最容易被忽略的一步。哪怕你 uni-app 侧代码完全正确,只要被跳转的小程序(B 小程序)没在自己的 app.json 里把你的小程序 AppID 加进白名单,微信就会直接拦截请求。

  • 打开 B 小程序项目根目录下的 app.json
  • 添加字段:"navigateToMiniProgramAppIdList": ["你的小程序AppID"](注意是字符串数组,不是单个字符串)
  • 务必重新上传并发布 B 小程序新版本,仅本地修改无效
  • 如果要支持多个来源小程序,就填多个 AppID,例如 ["wx123...", "wx456..."]

uni.navigateToMiniProgram 的参数陷阱

appId 和 envVersion 是唯二强制校验项,其余都可为空但格式不能错。常见翻车点:

微信公众号文章抓取 (Jeff版)
微信公众号文章抓取 (Jeff版)

微信公众号文章抓取工具。将微信公众号文章转换为 Markdown 格式,支持图片本地下载。当用户提到抓取微信公众号文章、提取公众号内容、爬取微信文章时触发。

下载
  • appId 字符串里不能有空格、换行或中文引号,复制时尤其注意全角/半角
  • envVersion 必须小写,且只接受 "develop" / "trial" / "release" ——写成 "Develop" 或 "production" 都会失败
  • extraData 是 plain object,不能是字符串或 null;传空对象 {} 安全,但别传 undefined 或 "{}"
  • path 必须以 / 开头,且目标页面需在 B 小程序的 pages.json 中注册过

示例正确调用:

uni.navigateToMiniProgram({
  appId: 'wx1234567890abcdef',
  path: '/pages/detail/detail?id=123',
  extraData: { from: 'uniapp', scene: 1001 },
  envVersion: 'release',
  success: (res) => console.log('跳转成功'),
  fail: (err) => console.error('跳转失败', err)
})

真机调试前必须确认的三件事

模拟器和 HBuilderX 的“运行到小程序”功能无法触发真实跳转,所有测试必须在真机上进行,且需确保:

  • 微信客户端已更新到最新版(旧版可能不识别 envVersion: "trial")
  • 当前登录的微信账号,已在 B 小程序后台的「成员管理」中被设为体验者(仅当 envVersion: "trial" 时需要)
  • uni-app 项目 manifest.json 中的「微信小程序 AppID」已填写正确,否则 uni.navigateToMiniProgram 在小程序端根本不会注册

跳转后若 B 小程序启动但收不到 extraData,大概率是它没在 App.onLaunch 或 App.onShow 的 options 参数里取值——这个数据不会自动挂到全局,必须手动解构。

相关文章

微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2323

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4983

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6070

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5578

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

783

5

微信是谁开发的
微信是谁开发的

微信是由张小龙所带领的腾讯广州研发中心产品团队打造开发的,并不是马化腾开发的,而腾讯公司总裁马化腾是在产品策划的邮件中确定这款产品的名称叫做“微信”的。想了解更多微信相关的内容,可阅读本专题下面的相关文章。

2024.11.05

5515

8

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

120

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

100

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

80

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习