Flutter OHOS webview拉起支付白屏场景案例
发布时间:2026/9/5 2:05:54 作者:尧图编辑部 阅读量:1,286

一、deeplink拉起应用或者继续进行加载报错ERR_UNKNOWN_URL_SCHEME的解决方案通过web打开某些网页打开后出现白屏。通过如下的inspect方式对链接进行调试发现链接的scheme不是http或者https。inspect使用方法https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-debugging-with-devtools加载后发现协议变成了bdnetdisk而不是http或者https。这种就是自定义scheme而鸿蒙默认只支持http/https/file这3种协议自定义协议需要自行配置才能正常加载实现。如下提供支持自定义scheme的demo代码写法。增加自定义scheme后打开web就可以加载自定义的scheme并正常显示出来。import{ webview }fromkit.ArkWeb;EntryComponentstructIndex{Stateurl:stringhttps://lsj01.top/;privatewebController:WebviewControllernewwebview.WebviewController()schemeHandler: webview.WebSchemeHandlernewwebview.WebSchemeHandler();// 需要声明schemeHandler,用于配置自定义schemeaboutToAppear():void{ webview.WebviewController.setWebDebuggingAccess(true) }build() {Column() {Web( {src:https://pan.baidu.com/s/1t1b1sQYoic1qj3WD0uezgw?pwdkick#list/path%2F,controller:this.webController, } )// 在onControllerAttached中对scheme设置所需要支持加载的协议如bdnetdisk,bilibili等.onControllerAttached((){this.schemeHandler.onRequestStart((request: webview.WebSchemeHandlerRequest, resourceHandler: webview.WebResourceHandler) {returntrue; })this.webController.setWebSchemeHandler(bdnetdisk,this.schemeHandler) } ) .fileAccess(true) .domStorageAccess(true) } .height(100%) .width(100%) } }自定义scheme通过拦截的方式拉起对应的应用。import{ webview }fromkit.ArkWeb;import{BusinessError}fromkit.BasicServicesKit;import{ common,OpenLinkOptions}fromkit.AbilityKit;EntryComponentstructWebComponent{controller: webview.WebviewControllernewwebview.WebviewController();controllerT:TextInputControllernewTextInputController();privatecontext this.getUIContext().getHostContext()ascommon.UIAbilityContext;build() {Column() {// Web({ src: $rawfile(1.html), controller: this.controller }) //使用这个会打开1.html这个链接然后点击这里的URL,就会跳转到支付宝Web({src:https://u.alipay.cn/_6hzg1sryluB,controller:this.controller})//使用这个打开demo后会直接跳转到支付宝.geolocationAccess(false) .domStorageAccess(true) .databaseAccess(true) .fileAccess(true) .imageAccess(true) .javaScriptAccess(true) .onlineImageAccess(true) .allowWindowOpenMethod(true) .enableWebAVSession(false) .onLoadIntercept((event) {consturl:string event.data.getRequestUrl();console.warn(url url)if(!url.startsWith(http)!url.startsWith(https)!url.startsWith(resource)) {constlink:string url;console.warn(link link)constopenLinkOptions:OpenLinkOptions {appLinkingOnly:false,parameters: {name:test} };this.context.openLink(link, openLinkOptions).then(() {console.info(open link success.); }).catch((err: BusinessError) {console.error(open link failed. Code is ${err.code}, message is ${err.message}); }) }returnfalse; }) } } }html!-- call.html --!DOCTYPEhtmlhtmlbodydivbrahrefhttps://u.alipay.cn/_6hzg1sryluB这里/abr/div/body/html