HarmonyOS 鸿蒙Next webview组件加载vue项目空白,其他非h5页面可正常加载

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next webview组件加载vue项目空白,其他非h5页面可正常加载

webview组件加载vue项目空白,其他非vue的h5页面可正常加载

2 回复

可参考如下demo,是可以显示的,可能是你这边没有设置domStorageAccess(true)的缘故

该属性可参考链接:‘https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-web-V13#domstorageaccess

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页面能正常加载,可能是由于以下几个原因:

  1. Vue项目构建配置:确认Vue项目的构建输出格式(如打包后的文件结构、入口文件等)是否符合HarmonyOS webview的加载要求。特别是检查publicPath配置,确保资源路径正确。

  2. 资源加载问题:Vue项目依赖的静态资源(如JS、CSS、图片等)可能未能正确加载。检查webview组件的加载URL是否正确指向了包含所有必需资源的目录。

  3. 跨域问题:如果Vue项目部署在不同的域或子域下,可能遇到跨域资源共享(CORS)问题。确认服务器端的CORS设置允许HarmonyOS webview的访问。

  4. Webview组件设置:检查webview组件的配置,如是否启用了JavaScript执行、是否允许加载外部资源等。确保这些设置不会阻止Vue项目的正常执行。

  5. 版本兼容性:确认HarmonyOS webview组件的版本是否支持当前Vue项目的技术栈和特性。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部