HarmonyOS 鸿蒙Next ArkWeb组件加载网页,无法回调JS函数
HarmonyOS 鸿蒙Next ArkWeb组件加载网页,无法回调JS函数 使用ArkWeb加载人机验证网页,第一次进入可以触发回调,后续重新进入,无法触发
我这边试了一下发现是正常能触发的,你这边再确认一下
//index.html 文件
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
button {
width:300px;
height:100px;
background-color: #008CBA;
padding: 15px 30px;
text-align: center;
text-decoration: none;
font-size: 20px;
color: white;
}
div {
padding: 15px 30px;
text-align: center;
width:100%;
}
</style>
</head>
<body>
<div>
<button type="button" onclick="start()">测试</button>
</div>
<p id="demo"></p>
<script>
function start() {
HarmonyOS_native.captchaResult('');
console.info('start ok:');
}
</script>
</body>
</html>
------------------------------------------------------
//webPage.ets 文件
import { router } from '@kit.ArkUI'
import webview from '@ohos.web.webview';
import { WebDataClass, WebJSBridgeClass, webJSBridgeMethods } from './WebJSBridgeManager';
@Entry
@Component
struct WebPage {
controller: webview.WebviewController = new webview.WebviewController();
title: string = (router.getParams() as Record<string, string>)['title']
url: string = (router.getParams() as Record<string, string>)['url']
@State webDataObject: WebDataClass = new WebDataClass('', false)
@State webJSBridgeClass: WebJSBridgeClass = new WebJSBridgeClass(this.controller, this.webDataObject);
@State mode: MixedMode = MixedMode.All;
build() {
Column() {
Text(this.title)
.width('100%')
.height(50)
.textAlign(TextAlign.Center)
Web({ src: $rawfile("index.html"), controller: this.controller })
.domStorageAccess(true)
.mixedMode(this.mode)
.cacheMode(CacheMode.Online)
.onProgressChange((event) => {
if (event) {
}
})
.onTitleReceive((event) => {
if (event) {
this.webDataObject.title = event.title
}
})
.onRenderExited((event) => {
if (event) {
console.error('reason:' + event.renderExitReason)
}
})
.javaScriptProxy({
object: this.webJSBridgeClass,
name: "HarmonyOS_native",
methodList: webJSBridgeMethods,
controller: this.controller
})
.layoutWeight(1)
.width('100%')
}
}
aboutToAppear(): void {
console.error('url = '+ this.url)
webview.once('webInited', () => {
let ua = this.controller.getUserAgent() + 'mxsa_mxbc';
this.controller.setCustomUserAgent(ua);
})
}
}
------------------------------------------------------
//WebJSBridgeManager.ets 文件
import web_webview from '@ohos.web.webview';
import pasteboard from '@ohos.pasteboard';
import { router } from '@kit.ArkUI';
import { emitter } from '@kit.BasicServicesKit';
import { HashMap } from '@kit.ArkTS';
interface JsResponse {
code: number;
msg: String;
data: object | undefined
}
export class captchaVerifyParam {
code: string = ''
}
export class BaseEventData implements emitter.EventData {
data: captchaVerifyParam = new captchaVerifyParam()
}
/*
由于struct和class不同,不建议把this作为参数传递到struct外部使用,避免引起实例引用无法释放的情况,导致内存泄露。
建议将状态变量对象传递到struct外面使用,通过修改对象的属性,来触发UI刷新。
* */
class WebDataClass {
title: string = ''
isHideTitleBar: boolean = false
constructor(title: string, isHideTitleBar: boolean) {
this.title = title
this.isHideTitleBar = isHideTitleBar
}
}
interface GeneratedObjectLiteralInterface_1 {
code: number;
msg: string;
}
class WebJSBridgeClass {
private webviewController: web_webview.WebviewController;
private webDataObject?: WebDataClass;
constructor(webviewController: web_webview.WebviewController,
webDataObject: WebDataClass) {
this.webviewController = webviewController;
this.webDataObject = webDataObject;
}
captchaResult(data: string) {
router.back()
}
//执行JS函数
private evaluateJavaScript(params: string) {
this.webviewController.runJavaScript(`HarmonyOSCallBack(${params})`);
}
}
let webJSBridgeMethods: Array<string> = [
'captchaResult'
]
export {
WebJSBridgeClass, webJSBridgeMethods, WebDataClass
}
更多关于HarmonyOS 鸿蒙Next ArkWeb组件加载网页,无法回调JS函数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
针对“HarmonyOS 鸿蒙Next ArkWeb组件加载网页,无法回调JS函数”的问题,可能的原因及解决方案如下:
在鸿蒙系统中,ArkWeb组件用于加载和渲染网页内容。若遇到无法回调JS函数的情况,首先需确认以下几点:
-
JS接口暴露:确保在网页的JS代码中,需要被调用的函数是全局可访问的,或者已经通过适当的方式暴露给了ArkWeb组件。
-
调用权限:检查ArkWeb组件是否有足够的权限去调用网页中的JS函数。在某些安全策略下,可能需要特定的权限设置。
-
调用方式:验证ArkWeb组件调用JS函数的方式是否正确。鸿蒙系统可能提供了特定的API或方法来调用JS,需按照官方文档正确使用。
-
错误处理:检查是否有任何错误被抛出,这些错误可能阻止JS函数的回调。查看日志或使用调试工具可以帮助定位问题。
-
版本兼容性:确保鸿蒙系统版本与ArkWeb组件的版本兼容,有时版本更新可能引入或修复与JS交互相关的问题。
如果以上步骤均无法解决问题,可能是由于鸿蒙系统或ArkWeb组件的特定bug导致。此时,建议联系鸿蒙系统的官方客服以获取进一步的支持。
如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html,