在应用开发过程中，时常需要加载h5页面，那么如何实现原生与h5之间的相互调用呢？


如何在鸿蒙应用中加载一个Web页面

一、加载网络地址页面


// 1. 导入webview

import web_webview from '@ohos.web.webview'
// 2. 创建WebviewController

controller: web_webview.WebviewController = new web_webview.WebviewController();
// 3. 创建Web组件

Web({ src: "http://www.example.com/", controller: this.controller })


二、加载本地H5页面

在项目的 rowfile 中存放 html 代码

​

在 Web组件 中使用 $rawfile 加载本地html

Web({ src: $rawfile('webTo.html'), controller: this.controller })


实现Web组件H5层与应用层进行相互通讯

鸿蒙应用向H5页面发送数据

在创建的WebviewController中使用 runJavaScript() 方法可直接触发 H5 页面中的方法。

鸿蒙侧
​​

H5侧
​h5侧提前编写好对应方法

案例效果

 

H5页面向鸿蒙应用发送数据

在原生代码侧使用 javaScriptProxy 方法向 h5 的 window 对象中注册方法，此处我注册的对象名叫 JSBridge ，在该对象中写入了一个 nativeMethod 方法，h5 中直接调用 nativeMethod() 方法即可向原生发送消息。

H5侧 

代码：

<!--
 * @Author: liuwei
 * @Date: 2023-12-18 15:14:22
 * @LastEditors: liuwei
 * @LastEditTime: 2023-12-18 15:23:40
 * @Description:
-->
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script src="./icsshosdk.js"></script>
 
    <style>
        body {
            padding-top: 80px;
        }
 
        .title {
            background: #eee;
            line-height: 60px;
            text-align: center;
            margin-bottom: 50px;
        }
 
        .button {
            cursor: pointer;
            line-height: 45px;
            color: #fff;
            border-radius: 10px;
            left: 20%;
            width: calc(100% - 30px);
            text-align: center;
            background: #616bff;
            margin: 15px;
        }
 
        .button:active {
            background: #525dff;
        }
    </style>
 
    <script>
        document.addEventListener('webActiveReceive', (e) => {
            console.log("luvi > " + JSON.stringify(e.detail));
            let { key, data } = JSON.parse(e.detail)
            switch (key) {
                case "changeBgColor":
                    document.getElementById("idt").style = "background: #ffecea;color: #ff7361"
                    break;
                case "changeBtColor":
                    document.querySelectorAll(".button").forEach(el => {
                        el.style = `background: ${data}`
                    })
                    break;
                default:
                    break;
            }
        })
    </script>
 
    <script>
        function openNativePage() {
            let params = {
                name: "LoginPage",
                success: function (res) {
                    console.log("luviWeb > openNativePage success. " + res)
                },
                fail: function () {
                    console.log("luviWeb > openNativePage fail.")
                }
            }
            window.JSBridge.nativeMethod("openNativePage", params)
        }
 
        function getCity() {
            let params = {
                success: function (res) {
                    document.getElementById("cityName").innerText = `当前城市：${res}`
                },
                fail: function () {
                    console.log("luviWeb > getCity fail.")
                }
            }
            window.JSBridge.nativeMethod("getCity", params)
        }
    </script>
</head>
 
<body>
    <div style="width: 100%;">
        <p class="title" id="idt">JSBridge演示</p>
        <div>
            <p class="button" onclick="openNativePage()">跳转原生页面</p>
        </div>
        <div style="margin-top: 30px;">
            <p style="margin-left: 15px;" id="cityName">当前城市：</p>
            <p class="button" onclick="getCity()">获取当前定位</p>
        </div>
    </div>
</body>
 
</html>

 

鸿蒙侧：

使用javaScriptProxy代码注入

案例效果

Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

#跟着编程老司机李游Leo学鸿蒙# HarmonyOS开发中Webview字体大小设置

前言 在HarmonyOS开发中，Webview组件是一个强大的工具，允许我们在应用中嵌入和显示网页内容。然而，有时我们可能需要根据用户需求或设计要求调整Webview中网页的字体大小。本文将详细介绍如何在HarmonyOS开发中设置Webview的字体大小，确保网页内容在不同设备上显示得更加清晰和舒适。随着移动互联网的发展，越来越多的应用需要嵌入网页内容以提供丰富的交互体验。HarmonyOS的

avatar HarmonyOS开发者社区

#跟着若城学鸿蒙# 鸿蒙开发入门：在DevEco Studio中配置项目资源实现ArkTS功能界面全流程指南

在DevEco Studio中配置项目资源实现ArkTS功能界面全流程指南 一、项目创建与基础配置 （一）新建HarmonyOS项目 启动DevEco Studio 若未打开任何工程，在欢迎页点击 Create Project；若已打开工程，通过菜单栏选择 File > New > Create Project。 选择 HarmonyOS Application 或 Atomic Se

avatar HarmonyOS开发者社区

#跟着若城学鸿蒙# 鸿蒙开发进阶：深入解析ArkTS语言特性与开发范式

鸿蒙开发进阶：深入解析ArkTS语言特性与开发范式 一、前言 在鸿蒙生态开发体系中，DevEco Studio作为核心开发工具为开发者提供了高效的集成环境。而在掌握工具使用之后，深入理解鸿蒙开发语言成为构建高质量应用的关键。本文将聚焦于鸿蒙系统的核心开发语言——ArkTS，全面解析其起源演进、声明式开发范式及状态管理机制，帮助开发者快速建立对ArkTS的系统性认知。 二、ArkTS语言的起源与技术

avatar HarmonyOS开发者社区