qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 软件与程序人生 › 移动端开发 › 鸿蒙 › 【HarmonyOS NEXT】Web 组件的底子用法以及 H5 侧与原生 ...

【HarmonyOS NEXT】Web 组件的底子用法以及 H5 侧与原生侧的双向数据通讯

[复制链接]
发表于 2025-11-18 16:32:20 | 显示全部楼层 |阅读模式
 关键词：鸿蒙、ArkTs、Web组件、通讯、数据
官方文档Web组件用法先容：文档中心

   Web 组件加载沙箱中页面可参考我的另一篇文章：【HarmonyOS NEXT】 怎样将rawfile中文件复制到沙箱中_鸿蒙rawfile 复制到沙箱-CSDN博客
  
目次
怎样在鸿蒙应用中加载一个Web页面
一、加载网络所在页面
​编辑​
二、加载本地H5页面
实现Web组件H5层与应用层举行相互通讯
一、鸿蒙应用向H5页面发送数据
鸿蒙侧
H5侧
案例结果
二、H5页面向鸿蒙应用发送数据（附代码）
H5侧 （附代码）
鸿蒙侧（附代码）
案例结果
其他方案
创建消息端口来实现两端的通讯
通过h5公共变乱的方式实现


怎样在鸿蒙应用中加载一个Web页面

一、加载网络所在页面

1. 导入webview
  
  1. import web_webview from '@ohos.web.webview'
复制代码
2. 创建WebviewController
  
  1. controller: web_webview.WebviewController = new web_webview.WebviewController();
复制代码
3. 创建Web组件
  
  1. Web({ src: "http://www.example.com/", controller: this.controller })
复制代码
4. 在module.json5中添加网络权限
  
  1. "requestPermissions": [
  2.     {
  3.        "name": "ohos.permission.INTERNET"
  4.     }
  5. ]
复制代码
案例结果： 
​


二、加载本地H5页面

1. 在项目的 rowfile 中存放 html 代码
​
2. 在 Web组件 中使用 $rawfile 加载本地html
  
  1. Web({ src: $rawfile('webTo.html'), controller: this.controller })
复制代码

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

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

在创建的WebviewController中使用 runJavaScript() 方法可直打仗发 H5 页面中的方法
鸿蒙侧

​
同样也可以使用模板字符串拼接参数举行传参
​
H5侧

​
案例结果

​

二、H5页面向鸿蒙应用发送数据（附代码）

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


H5侧 （附代码）

h5侧直接调用 window 对象下的 JSBridge.nativeMethod 方法，第一个参数对应原生侧对应的 channelName 方法名，第二个参数为 h5 自界说参数，可带入回调方法，供原生侧完成调用的回调结果。

