Laucher
2024年 10月 14日
微信小程序使用 web-view 功能，实现内嵌 H5 项目
微信小程序 web-view 内嵌 H5 端遇到的问题，并介绍了解决方案
最近，公司根据客户需求，需要将一款使用 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 的页面。
webPages - 配置中转页面： 在该页面中使用 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 跳转到微信小程序的功能。
