關(guān)鍵詞：鴻蒙、ArkTs、Web組件、通訊、數(shù)據(jù)
官方文檔Web組件用法介紹：文檔中心
Web 組件加載沙箱中頁面可參考我的另一篇文章：【HarmonyOS NEXT】 如何將rawfile中文件復(fù)制到沙箱中_鴻蒙rawfile 復(fù)制到沙箱
目錄
實現(xiàn)Web組件H5層與應(yīng)用層進行相互通訊
一、鴻蒙應(yīng)用向H5頁面發(fā)送數(shù)據(jù)
二、H5頁面向鴻蒙應(yīng)用發(fā)送數(shù)據(jù)（附代碼）
如何在鴻蒙應(yīng)用中加載一個Web頁面
一、加載網(wǎng)絡(luò)地址頁面
1.導(dǎo)入webview
import?web_webview from?'@ohos.web.webview'
2.創(chuàng)建WebviewController
controller: web_webview.WebviewController?= new?web_webview.WebviewController();
3.創(chuàng)建Web組件
Web({ src: "http://www.example.com/", controller: this.controller?})
4.在module.json5中添加網(wǎng)絡(luò)權(quán)限
"requestPermissions": [
????{
???????"name": "ohos.permission.INTERNET"
????}
]
案例效果：
?
二、加載本地H5頁面
1.在項目的 rowfile 中存放 html 代碼
2.在 Web組件 中使用 $rawfile 加載本地html
Web({ src: $rawfile('webTo.html'), controller: this.controller?})
實現(xiàn)Web組件H5層與應(yīng)用層進行相互通訊
一、鴻蒙應(yīng)用向H5頁面發(fā)送數(shù)據(jù)
在創(chuàng)建的WebviewController中使用?runJavaScript()方法可直接觸發(fā) H5 頁面中的方法
鴻蒙側(cè)
同樣也可以使用模板字符串拼接參數(shù)進行傳參
H5側(cè)
案例效果
二、H5頁面向鴻蒙應(yīng)用發(fā)送數(shù)據(jù)（附代碼）
在原生代碼側(cè)使用javaScriptProxy方法向 h5 的?window 對象中注冊方法，此處我注冊的對象名叫JSBridge，在該對象中寫入了一個?nativeMethod 方法，h5 中直接調(diào)用 nativeMethod() 方法即可向原生發(fā)送消息。
H5側(cè)?（附代碼）
h5側(cè)直接調(diào)用 window 對象下的 JSBridge.nativeMethod 方法，第一個參數(shù)對應(yīng)原生側(cè)對應(yīng)的 channelName 方法名，第二個參數(shù)為 h5 自定義參數(shù)，可帶入回調(diào)方法，供原生側(cè)完成調(diào)用的回調(diào)結(jié)果。
附代碼：
<!--
* @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()">跳轉(zhuǎn)原生頁面</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>
鴻蒙側(cè)（附代碼）
附代碼：
import?{ webview } from?'@kit.ArkWeb';
export?interface IParamsCallback?{
??name: string
??key: string
??success: (data?: string) =>?void
??fail: (data?: string) =>?void
}
@Entry
@Componentexport?struct MyWeb?{
??webController: WebviewController?= new?webview.WebviewController()
??webUrl: string | Resource?= "";
??build() {
????Column() {
??????Web({ src: this.webUrl, controller: this.webController?})
????????.javaScriptProxy({
??????????object: {
????????????nativeMethod: (channelName: string, paramsCallback: IParamsCallback) =>?{
??????????????if?(!channelName || !paramsCallback) {
????????????????return
??????????????}
??????????????switch?(channelName) {
????????????????case?"openNativePage":
??????????????????paramsCallback.success()
??????????????????console.log("luvi > h5調(diào)用 openNativePage 方法，攜帶參數(shù)"?+ paramsCallback.name)
??????????????????break;
????????????????case?"getCity":
??????????????????paramsCallback.success()
??????????????????console.log("luvi > h5調(diào)用 getCity 方法，攜帶參數(shù)"?+ paramsCallback.name)
??????????????????break;
????????????????default:
??????????????????break;
??????????????}
????????????},
??????????},
??????????name: 'JSBridge',
??????????methodList: ['nativeMethod'],
??????????controller: this.webController,
????????})
????????.fileAccess(true)
????????.domStorageAccess(true)
????????.zoomAccess(false)
????????.width("100%")
????????.height("100%")
????}
??}
}
案例效果
