鸿蒙ArkTS页面怎样与H5页面交互？

农民 · 2025-3-7 05:47:05

先看效果

功能先容

点击Click Me按钮可以接收展示鸿蒙通报给html的内容
点击霓虹灯按钮可以同步更新底部鸿蒙页面的按钮内容“打开”或“关闭”
点击底部鸿蒙页面的按钮，可以同步修改html的霓虹灯按钮状态

前言

在开辟App时，我们经常会遇到使用webView加载H5页面的场景，这样做的好处就不多加赘述了，那么鸿蒙App怎样加载H5页面呢？又怎么与H5页面进行通讯呢？，废话少说，直接上代码。
通讯功能先容

App可以通过runJavaScript()方法调用html页面的JavaScript相关函数。在下面的示例中，点击App的“runJavaScript”按钮时，来触发html页面的change()方法更新霓虹灯按钮状态。
html通过鸿蒙的test方法，获取鸿蒙通报过来的数据。通过出发changeBtnText同步更新鸿蒙按钮的内容。
html文件目录：harmonyApp\entry\src\main\resources\rawfile
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>霓虹灯按钮拨动特效</title>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--off-hue: 3;
--on-hue1: 123;
--on-hue2: 168;
--fg: hsl(var(--hue), 10%, 90%);
--primary: hsl(var(--hue), 90%, 50%);
--trans-dur: 0.6s;
--trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
font-size: calc(40px + (60 - 40) * (100vw - 320px) / (2560 - 320));
}
body,
input {
font: 1em/1.5 sans-serif;
}
body {
background-image: linear-gradient(45deg, hsl(var(--hue), 10%, 20%), hsl(var(--hue), 10%, 10%));
color: var(--fg);
display: flex;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
}
.common{
height: 6em;
width: 5em;
}
.switch,
.switch__input {
-webkit-tap-highlight-color: #0000;
}
.switch {
display: block;
margin: auto;
position: relative;
width: 5em;
height: 3em;
}
.switch__base-outer,
.switch__base-inner {
display: block;
position: absolute;
}
.switch__base-outer {
border-radius: 1.25em;
box-shadow: -0.125em -0.125em 0.25em hsl(var(--hue), 10%, 30%), 0.125em 0.125em 0.125em hsl(var(--hue), 10%, 30%) inset, 0.125em 0.125em 0.25em hsl(0, 0%, 0%), -0.125em -0.125em 0.125em hsl(var(--hue), 10%, 5%) inset;
top: 0.125em;
left: 0.125em;
width: 4.75em;
height: 2.75em;
}
.switch__base-inner {
border-radius: 1.125em;
box-shadow: -0.25em -0.25em 0.25em hsl(var(--hue), 10%, 30%) inset, 0.0625em 0.0625em 0.125em hsla(var(--hue), 10%, 30%), 0.125em 0.25em 0.25em hsl(var(--hue), 10%, 5%) inset, -0.0625em -0.0625em 0.125em hsla(var(--hue), 10%, 5%);
top: 0.375em;
left: 0.375em;
width: 4.25em;
height: 2.25em;
}
.switch__base-neon {
display: block;
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.switch__base-neon path {
stroke-dasharray: 0 104.26 0;
transition: stroke-dasharray var(--trans-dur) var(--trans-timing);
}
.switch__input {
outline: transparent;
position: relative;
width: 100%;
height: 100%;
-webkit-appearance: none;
appearance: none;
}
.switch__input:before {
border-radius: 0.125em;
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 50%, 0);
content: "";
display: block;
position: absolute;
inset: -0.125em;
transition: box-shadow 0.15s linear;
}
.switch__input:focus-visible:before {
box-shadow: 0 0 0 0.125em var(--primary);
}
.switch__knob,
.switch__knob-container {
border-radius: 1em;
display: block;
position: absolute;
}
.switch__knob {
background-color: hsl(var(--hue), 10%, 15%);
background-image: radial-gradient(88% 88% at 50% 50%, hsl(var(--hue), 10%, 20%) 47%, hsla(var(--hue), 10%, 20%, 0) 50%), radial-gradient(88% 88% at 47% 47%, hsl(var(--hue), 10%, 85%) 45%, hsla(var(--hue), 10%, 85%, 0) 50%), radial-gradient(65% 70% at 40% 60%, hsl(var(--hue), 10%, 20%) 46%, hsla(var(--hue), 10%, 20%, 0) 50%);
box-shadow: -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 15%) inset, -0.125em -0.125em 0.0625em hsl(var(--hue), 10%, 5%) inset, 0.75em 0.25em 0.125em hsla(0, 0%, 0%, 0.8);
width: 2em;
height: 2em;
transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__knob-container {
overflow: hidden;
top: 0.5em;
left: 0.5em;
width: 4em;
height: 2em;
}
.switch__knob-neon {
display: block;
width: 2em;
height: auto;
}
.switch__knob-neon circle {
opacity: 0;
stroke-dasharray: 0 90.32 0 54.19;
transition: opacity var(--trans-dur) steps(1, end), stroke-dasharray var(--trans-dur) var(--trans-timing);
}
.switch__knob-shadow {
border-radius: 50%;
box-shadow: 0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.9);
display: block;
position: absolute;
top: 0.5em;
left: 0.5em;
width: 2em;
height: 2em;
transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__led {
background-color: hsl(var(--off-hue), 90%, 70%);
border-radius: 50%;
box-shadow: 0 -0.0625em 0.0625em hsl(var(--off-hue), 90%, 40%) inset, 0 0 0.125em hsla(var(--off-hue), 90%, 70%, 0.3), 0 0 0.125em hsla(var(--off-hue), 90%, 70%, 0.3), 0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.5);
display: block;
position: absolute;
top: 0;
left: 0;
width: 0.25em;
height: 0.25em;
transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur) var(--trans-timing);
}
.switch__text {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
.switch__input:checked~.switch__led {
background-color: hsl(var(--on-hue1), 90%, 70%);
box-shadow: 0 -0.0625em 0.0625em hsl(var(--on-hue1), 90%, 40%) inset, 0 -0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 0.3), 0 0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 0.3), 0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.5);
}
.switch__input:checked~.switch__base-neon path {
stroke-dasharray: 52.13 0 52.13;
}
.switch__input:checked~.switch__knob-shadow,
.switch__input:checked~.switch__knob-container .switch__knob {
transform: translateX(100%);
}
.switch__input:checked~.switch__knob-container .switch__knob-neon circle {
opacity: 1;
stroke-dasharray: 45.16 0 45.16 54.19;
transition-timing-function: steps(1, start), var(--trans-timing);
}
.btn-box{
/* width: 2.5em; */
position: absolute;
top: 0.1em;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn-box .btn {
width: 10em;
background-color: rgb(32, 93, 224);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.3em;
margin: 4px 2px;
cursor: pointer;
}
.btn-box #demo {
font-size: 0.3em;
}
</style>
</head>
<body>
<div class="btn-box">
<button class="btn" type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
</div>
<label class="switch">
<input id="switch" class="switch__input" type="checkbox" role="switch">
<span class="switch__base-outer"></span>
<span class="switch__base-inner"></span>
<svg class="switch__base-neon" viewBox="0 0 40 24" width="40px" height="24px">
<defs>
<filter id="switch-glow">
<feGaussianBlur result="coloredBlur" stddeviation="1"></feGaussianBlur>
<feMerge>
<feMergeNode in="coloredBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient id="switch-gradient1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="hsl(var(--on-hue1),90%,70%)" />
<stop offset="100%" stop-color="hsl(var(--on-hue2),90%,70%)" />
</linearGradient>
<linearGradient id="switch-gradient2" x1="0.7" y1="0" x2="0.3" y2="1">
<stop offset="25%" stop-color="hsla(var(--on-hue1),90%,70%,0)" />
<stop offset="50%" stop-color="hsla(var(--on-hue1),90%,70%,0.3)" />
<stop offset="100%" stop-color="hsla(var(--on-hue2),90%,70%,0.3)" />
</linearGradient>
</defs>
<path fill="none" filter="url(#switch-glow)" stroke="url(#switch-gradient1)" stroke-width="1"
stroke-dasharray="0 104.26 0" stroke-dashoffset="0.01" stroke-linecap="round"
d="m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z" />
</svg>
<span class="switch__knob-shadow"></span>
<span class="switch__knob-container">
<span class="switch__knob">
<svg class="switch__knob-neon" viewBox="0 0 48 48" width="48px" height="48px">
<circle fill="none" stroke="url(#switch-gradient2)" stroke-dasharray="0 90.32 0 54.19"
stroke-linecap="round" stroke-width="1" r="23" cx="24" cy="24"
transform="rotate(-112.5,24,24)" />
</svg>
</span>
</span>
<span class="switch__led"></span>
<span class="switch__text">Power</span>
</label>
</body>
<script>
let switchDom = document.getElementById("switch");
function callArkTS() {
let str = window.harmony.test();
document.getElementById("demo").innerHTML = '鸿蒙传递过来的参数: '+str;
}
switchDom.addEventListener("change", function (e) {
if(e.target.checked){
window.harmony.changeBtnText('关闭');
}else{
window.harmony.changeBtnText('打开');
}
});
function change() {
switchDom.checked = !switchDom.checked;
}
</script>
</html>

