首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序中点击按钮跳转另外一个小程序

小程序中点击按钮跳转另外一个小程序

作者头像
王小婷
发布于 2025-05-18 07:01:44
发布于 2025-05-18 07:01:44
45000
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

有很多时候,推广业务需要,会在一个小程序之中绑定另外一个小程序,形成小程序内部之间的生态系统,不但可以满足用户更多需求,增强小程序用户粘性,还可以有利于小程序大量引流。

好了话不多说,从小程序A内跳转到小程序B内有一个前提条件:A和B必须被同一个公众号关联,打开同一公众号下关联的另一个小程序。(注:必须是同一公众号下,而非同个 open 账号下)

两种方法跳转对比 :

方法1:wx.navigateToMiniProgram(OBJECT)

navigateToMiniProgram 开发环境的7月20号正式弃用了:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.navigateToMiniProgram({
  appId: '要打开的AppId',
  path: 'pages/index/index?id=123456789',
  extarData: {
    open: 'happy'
  },
  envVersion: 'release',
  success(res) {
    // 打开成功
  }
})

常见 Bug 表现:使用navigateToMiniProgram打开新的小程序时,原小程序被关闭导致无法使用navigateBackMiniProgram方法

方法2:navigator组件跳转:(代替)

文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

开始: wxml:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <view class="btn-area">
  <navigator target="miniProgram" open-type="navigate" app-id="wxaa0b47080dce0847" path="" extra-data="" version="release" class='nav'>打开绑定的小程序</navigator>
</view> 

wxss:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.nav {
  color: #fff;
  height: 120rpx;
  line-height: 120rpx;
  background: green;
  text-align: center;
}

对比之前小程序跳转的旧方法,从 2.3.0 版本开始,在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。

但是,跳转的时候会发生这样的情况,navigateToMinProgram接口需要配置声明,否则没有办法跳转。

5640239-499f610f85280c9f.gif
5640239-499f610f85280c9f.gif

微信开发者工具之中是如此,不妨打开二维码,真机测试,成功跳转到另外一个小程序上面。

原文作者:祈澈姑娘 原文链接:https://www.jianshu.com/u/05f416aefbe1创作不易,转载请告知 90后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 方法1:wx.navigateToMiniProgram(OBJECT)
  • 方法2:navigator组件跳转:(代替)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档