HarmonyOS 鸿蒙Next webview组件加载vue项目空白,其他非h5页面可正常加载
HarmonyOS 鸿蒙Next webview组件加载vue项目空白,其他非h5页面可正常加载
可参考如下demo,是可以显示的,可能是你这边没有设置domStorageAccess(true)的缘故
import { webview } from '[@kit](/user/kit).ArkWeb';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Privacy {
//配置Web开启调试模式
webController: webview.WebviewController = new webview.WebviewController();
[@State](/user/State) progress: number = 0
[@State](/user/State) hideProgress: boolean = false
build() {
Column() {
Progress({ value: this.progress, total: 100 })
.color(Color.Red)
.backgroundColor(Color.White)
.visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
// 加载线上PDF
Web({
src: 'https://dev.ebohailife.net/mall/mallMy',
controller: this.webController
})
.domStorageAccess(true)
.onProgressChange((event) => {
console.log("event this.progress:" + JSON.stringify(event))
if (event != undefined) {
this.progress = event.newProgress
if (this.progress == 100) {
this.hideProgress = true
}
}
})
}
.width('100%')
.height('100%')
}
}
更多关于HarmonyOS 鸿蒙Next webview组件加载vue项目空白,其他非h5页面可正常加载的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS 鸿蒙Next webview组件加载Vue项目时出现空白页面,而其他非H5页面能正常加载,可能是由于以下几个原因:
-
Vue项目构建配置:确认Vue项目的构建输出格式(如打包后的文件结构、入口文件等)是否符合HarmonyOS webview的加载要求。特别是检查
publicPath
配置,确保资源路径正确。 -
资源加载问题:Vue项目依赖的静态资源(如JS、CSS、图片等)可能未能正确加载。检查webview组件的加载URL是否正确指向了包含所有必需资源的目录。
-
跨域问题:如果Vue项目部署在不同的域或子域下,可能遇到跨域资源共享(CORS)问题。确认服务器端的CORS设置允许HarmonyOS webview的访问。
-
Webview组件设置:检查webview组件的配置,如是否启用了JavaScript执行、是否允许加载外部资源等。确保这些设置不会阻止Vue项目的正常执行。
-
版本兼容性:确认HarmonyOS webview组件的版本是否支持当前Vue项目的技术栈和特性。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html