复制代码

鸿蒙App代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';
class WebViewModel {
btnText: string = '打开';
constructor() {
}
test(): string {
return 'ArkTS Hello World!';
}
// 修改按钮文本
changeBtnText(value:string){
this.btnText = value;
}
}
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
// 声明需要注册的对象
@State vm: WebViewModel = new WebViewModel();
build() {
Stack() {
Column() {
// 页面内容
Scroll(){
Column(){
// web组件加载本地index.html页面
Web({ src: $rawfile('index.html'), controller: this.webviewController})
.domStorageAccess(true)
.javaScriptAccess(true)
.onProgressChange((event)=>{
// 自行编写加载状态
})
// 将对象注入到web端
.javaScriptProxy({
object: this.vm,
name: "harmony",
methodList: ["test",'changeBtnText'],
controller: this.webviewController
})
}.padding(16)
}
.edgeEffect(EdgeEffect.Fade)
.width('100%')
.layoutWeight(1)
.align(Alignment.TopStart)
Button(this.vm.btnText)
.width('80%')
.borderRadius(10)
.margin({bottom:px2vp(Number(AppStorage.get('safeAreaTopHeight'))) + ''})
.onClick(() => {
if(this.vm.btnText === '打开'){
this.vm.btnText = '关闭';
}else if(this.vm.btnText === '关闭'){
this.vm.btnText = '打开';
}
this.webviewController.runJavaScript('change()');
})
}
.height('100%')
.backgroundColor('#F5F5F5')
}
}
}

复制代码

Web组件使用题目

鸿蒙的Web组件加载H5页面会出现很多不测的题目，我这里发起把Web组件的以下两个选项开启，避免题目的产生。

domStorageAccess(true)开启文档对象模型存储接口（DOM Storage API）权限
javaScriptAccess(true)答应执行JavaScript脚本

具体代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';
class WebViewModel {
constructor() {
}
test(): string {
return 'ArkTS Hello World!';
}
}
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
// 声明需要注册的对象
@State vm: WebViewModel = new WebViewModel();
build() {
Column() {
// web组件加载本地index.html页面
Web({ src: $rawfile('index.html'), controller: this.webviewController})
.domStorageAccess(true)
.javaScriptAccess(true)
// 将对象注入到web端
.javaScriptProxy({
object: this.vm,
name: "harmony",
methodList: ["test"],
controller: this.webviewController
})
}
}
}

复制代码

其他选项可参考鸿蒙Web官网
Harmony OS NEXT版本（接口及解决方案兼容API12版本或以上版本)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

鸿蒙ArkTS页面怎样与H5页面交互？

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云