news 2026/2/15 12:27:03

小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案

【问题1】怎么在uniapp H5中嵌入uni sdk？
根据官方提供的，h5配置中有个index.html模板路径，默认为空，可定制生成的html代码，自定义meta、引入外部js等，参考
在项目根目录建立一个template.h5.html（仿照hello-uni-app项目），然后在h5配置中填入template.h5.html

template.h5.html中的代码可以直接先复制官方提供的h5-template自定义模板的代码，或者下面的代码
然后将uni-sdk等第三方引入到html中，注意这里就有个小坑： uni sdk放到body下面！下面！下面！ 这里不注意的话，可能会根据我们的习惯放到body里面。
template.h5.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> <%= htmlWebpackPlugin.options.title %> </title>
<!-- Open Graph data -->
<!-- <meta property="og:title" content="Title Here" /> -->
<!-- <meta property="og:url" content="http://www.example.com/" /> -->
<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
<!-- <meta property="og:description" content="Description Here" /> -->
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
} else if (/quickapp/i.test(userAgent)) {
// quickapp
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent) && document.querySelector('.post-message-section')) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</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>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
console.log(uni, uni.webView)
uni.webView.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
<!--经过测试验证这里已经成功了-->
uni.webView.navigateTo({
url:'/pages/test1/test1'
})
});
</script>
</html>

【问题2】web-view 加载 uni-app H5，内部跳转冲突如何解决?
该问题也是在web-view的下面的FAQ中有说明
使用 uni.webView.navigateTo…，这样就避免了与内部uni.navigateTo的冲突
注意：再次提醒下uni sdk放到body下面，否则uni.webView是找不到的

【问题】uniappzz+VUE3中的自定义模板template.h5.html不生效?
根据做项目的时候发现在使用VUE3模式下，自定义模板template.h5.html不生效，而生效是默认的index.html，那么就可以直接在index.html中写：
注意：这里还有个坑，uni.webView应该在初始的时候就用变量保存下来，后面直接用变量，不能在document.addEventListener(‘UniAppJSBridgeReady’, function() {})中去保存，否则拿不到uni.webView
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
} else if (/quickapp/i.test(userAgent)) {
// quickapp
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent) && document.querySelector('.post-message-section')) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
var uniWebView = uni.webView;//必须在这时候保存下来
console.log(uniWebView)
uniWebView.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
</script>
</body>
</html>

补充：h5中获取小程序或父级传递的参数
可以将此方法写到公共调用的地方，话不多说，直接上代码：

function getQuery(name) {
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = decodeURIComponent(window.location.search).substr(1).match(reg);
if(r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}

使用的时候直接调用：const id = getQuery(‘id’);

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/2/14 15:22:12

家长用华为，孩子用iPhone，怎样限制玩手机？

手机虽然为孩子们提供了便捷的学习、娱乐渠道&#xff0c;但同时也可能带来一些潜在的问题&#xff0c;比如过度沉迷其中影响学习和身心健康等。如果你希望全面且准确地了解孩子的手机使用状况&#xff0c;包括他们在手机上花费的时间、频繁使用的应用程序等信息&#xff0c;以…

作者头像 李华
网站建设 2026/2/13 12:04:58

前端设计模式：轻量级实战指南

目录 1.简介 一. 什么是设计模式&#xff1f; 二、前端设计模式的“不一样” 1. 语言特性&#xff1a;弱类型、原型继承&#xff0c;让“类式模式”变“轻量” 2. 场景核心&#xff1a;DOM、异步、组件化&#xff0c;让模式“靶向落地” &#xff08;1&#xff09;DOM操作…

作者头像 李华
网站建设 2026/2/10 2:25:51

26、全功能应用：拼写检查与索引生成

全功能应用：拼写检查与索引生成 在文本处理领域，拼写检查和索引生成是两项重要的任务。下面将详细介绍如何使用相关工具和脚本完成这些任务。 拼写检查脚本 拼写检查脚本通过设置一个 shell 变量 AWKLIB 来指定 spellcheck.awk 脚本的位置。符号 “$*” 会展开为脚本名…

作者头像 李华
网站建设 2026/2/8 6:19:15

4.1 AI代码研究方法：快速掌握大型开源项目核心代码库

4.1 AI代码研究方法：快速掌握大型开源项目核心代码库 在现代软件开发中，理解和掌握大型开源项目的代码库是一项关键技能。传统的代码阅读方法往往效率低下且容易迷失在复杂的代码结构中。本节将介绍如何利用AI工具（如Cursor、Claude Code等）来快速、系统地解构和理解大型开…

作者头像 李华
网站建设 2026/2/11 20:11:17

4.1 AI赋能代码研究：快速解构大型开源项目

4.1 AI赋能代码研究：快速解构大型开源项目 在软件开发过程中，我们经常需要理解和学习大型开源项目的代码结构和实现原理。传统的代码阅读方式往往效率低下，难以快速把握项目的整体架构和核心逻辑。本节课将介绍如何利用AI工具（特别是Cursor和Claude Code）来快速解构和理解…

作者头像 李华
网站建设 2026/2/3 10:41:09

魔改YOLO13高阶版改进之结合C3k2与DySnakeConv电信天线设备检测

1. 魔改YOLO13高阶版改进之结合C3k2与DySnakeConv电信天线设备检测 1.1. &#x1f680; 前言 在当今5G和物联网快速发展的时代&#xff0c;电信天线设备的检测与维护变得越来越重要&#xff01;&#x1f50d; 传统的检测方法效率低下且容易出错&#xff0c;而基于深度学习的目…

作者头像 李华