uni-app web-view中H5配置template.html后样式错乱且无法正常与小程序主体通讯

uni-app web-view中H5配置template.html后样式错乱且无法正常与小程序主体通讯

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>
        </title>

        <!-- <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>
        <!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
        <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
        <!-- 头条 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
        <script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"></script>
        <!-- uni 的 SDK，必须引用。 -->
        <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
        <div id="app"></div>
        <script type="text/javascript">
            document.addEventListener('UniAppJSBridgeReady', function() {
                uni.getEnv(function(res) {
                    console.log('当前环境：' + JSON.stringify(res));
                });
            });
        </script>
        <!-- built files will be auto injected -->
    </body>
</html>

操作步骤：

按照文档正常配置 template.html
【参考https://uniapp.dcloud.io/component/web-view】

预期结果：

预期结果是 web-view 当中的 H5页面点击按钮时，能够正常跳转回小程序，并且 H5 页面也不应该有样式上的错乱

实际结果：

实际结果是 web-view 当中的 H5页面点击按钮时，不能够正常跳转回小程序，并且 H5 页面也存在样式上的错乱

bug描述：

我目前在耦合两个 uniapp 项目：

  1. uniapp 开发的微信小程序/字节小程序
  2. uniapp开发的 H5
    其中 H5 作为 web-view嵌入到小程序页面中。有一个简单的需求是，在 web-view的 H5里面点击按钮，然后可以跳转回到小程序。我参考了很多官方文档里面对于 web-view 和小程序通信的内容，尤其因为 H5 也是 uniapp 项目，所以调用了 uni.webView.navigateTo…

遇到的 bug 是：

  1. 我在项目根目录下创建自定义模板html，html 里面也引入了对应的小程序 SDK 和 uniSdk, 同时在 manifest.json 里面设置 html 路径，但是结果有些时候按钮点击以后可以成功跳转回小程序，有些时候则不行，这个 bug 我也没搞懂发生在哪个环节，每次修改 html 模板以后我也都重新运行项目。

  2. 自定义模板 html以后，uniapp 提供的很多组件会丧失默认的样式，例如 input 变得跟 ie 的一样带边框（uniapp 默认的 input 没有边框），图片 image 的很多属性功能貌似也缺失了（比如 mode="aspectFill"等等），而且页面会存在 actionsheet 组件的残留（页面最下面莫名显示“取消”两个字） 【配置index.html 路径前后的效果图我已上传附件】

项目 信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 Alpha
HBuilderX版本号 3.2.6
浏览器平台 Chrome
浏览器版本 92.0.4515.159
项目创建方式 HBuilderX


更多关于uni-app web-view中H5配置template.html后样式错乱且无法正常与小程序主体通讯的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app web-view中H5配置template.html后样式错乱且无法正常与小程序主体通讯的实战教程也可以访问 https://www.itying.com/category-93-b0.html


样式错乱问题：自定义 template.html 会覆盖 uni-app 默认的 HTML 模板，导致内置 CSS 重置和组件样式丢失。需手动补充 uni-app 的样式基准。在 <head> 中添加以下代码：

<style>
  /* 恢复 uni-app 默认样式重置 */
  page, view, text, image, input, button { box-sizing: border-box; }
  input { border: 0; background: transparent; outline: none; }
  /* 补充其他必要重置样式 */
</style>

通信失败问题：uni.webView.navigateTo 调用不稳定通常是因为 SDK 加载时序问题。确保在 UniAppJSBridgeReady 事件触发后再调用通信方法。优化监听逻辑：

if (window.uni) {
  // SDK 已加载，直接调用
  uni.webView.navigateTo({ url: '/pages/index/index' });
} else {
  // 等待事件触发
  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.webView.navigateTo({ url: '/pages/index/index' });
  });
}
回到顶部