欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。
根据你的描述,你在 uni-app 微信小程序中使用 web-view 嵌入 uni-app 编译的 H5 页面,点击返回按钮时遇到问题。这是 uni-app 开发中一个常见的问题,核心原因在于命名冲突。
问题分析
-
方法一失败的原因:你引入的微信 JS-SDK (jweixin-1.6.0.js) 在小程序 web-view 环境下,wx 对象上才会挂载 miniProgram 方法。如果 console.log(wx) 里面没有 miniProgram,通常是因为:
- 微信 JS-SDK 没有在 H5 页面中正确加载。
- 你的 H5 页面本身也是由 uni-app 编译的,uni-app 在运行时可能会对全局的
wx 或 uni 对象进行一些处理,导致 SDK 挂载的方法被覆盖或失效。
-
方法二失败的原因:直接在 H5 页面里调用 uni.navigateBack() 在小程序 web-view 环境下是不生效的。你遇到的 Cannot read property 'go' of undefined 报错,是因为在 web-view 内的 H5 并没有小程序的路由栈,uni 对象上挂载的导航 API 是给小程序原生页面用的,不是给 web-view 里的网页用的。
-
官方方案 uni.webView 失效的原因:你按照官方文档在 H5 中引入 uni.webview.js 并尝试使用 uni.webView.navigateBack(),结果发现 uni.webView 不可用。这正是问题的关键所在。根据社区 问答 #202225 的反馈:当被嵌入的 H5 页面本身也是由 uni-app 编译出来的时,uni.webview.js 导出的 uni 对象会和 uni-app H5 页面自身的全局 uni 对象发生冲突,导致 uni.webView 被覆盖或失效。
解决方案:使用微信 JS-SDK 并解决命名冲突
既然 uni.webView 途径存在冲突,最稳妥的方法是使用微信官方提供的 JS-SDK,并效仿社区处理冲突的解决方案。
核心思路:确保微信 JS-SDK 正确加载,并单独引用 uni.webview.js 文件,通过重命名变量来避开与 uni-app 自身 uni 对象的冲突。
具体步骤如下:
1. 在你的 uni-app H5 项目的 index.html 文件中,引入微信 JS-SDK 和 uni.webview.js,并进行重命名:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... 其他配置 ... -->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
<!-- #ifdef H5 -->
<!-- 1. 引入微信 jssdk -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 2. 引入 uni.webview.js -->
<script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
<script>
// 3. 关键步骤:将 uni.webView 对象重命名保存,避免和 uni-app 的全局 uni 冲突
// 注意:这里假设你引入的 uni.webview.js 文件版本中,其内容是通过 `uni.webView = ...` 挂载的。
var uniWebView = uni && uni.webView;
</script>
<!-- #endif -->
</body>
</html>
本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
2. 在你的 H5 页面逻辑中,使用微信 JS-SDK 的方法进行返回操作:
首先,判断当前环境是否为微信小程序 web-view。
// 在你的 H5 页面中(例如 pages/index/index.vue)
methods: {
goBack() {
// 判断是否在微信小程序环境中
// 兼容判断方式
const isInMiniProgram = navigator.userAgent.match(/miniprogram/gi) || window.__wxjs_environment === 'miniprogram';
if (isInMiniProgram) {
// 在微信小程序 web-view 中,使用微信 SDK 返回
if (window.wx && window.wx.miniProgram) {
window.wx.miniProgram.navigateBack({
delta: 1
});
} else {
console.error('微信 JS-SDK 未加载成功');
}
} else {
// 在普通浏览器或 App 环境中,使用 uni.webView(如果你需要兼容)
// 注意使用重命名后的变量
if (window.uniWebView) {
window.uniWebView.navigateBack();
} else {
// 其他环境的返回逻辑,比如 H5 自身的路由返回
// history.back();
}
}
}
}
本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
重要提醒:
- 微信 JS-SDK 域名要求:
res.wx.qq.com 这个域名需要在微信公众平台的“公众号设置”->“功能设置”->“JS接口安全域名”中配置。对于小程序 web-view,需要小程序后台配置业务域名。
- 文件版本:
uni.webview.1.5.6.js 是当前推荐版本,你可以根据需要从 GitCode 仓库 下载到本地,放在项目的 static 或 public 目录下,以避免 CDN 问题。
通过这种方式,你既避开了 uni-app 内部的命名冲突,又使用了最稳定、最官方的微信小程序 web-view 通信方式,可以确保在微信小程序中点击返回按钮能够正常返回上一级小程序页面。