uniapp分别开发微信小程序和H5，通讯踩坑

大王2025-03-21 15:15

前言

在混合开发场景中，我们使用uniapp同时开发了微信小程序和配套H5页面。但当H5需要与宿主小程序进行通讯交互时，却意外遭遇了长久的通讯协议地狱。本文将复盘我们尝试的4种方案及其背后的技术原理，最终成功实现动态通讯的方案。

一、为何需要跨端通讯？

业务中存在小程序无法显示物理公式、数学公式。那么在练习题结束之后，需要自动返回，这时候就需要.navigateBack();和postMessage。

二、四次方案迭代的血泪史

方案1：uni原生跳转（失败）

以为可以直接uni.navigateBack()就可以挑战到小程序的上一页。好的直接失败，并且刷新了H5界面

问题根源：因为H5 也是uniapp开发的，所以直接调用的是当前项目（H5）。

方案2：引入uni-sdk、wx-sdk（失败）

xml 复制代码

<!-- 微信 JS-SDK  -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

问题根源 ：我在index.html里面直接引入的window.wx.miniProgram直接undefind。现在回想不知道是不是因为我没有重启项目

方案3：静态引入微信JS-SDK（失败）

import webUni from './uni.webview.1.5.4.js'; import wx from './jweixin-1.3.2.js';

我在pages/course/index 界面中import使用后，调用webuni/wx还是失败。

方案4：动态注入SDK（成功✨）

ini 复制代码

	setwxSdk() {
		const script = document.createElement('script');
		// script.src = `/static/js/jweixin-1.6.0.js?v=${Date.now()}`; // 此方案无效
		script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
		script.onload = () => {
			if (!window.wx.config) {
				console.error('微信 JS-SDK 未加载！');
				this.setwxSdk();
				return;
			}
			this.initWeixinSDK();

		};
		document.head.appendChild(script);
	}

三、通讯实现

javascript 复制代码

window.wx.ready(() => {
			window.wx.miniProgram.postMessage({
				data: {
					type: 'customEvent',
					content: 'Hello from UniApp H5!'
				}
			});
			window.wx.miniProgram.navigateBack();
		});

四、遗留问题

继续研究实时返回ing