uni-app APP打包后webView加载hybrid资源找不到

uni-app APP打包后webView加载hybrid资源找不到

开发环境 版本号 项目创建方式
Windows Windows 11 家庭中文版 23H2 HBuilderX
4.29
Android Android 12
迈冲工业平板 FP10G20 
# 操作步骤：
app使用webview加载hybrid中的uni h5

# 预期结果：
正常运行

# 实际结果：
webview中仅首页正常，切换页面报错

# bug描述：
app使用webview加载hybrid中的html，其中html也是uni的h5项目。

app运行，使用webView加载hybrid资源一切正常。
打包后加载正常，首页正常，切换页面后页面显示“连接服务器超时，点击屏幕重试”
控制台报错:
Faled to fetch dmamicaly imported modle. le/dataluser/0/com.xx.xx/files/apps/_UNI_XXX/static/html/assets/pages-stalstic-index.BufTgK.js

更多关于uni-app APP打包后webView加载hybrid资源找不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

webview 打开的是本地项目吗？如果是本地项目不能直接通过文件路径访问。需要使用内置服务器
可以参考一下《网赚游戏》中首页使用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
}
}
} 试试这种方式能否解决问题。

更多关于uni-app APP打包后webView加载hybrid资源找不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


Android App webview打开本地的uni web项目

回复 HEDA: 打开本地web项目。需要先在app启一个服务，官方解决方案。请参考上述的网赚游戏实现方式。也可以在插件市场搜索类似插件实现

在处理uni-app打包后的APP中webView加载hybrid资源找不到的问题时，通常是由于资源路径配置不正确或者资源打包方式不当导致的。以下是一个可能的解决方案，通过配置uni-app项目以及确保资源文件正确打包和引用。

1. 确保资源文件正确放置在项目中

首先，确保你的hybrid资源（如HTML、CSS、JS文件等）被正确地放置在uni-app项目的static文件夹内。static文件夹中的资源会在打包时被直接复制到输出目录，不会被webpack处理。

2. 配置uni-app的manifest.json

在manifest.json文件中，配置mp-weixin（或其他小程序平台）和小程序的router配置，确保资源路径正确。对于APP平台，主要关注app-plus部分，确保usingComponents（如果使用了小程序组件）和其他相关配置正确。

3. 使用正确的路径引用资源

在webView中加载资源时，使用相对路径或者从应用根目录开始的绝对路径。例如，如果你的资源放在static/hybrid/目录下，那么在webView中加载这些资源的URL应该是/hybrid/yourfile.html或者hybrid/yourfile.html（取决于你的webView配置是否以根目录为基准）。

4. 示例代码

假设你的资源文件结构如下：

uni-app-project/
├── static/
│   └── hybrid/
│       ├── index.html
│       ├── style.css
│       └── script.js
├── pages/
│   └── index/
│       └── index.vue
├── manifest.json
└── ...

在pages/index/index.vue中，你可以这样配置webView：

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

<script>
export default {
  data() {
    return {
      webViewUrl: '/hybrid/index.html' // 注意路径
    };
  }
};
</script>

5. 检查打包输出

确保在打包后的输出目录中（如dist/build/app-plus/），hybrid文件夹及其内容存在，并且路径与你在webView中引用的路径相匹配。

通过上述步骤，你应该能够解决uni-app打包后webView加载hybrid资源找不到的问题。如果问题仍然存在，请检查是否有路径拼写错误、资源文件是否被正确打包到输出目录，以及webView组件的配置是否正确。

回到顶部