鸿蒙与web混合开发双向通信
鸿蒙与web混合开发双向通信用runJavaScript和registerJavaScriptProxy
鸿蒙端调用 Web 端，用runJavaScript直接执行 Web 端 JS 函数；
Web 端调用鸿蒙端，用registerJavaScriptProxy方法，向 Web 端注入代理对象，Web 端通过该对象调用鸿蒙方法
web
entry/src/main/resources/rawfile/1.html
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>混合开发</title></head><body> <div></div> <img src=\"./a.png\" alt=\"\"> <button onclick=\"selectImg()\">打开相册</button></body></html><script> //直接写js代码 function changeImg(){ //1.获取img这个元素 const img = document.querySelector(\'img\') //2.修改元素的属性 img.src = \'./b.png\' } async function selectImg(){ //通知鸿蒙，让鸿蒙设备打开相册 const res = await harmonyDevice.selectImage() const div = document.querySelector(\'div\') div.innerText = JSON.stringify(res) }</script>鸿蒙
import { webview } from \'@kit.ArkWeb\'import { photoAccessHelper } from \'@kit.MediaLibraryKit\'import { promptAction } from \'@kit.ArkUI\'@Entry@Componentstruct Page { webController:WebviewController = new webview.WebviewController() selectImg(){ const picker = new photoAccessHelper.PhotoViewPicker() return picker.select() } build() { Column(){ // 1.想让网页干嘛，直接调网页的JS方法 Button(\'鸿蒙-改变网页图片\') .onClick(()=>{ // 控制器 this.webController.runJavaScript(\'changeImg()\') }) // 2.网页控制鸿蒙测 Button(\'注入鸿蒙的事件\') .onClick(()=>{ promptAction.showToast({ message:\'注入成功\' }) // 1.先给网页一个对象，这个对象上包含了所有网页要用到的方法集合 // 2.给这个对象起一个名字，让网页可以使用这个对象 // 3.确定网页可以使用的方法集合 this.webController.registerJavaScriptProxy( { selectImage:async()=>{ const res = await this.selectImg() return res } }, \"harmonyDevice\", [\"selectImage\"] ) }) // 1.加载的地址 // 2.控制 Button(\'刷新页面\') .onClick(()=>{ this.webController.refresh() }) Web({ // 本地： src:$rawfile(\'1.html\'), // src:\'https://www.amap.com/\', controller:this.webController }) } .width(\'100%\') .height(\'100%\') }}
