一、需求描述

这两天遇到一个需求，用uni-app开发了一个小程序（小程序-A）与H5端（**H5-A **）共用的功能。

  • 这个功能需要在另外的一个小程序（小程序-B）通过webview的方式调用
  • 并且还有一个H5（H5-B）也需要通过 iframe 或者 location.href 的方式去调用显示

二、需要解决的问题

需求里面有这样的需求，这个页面里面有两个按钮，按钮一点击后跳转到对应端的首页，即 小程序-A 点击跳转 小程序-A 的首页；H5-A 点击跳转 H5-A 的首页；小程序-B 点击跳转 小程序-B 的首页；H5-B 点击跳转 H5-B 的首页。

按钮二点击后跳转对应平台相反的端，即 小程序-A 点击跳转 小程序-B 的首页；H5-A 点击跳转 H5-B 的首页；小程序-B 点击跳转 小程序-A 的首页；H5-B 点击跳转 H5-A 的首页。

存在的问题：
小程序-A、H5-A、H5-B实现起来都没有问题，但在小程序-B中使用不了。

原因：
因为在 小程序-B 实际是访问的 H5-A 的页面。这个H5里面通过js可以跳回到 小程序-B 本身的首页里（因为本身就是在这个小程序中去访问的），但是无法跳转到 小程序-A 的首页 （其原理其实相当于没有在小程序中访问，但需要直接在H5中跳转到对应的小程序）。

三、怎么解决

查了一下文档，微信官方前段时间正好发布了一个 网页开放标签 wx-open-launch-weapp 但是，现在这个标签支持的环境是微信环境，注意，外部浏览器不支持。其实这个标签主要用于公众号的开发。

实际解决方法：
在 小程序-B 里面新建一个空白页，作为中转页面。原理即：小程序-B 中访问了一个H5的页面，点击按钮后跳回 小程序-B 的中转页面并立即使用 uni.navigateToMiniProgram 打开 小程序-A 的首页

扩展：
使用中转页的方式，会打开一个空白页面，用户体验并不是很好。但这也是比较好的解决方法了，因为官方没有提供这样的解决方式。

还有一种解决方式：点击按钮后将 小程序-A 的小程序码显示出来，提供保存扫描，扫描后打开小程序。

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！