最近，公司根据客户需求，需要将一款使用 UniApp 开发的 OA 项目（以下简称 OA 项目）扩展至微信小程序端。目前，该 OA 项目仅支持 App 和 H5 端，并未兼容微信小程序，因此在编译到微信小程序时出现了许多样式错乱的问题。

鉴于 OA 项目已经在生产环境中运行，修复所有样式问题可能会耗费大量时间和资源。因此，我们考虑使用微信小程序的 web-view 组件来内嵌 H5 端，并对微信小程序内部的部分样式和布局进行适度优化。这样既能快速实现需求，又能保证用户体验。

下面我将详细记录内嵌 H5 的过程。如果您在开发中遇到了类似的问题，希望这篇博客能为您提供解决思路和方案。

1、 首先，我们的 OA 项目是使用 UniApp 开发的，并非传统的 Vue3。因此，在路由和打包上存在一些细微差别。

2、 出现的问题：当我使用微信小程序 web-view 内嵌 H5 端 URL 时，出现了一个具体问题：

uni.navigateTo({
  url: url,
  animationType: "slide-in-right",
});

跳转后，发现在小程序 NavBar 上没有返回上级页面的箭头按钮

3、解决方案：此按钮的显示需要满足当前页面不是一级目录，而是由 wx.miniProgram.navigateTo 跳转至的页面。具体思路如下：

1、 小程序首页：

• 使用 web-view 内嵌 H5 端 URL。

2、 H5 端跳转：

• 从 H5 端使用 wx.miniProgram.navigateTo 跳转回小程序的中转页面。

3、 小程序中转页面：

• 在小程序中使用 web-view 方法再次内嵌 H5 端 URL。
• 这样处理后，NavBar 中会显示返回上级的箭头按钮。

4、具体实现

在微信小程序中添加一个名为 web 的页面，用作中转页面。具体步骤如下：

• 创建中转页面： 在微信小程序的 pages 目录下创建一个名为 web 的页面。
  
• 配置中转页面： 在该页面中使用 web-view 组件内嵌 H5 端 URL。

5、在 h5 页面中添加如下代码，实现从 h5 端 跳转到微信小程序端

• h5 项目全局引入 JSSDK

<script type="text/javascript" src="/static/js/jweixin-1.3.2.js"></script>

• 使用 wx.navigateTo 跳转，需要注意的是不同版本的 JSSDK 需要做兼容处理，具体请到微信官方文档

export const clickNavigateTo = (url: string = "/pages/index/index"): void => {
  wx.navigateTo({ url: "/pages/web/web", animationType: "slide-in-right" });
};

这里就会出现报错：无法找到此页面，但是我已经创建了 pages/web/web 的呀？

** 在不断排查的过程中，我最终发现了导致此问题的具体原因： **

因为在 UniApp 下默认会有一套 WXSDK，所以我们使用的 wx.navigateTo 方法并不是我们导入的全局 SDK 的方法。因此，默认情况下 wx.navigateTo 会在 UniApp 的 pages 目录下寻找路由，而不是在微信小程序的 pages 目录里。这会导致内部跳转冲突。

解决方案已经在 uniapp 官网文档提及过，uniapp 官方文档

根据文档显示，在 H5 页面中添加如下代码即可解决内部跳转冲突问题。

我们修改了跳转方式，改为使用 uni.webView.navigateTo 方法跳转。但是，又报了 webView 无法找到的错误。因此，我在控制台打印了 uni 实例，发现没有 webView 方法。后来，我查阅了 uni.webview 的源代码，确认其中确实包含了 webView 方法。然而，在控制台打印 uni 实例时，发现与 uni.webview 源代码中的内容不一致，因此判断为导入不成功。 经过一番折腾，最终发现了问题所在：导入的 uni.webview 与 UniApp 自带的 SDK 存在命名冲突。因此，我尝试修改 uni.webview 的源代码。

最终，在控制台打印后，找到了 webView 方法。

6、最后，在 H5 页面中添加如下代码，实现从微信小程序端跳转到 h5 页面。

export const isWxMiniprogram = (): boolean =>
  window.__wxjs_environment === "miniprogram";
export const clickNavigateTo = (url: string = "/pages/index/index"): void => {
  if (isWxMiniprogram()) {
    console.log("url", url);
    uniCustom.webView.navigateTo({
      url: `/pages/web/web?url=${encodeURIComponent(url)}`,
    });
  } else {
    uni.navigateTo({
      url: url,
      animationType: "slide-in-right",
    });
  }
};

这样就完成了 h5 跳转到微信小程序的功能。