uni-app webview中无法解析路径/hybrid/html/index.html#/game/entry/

uni-app webview中无法解析路径/hybrid/html/index.html#/game/entry/

产品分类

uniapp/App

开发环境信息

项目 信息
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.6.1 (23G93)
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 iOS
手机系统版本号 iOS 18
手机厂商 苹果
手机机型 iPhone 15
页面类型 nvue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

示例代码

<template>  
  <web-view  
    class="webview"  
    ref="webview"  
    fullscreen  
    src="webviewSrc"
  ></web-view>
</template>

<script>
import * as storage from '@/utils/storage.js'
import config from '@/utils/config.js'  

export default {
  data() {
    return {
      webviewSrc: `${config.gameHtmlRoot}/game/entry/?token=${storage.getToken() || ''}`
    }
  }
}
</script>

<style>
.webview {
  flex: 1;
}
</style>

操作步骤

按如上代码编写

预期结果

期望能正常访问

实际结果

无法打开页面

bug描述

将html放在hybrid/html目录下无法解析vue3 路由hash模式路径


更多关于uni-app webview中无法解析路径/hybrid/html/index.html#/game/entry/的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

开发阶段是否正常，提供一个线上的网址我测试，并提供 vue 和 HBuilderX 依赖版本

更多关于uni-app webview中无法解析路径/hybrid/html/index.html#/game/entry/的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不正常，hash应该是被解析成路径了，导致访问不到

回复 2***@qq.com: 提供一个线上的网址我测试，并提供 vue 和 HBuilderX 依赖版本

直接使用file://引入本地页面会出现跨域问题，需要在应用内开一个服务。可以参考一下《网赚游戏》中首页使用web-view的方式来解决跨域问题。 <web-view v-if="platform=='android'" :src="'/hybrid/html/plugins/h5/index.html'" class="webview" ref="iframe"></web-view>
<web-view v-if="platform=='ios'" :src="'http://localhost:13131/_www/hybrid/html/plugins/h5/index.html'" class="webview" ></web-view> iOS在manifest.json中开启miniserve,安卓不需要特殊配置 “capabilities” : {
“plists” : {
“DCloudConfig” : {
“miniServer” : true
}
}
} 试试这种方式能否解决问题。

不是跨域问题，是采用hash进行页面路由，hash无法被识别

在uni-app中使用webview组件加载本地或远程网页时，如果遇到路径解析问题，通常是因为路径设置不正确或者资源文件位置不正确。针对你提到的路径/hybrid/html/index.html#/game/entry/无法解析的问题，我们可以通过几种方式来确保路径正确，并在webview中正确加载页面。

首先，确保你的index.html文件确实位于项目的hybrid/html/目录下。然后，我们需要正确配置webview的src属性来指向这个文件。

1. 使用相对路径（假设webview组件在同一项目结构下）

如果webview组件和index.html在同一项目结构中，你可以尝试使用相对路径。但考虑到你的路径中包含哈希值（#），这通常用于单页应用（SPA）的路由，webview组件可能需要额外处理。

<template>
  <view>
    <web-view :src="webUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webUrl: 'hybrid/html/index.html#/game/entry/'
    };
  }
}
</script>

注意：在某些平台上，#符号可能导致路径解析问题，可以尝试使用URL编码%23替代#，但通常uni-app应该能够正确处理这种情况。

2. 使用绝对路径（基于项目根目录）

如果相对路径不起作用，尝试使用基于项目根目录的绝对路径。这通常涉及到你项目的打包配置。

<template>
  <view>
    <web-view :src="webUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    // 假设你的项目根目录下有'hybrid/html/'文件夹
    return {
      webUrl: '/static/hybrid/html/index.html#/game/entry/' // 注意这里的路径可能需要根据你的项目打包配置调整
    };
  }
}
</script>

3. 确认资源文件已正确打包

确保在构建项目时，hybrid/html/目录及其内容被正确打包到最终的应用包中。这通常在你的构建配置文件中设置，如vue.config.js或manifest.json（uni-app特有）。

4. 调试和错误处理

  • 使用开发者工具的控制台查看是否有错误信息。
  • 确保webview组件没有其他属性或样式干扰其加载。
  • 如果问题依旧存在，考虑在index.html中加入一些日志输出，帮助定位问题。

通过上述方法，你应该能够解决uni-app中webview组件加载本地HTML文件时遇到的路径解析问题。

回到顶部