HarmonyOS 鸿蒙Next：如何从h5消息触发关闭web渲染并重新渲染登录UI

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

HarmonyOS 鸿蒙Next：如何从h5消息触发关闭web渲染并重新渲染登录UI

之前是用if else来渲染的，用户在app上点击登录后，修改bool变量，切换到web渲染，现在是期望从h5那边收到一个消息后，要把web的渲染关掉，重新渲染登录的ui

Harmonyos Next教程
2 回复
可以参考以下demo：

~~~

// xxx.ets

import web_webview from '@ohos.web.webview';

class WebObj {
constructor() {
}


clickEvent(event: string): <span class="hljs-keyword">void</span> {
    console.log(event);
}

}


@Entry
@Component
struct Index {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State webTestObj: WebObj = new WebObj();


build() {
    Column() {
        Web({ src: $rawfile(<span class="hljs-string">'index.html'</span>), controller: <span class="hljs-keyword">this</span>.controller })
            .javaScriptAccess(<span class="hljs-literal">true</span>)
            .onControllerAttached(() =&gt; {
                <span class="hljs-keyword">this</span>.controller.registerJavaScriptProxy(<span class="hljs-keyword">this</span>.webTestObj, <span class="hljs-string">"objTestName"</span>, [<span class="hljs-string">"clickEvent"</span>]);
                <span class="hljs-keyword">this</span>.controller.refresh();
            });
    }
}

}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

~

~

<!-- index.html -->

<!DOCTYPE html>
<html>
<meta charset="“utf-8"”>
<body>
<button type="“button”" onclick="“htmlTest()”">Click Me!</button>
</body>
<script type="“text/javascript”">
function htmlTest() {
objTestName.clickEvent(‘点击了按钮’);
}
</script>
</html><button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

~

您可以通过传过来的数据进行判断，参考：

~

import web_webview from ‘@ohos.web.webview’;
interface IWebTestObj {
clickEvent: (event: string) => void
}
@Entry
@Component
struct Index {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State isWeb: boolean = true
@State webTestObj: IWebTestObj = { clickEvent: this.clickEvent.bind(this) };
clickEvent(event: string): void {
console.info(this.isWeb + ‘’, ‘isWeb’)
if(event == ‘点击了按钮’){
this.isWeb = false
}
}
build() {
Column() {
if(this.isWeb){
Web({ src: $rawfile(‘index.html’), controller: this.controller })
.javaScriptAccess(true)
.onControllerAttached(()=>{
this.controller.registerJavaScriptProxy(this.webTestObj, ““objTestName””, ["“clickEvent”"]);
this.controller.refresh();
})
}else {
Text(‘login’)
}
}
}
}

~

~

<!-- index.html -->

<!DOCTYPE html>
<html>
<meta charset="“utf-8"”>
<body>
<button type="“button”" onclick="“htmlTest()”">Click Me!</button>
</body>
<script type="“text/javascript”">
function htmlTest() {
objTestName.clickEvent(‘点击了按钮’);
}
</script>
</html>

~~~

更多关于HarmonyOS 鸿蒙Next：如何从h5消息触发关闭web渲染并重新渲染登录UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现从H5消息触发关闭Web渲染并重新渲染登录UI的功能，可以遵循以下步骤：

  1. H5消息触发：

    • 在H5页面中，通过JavaScript或其他前端技术监听特定事件或用户操作，当满足条件时，发送一个消息到鸿蒙应用侧。

  2. 鸿蒙应用侧接收消息：

    • 在鸿蒙应用中，使用createWebMessagePorts()接口创建消息端口，并在应用侧的消息端口上注册回调事件，以接收来自H5页面的消息。

  3. 处理消息并关闭Web渲染：

    • 当鸿蒙应用侧接收到来自H5页面的消息时，在回调事件中处理该消息。
    • 根据消息内容，执行关闭当前Web渲染的逻辑，例如销毁当前的Web组件实例。

  4. 重新渲染登录UI：

    • 在关闭Web渲染后，根据应用的需求，重新创建Web组件实例或加载新的页面，以显示登录UI。
    • 确保新的Web组件实例或页面能够正确渲染登录UI，并响应用户的操作。

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

回到顶部