附代码：
  1. <!--
  2. * @Author: liuwei
  3. * @Date: 2023-12-18 15:14:22
  4. * @LastEditors: liuwei
  5. * @LastEditTime: 2023-12-18 15:23:40
  6. * @Description:
  7. -->
  8. <!DOCTYPE html>
  9. <html lang="en">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <title>Document</title>
  16.     <script src="./icsshosdk.js"></script>
  18.     <style>
  19.         body {
  20.             padding-top: 80px;
  21.         }
  23.         .title {
  24.             background: #eee;
  25.             line-height: 60px;
  26.             text-align: center;
  27.             margin-bottom: 50px;
  28.         }
  30.         .button {
  31.             cursor: pointer;
  32.             line-height: 45px;
  33.             color: #fff;
  34.             border-radius: 10px;
  35.             left: 20%;
  36.             width: calc(100% - 30px);
  37.             text-align: center;
  38.             background: #616bff;
  39.             margin: 15px;
  40.         }
  42.         .button:active {
  43.             background: #525dff;
  44.         }
  45.     </style>
  47.     <script>
  48.         document.addEventListener('webActiveReceive', (e) => {
  49.             console.log("luvi > " + JSON.stringify(e.detail));
  50.             let { key, data } = JSON.parse(e.detail)
  51.             switch (key) {
  52.                 case "changeBgColor":
  53.                     document.getElementById("idt").style = "background: #ffecea;color: #ff7361"
  54.                     break;
  55.                 case "changeBtColor":
  56.                     document.querySelectorAll(".button").forEach(el => {
  57.                         el.style = `background: ${data}`
  58.                     })
  59.                     break;
  60.                 default:
  61.                     break;
  62.             }
  63.         })
  64.     </script>
  66.     <script>
  67.         function openNativePage() {
  68.             let params = {
  69.                 name: "LoginPage",
  70.                 success: function (res) {
  71.                     console.log("luviWeb > openNativePage success. " + res)
  72.                 },
  73.                 fail: function () {
  74.                     console.log("luviWeb > openNativePage fail.")
  75.                 }
  76.             }
  77.             window.JSBridge.nativeMethod("openNativePage", params)
  78.         }
  80.         function getCity() {
  81.             let params = {
  82.                 success: function (res) {
  83.                     document.getElementById("cityName").innerText = `当前城市：${res}`
  84.                 },
  85.                 fail: function () {
  86.                     console.log("luviWeb > getCity fail.")
  87.                 }
  88.             }
  89.             window.JSBridge.nativeMethod("getCity", params)
  90.         }
  91.     </script>
  92. </head>
  94. <body>
  95.     <div style="width: 100%;">
  96.         <p class="title" id="idt">JSBridge演示</p>
  97.         <div>
  98.             <p class="button" onclick="openNativePage()">跳转原生页面</p>
  99.         </div>
  100.         <div style="margin-top: 30px;">
  101.             <p style="margin-left: 15px;" id="cityName">当前城市：</p>
  102.             <p class="button" onclick="getCity()">获取当前定位</p>
  103.         </div>
  104.     </div>
  105. </body>
  107. </html>
复制代码

鸿蒙侧（附代码）


附代码：
  1. import { webview } from '@kit.ArkWeb';
  3. export interface IParamsCallback {
  4.   name: string
  5.   key: string
  6.   success: (data?: string) => void
  7.   fail: (data?: string) => void
  8. }
  10. @Entry
  11. @Component
  12. export struct MyWeb {
  13.   webController: WebviewController = new webview.WebviewController()
  14.   webUrl: string | Resource = "";
  16.   build() {
  17.     Column() {
  18.       Web({ src: this.webUrl, controller: this.webController })
  19.         .javaScriptProxy({
  20.           object: {
  21.             nativeMethod: (channelName: string, paramsCallback: IParamsCallback) => {
  22.               if (!channelName || !paramsCallback) {
  23.                 return
  24.               }
  25.               switch (channelName) {
  26.                 case "openNativePage":
  27.                   paramsCallback.success()
  28.                   console.log("luvi > h5调用 openNativePage 方法，携带参数" + paramsCallback.name)
  29.                   break;
  30.                 case "getCity":
  31.                   paramsCallback.success()
  32.                   console.log("luvi > h5调用 getCity 方法，携带参数" + paramsCallback.name)
  33.                   break;
  34.                 default:
  35.                   break;
  36.               }
  37.             },
  38.           },
  39.           name: 'JSBridge',
  40.           methodList: ['nativeMethod'],
  41.           controller: this.webController,
  42.         })
  43.         .fileAccess(true)
  44.         .domStorageAccess(true)
  45.         .zoomAccess(false)
  46.         .width("100%")
  47.         .height("100%")
  48.     }
  49.   }
  50. }
复制代码

案例结果

​

其他方案

创建消息端口来实现两端的通讯

对于单页面应用，如vue，代码编译后方法名会举行肴杂，可使用端口消息监听的方式向h5约定消息端口发送消息，参考文章：文档中心

通过h5公共变乱的方式实现

使用 runjavascript 方法运行 h5 发送公共变乱代码，h5 监听公共变乱回调即可

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

王柳
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表