devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端 Web 与原生应用端 WebView 通信交互 - HarmonyOS Next

作者：AllinToyou | 2024-06-06 07:50:13

赞

踩

前端 Web 与原生应用端 WebView 通信交互 - HarmonyOS Next

基于鸿蒙 HarmonyOS Next 与前端 Vue 通信交互相关小结;
DevEco Studio NEXT Developer Preview2
Vue js

两端相互拟定好协议后,通过前端页面的点击事件,将所需的数据传输给原生移动端组件方法中,处理后将消息回传至前端.

根据官方文档的案例尝试,但没成功 ... 后经过几经尝试后两端握手成功 ... (官方文档略显粗糙,好一番折腾)

一.应用端

基于 import web_webview from '@ohos.web.webview' 并初始化 Web 组件;
调用 javaScriptProxy 方法,定义配置协议、参数和方法相关,具体可参考如下 code 片段;
name: 交互协议
object: 定义交互对象
methodList: 交互对象中所涵盖的方法,支持多个,也可以通过一个对象方法再细化多个子方法
controller: 组件

  1. import web_webview from '@ohos.web.webview'
  2.  
  3. @Entry
  4. @Component
  5. export struct HomePage {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.   ports: web_webview.WebMessagePort[] = [];
  8.   nativePort: web_webview.WebMessagePort | null = null;
  9.   message: web_webview.WebMessageExt = new web_webview.WebMessageExt();
  10.  
  11.   // 声明注册对象
  12.   @State WebCallAppMethod: WebCallAppClass = new WebCallAppClass()
  13.  
  14.   aboutToAppear(): void {
  15.     try {
  16.       // 启用网页调试功能
  17.       web_webview.WebviewController.setWebDebuggingAccess(true);
  18.     } catch (error) {
  19.       let e: business_error.BusinessError = error as business_error.BusinessError;
  20.       console.log(`Error Code: ${e.code}, Message: ${e.message}`);
  21.       this.controller.refresh(); // 页面异常,刷新
  22.     }
  23.   }
  24.  
  25.  
  26.   build() {
  27.     Row() {
  28.       Column({ space: 20 }) {
  29.         Web({ src: 'http://192.168.12.108:8080', controller: this.controller })
  30.           .width('100%')
  31.           .height('100%')
  32.           .backgroundColor(Color.White)
  33.           .multiWindowAccess(true)
  34.           .javaScriptAccess(true)
  35.           .geolocationAccess(true)
  36.           .imageAccess(true)
  37.           .onlineImageAccess(true)
  38.           .domStorageAccess(true)
  39.           .fileAccess(true)
  40.           .mediaPlayGestureAccess(true)
  41.           .mixedMode(MixedMode.All)
  42.           .layoutMode(WebLayoutMode.FIT_CONTENT) // 自适应布局
  43.           .verticalScrollBarAccess(true)
  44.           .horizontalScrollBarAccess(false)
  45.           .cacheMode(CacheMode.Default)
  46.           .zoomAccess(false)// 禁止手势缩放
  47.           .onConsole((event) => {
  48.             console.log('[交互] - onConsole')
  49.             LogUtils.info(event?.message.getMessage())
  50.             return false
  51.           })
  52.           .onPageBegin(() => { // 页面加载中
  53.             // this.registerWebJavaScript()
  54.           })
  55.           .onPageEnd(() => { // 页面加载完成
  56.             console.log('[Web] - 页面加载完成')
  57.             // this.registerWebJavaScript()
  58.           })
  59.           .onErrorReceive((event) => { // 异常: 无网络,页面加载错误时
  60.             if (event) {
  61.               console.info('getErrorInfo:' + event.error.getErrorInfo());
  62.               console.info('getErrorCode:' + event.error.getErrorCode());
  63.               console.info('url:' + event.request.getRequestUrl());
  64.               console.info('isMainFrame:' + event.request.isMainFrame());
  65.               console.info('isRedirect:' + event.request.isRedirect());
  66.               console.info('isRequestGesture:' + event.request.isRequestGesture());
  67.               console.info('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString());
  68.               let result = event.request.getRequestHeader();
  69.               console.info('The request header result size is ' + result.length);
  70.               for (let i of result) {
  71.                 console.info('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue);
  72.               }
  73.             }
  74.           })
  75.           .onHttpErrorReceive((event) => { // 异常: 网页加载资源 Http code >= 400 时
  76.             if (event) {
  77.               console.info('url:' + event.request.getRequestUrl());
  78.               console.info('isMainFrame:' + event.request.isMainFrame());
  79.               console.info('isRedirect:' + event.request.isRedirect());
  80.               console.info('isRequestGesture:' + event.request.isRequestGesture());
  81.               console.info('getResponseData:' + event.response.getResponseData());
  82.               console.info('getResponseEncoding:' + event.response.getResponseEncoding());
  83.               console.info('getResponseMimeType:' + event.response.getResponseMimeType());
  84.               console.info('getResponseCode:' + event.response.getResponseCode());
  85.               console.info('getReasonMessage:' + event.response.getReasonMessage());
  86.               let result = event.request.getRequestHeader();
  87.               console.info('The request header result size is ' + result.length);
  88.               for (let i of result) {
  89.                 console.info('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue);
  90.               }
  91.               let resph = event.response.getResponseHeader();
  92.               console.info('The response header result size is ' + resph.length);
  93.               for (let i of resph) {
  94.                 console.info('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue);
  95.               }
  96.             }
  97.           })
  98.           .onConfirm((event) => { // 提示框处理相关
  99.             AlertDialog.show({
  100.               title: '温馨提示',
  101.               message: event?.message,
  102.               confirm: {
  103.                 value: 'onAlert',
  104.                 action: () => {
  105.                   event?.result.handleConfirm()
  106.                 }
  107.               },
  108.               cancel: () => {
  109.                 event?.result.handleCancel()
  110.               }
  111.             })
  112.             return true;
  113.           })
  114.           .onShowFileSelector((event) => { // 文件上传处理相关
  115.             console.log('MyFileUploader onShowFileSelector invoked');
  116.             const documentSelectOptions = new picker.PhotoSelectOptions();
  117.             let uri: string | null = null;
  118.             const documentViewPicker = new picker.PhotoViewPicker();
  119.             documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
  120.               uri = documentSelectResult[0];
  121.               console.info('documentViewPicker.select to file succeed and uri is:' + uri);
  122.               if (event) {
  123.                 event.result.handleFileList([uri]);
  124.               }
  125.             }).catch((err: BusinessError) => {
  126.               console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
  127.             })
  128.             return true;
  129.           })
  130.           .javaScriptProxy({ // web call app
  131.             // 对象注入 web
  132.             object: this.WebCallAppMethod,
  133.             name: 'WebCallApp', // AppCallWeb WebCallAppSsss  WebCallApp
  134.             methodList: ['WebCallApp', 'CmdTest', 'CmdOpenUrl'],
  135.             controller: this.controller
  136.           })
  137.       }.width('100%').height('100%')
  138.     }
  139.   }
  140. }
  141.  
  142. class WebCallAppClass {
  143.   constructor() {
  144.   }
  145.  
  146.   WebCallApp(value: string): string { // 采用该 Json 对象模式,通过解析对象中的 type 后细化对应不同的子方法
  147.     console.log('[交互] --- WebCallApp - 测试')
  148.     console.log(value)
  149.     console.log(JSON.parse(value))
  150.     return '[交互] --- WebCallApp - 测试 - 回调123123123'
  151.   }
  152.  
  153.   CmdOpenUrl(): Object {
  154.     console.log('[交互] --- WebCallApp - CmdOpenUrl');
  155.     new Object({
  156.       'command': '111',
  157.     })
  158.     return Object;
  159.   }
  160.  
  161.   CmdTest(value: string): string {
  162.     console.log('[交互] --- WebCallApp - test');
  163.     console.log(value);
  164.     return '[交互] --- WebCallApp - test';
  165.   }
  166. }

二.前端

前端配置有两种方式,可以通过 index.html 配置 js 后调用,也可以单独另起一个 js 类方法去适配,具体可参考如下 code 按需尝试;

方式一.通过 index.html

在项目根目录的 index.html 文件中添加如下 script 段落后,在业务所需的地方调用即可

  1. // index.html
  2. <script>
  3.   // eruda.init()
  4.   (function () {
  5.     if (!window.applicationCache && typeof(Worker)=='undefined') {
  6.       alert("E001-检测到您的环境不支持HTML5，程序终止运行！");//不支持HTML5
  7.       return;
  8.     }
  9.  
  10.     var global = window; // create a pointer to the window root
  11.     if (typeof WebCallAppSsss === 'undefined') {
  12.       global.WebCallApp = { // 此处的 WebCallApp 与原生端 javaScriptProxy 中的 name 相互匹配
  13.         // 如下方法对应的是 javaScriptProxy 中 object 对象中的方法
  14.         WebCallApp: (arg) => {},
  15.         CmdOpenUrl: (arg) => {},
  16.         CmdTest: (arg) => {},
  17.       }; // create elf root if not existed
  18.  
  19.     }
  20.  
  21.     window.WebCallAppSsss.global = global; // add a pointer to window
  22.     window.AMap.global = global;
  23.   })();
  24. </script>
  1. // 业务所需的点击事件方法中调用
  2. methods : {
  3.     onClickGoBack() {
  4.         let str = WebCallAppSsss.CmdTest('[交互] - 测试'); // 方式一
  5.         // this.webApp.WebCallApp('CmdTest', '111111'); // 方式二
  6.         Toast.success('abc');
  7.     },
  8. }

方式二.通过自定义 js

自定义 webCallApp 类,通过引入类方法调用

  1. // WebCallApp.js
  2. import {
  3.   AppCallBacks,
  4.   AppCommendBackHandlers,
  5. } from './AppMsgHandlers'
  6.  
  7. export default {
  8.   WebCallApp(command,args,callback,context) {
  9.     /**
  10.      * 交互
  11.      *
  12.      * 协议:command
  13.      * 入参:args
  14.      * 回调:callback
  15.      * 参数:context
  16.      * */
  17.     if (typeof Elf.AppCallWeb != "undefined") {
  18.       if (this.isInHarmonyOS()) { // 鸿蒙 HarmonyOS Next
  19.         console.log('[OpenHarmony] - ' + command);
  20.  
  21.         let params = {
  22.           args: args, // 入参
  23.           command: command // 交互协议
  24.         };
  25.         console.log('[鸿蒙] - 入参');
  26.         console.log(params);
  27.  
  28.         if (typeof WebCallApp === 'undefined') {
  29.           Elf.WebCallApp = {
  30.             WebCallApp: (args) => {}
  31.           };
  32.         }
  33.         window.WebCallApp.Elf = Elf;
  34.       } else { // Android & iOS
  35.         context = context || window;//默认为window对象
  36.         args = args || {};
  37.         let  sn = null;
  38.         //IOS调用相机--sn特殊处理
  39.         if (command == "callCamera") {
  40.           sn = "examCamera";
  41.         } else {
  42.           sn = this.getSerialNumber();//请求App统一加水单号
  43.         }
  44.         let params = {
  45.           args: args,
  46.           command: command
  47.         };
  48.         //绑定回调函数
  49.         if (callback) {
  50.           AppCallBacks[sn] = {
  51.             callback: callback,
  52.             context: context
  53.           };
  54.         }
  55.         if (window.webkit && window.webkit.messageHandlers) {
  56.           //IOS
  57.           params.sn = sn;
  58.           window.webkit.messageHandlers["WebCallApp"].postMessage(JSON.stringify(params));
  59.         } else if (Elf.WebCallApp) {
  60.           //Android
  61.           params.sn = sn;
  62.           Elf.WebCallApp(JSON.stringify(params));
  63.         } else {
  64.  
  65.         }
  66.       }
  67.     }
  68.   },
  69.   isInApp() {
  70.     if (typeof Elf.AppCallWeb != "undefined") {
  71.       return !!((window.webkit && window.webkit.messageHandlers) || typeof Elf.WebCallApp == "function" || typeof Elf.WebCallCef == "function");
  72.     }
  73.   },
  74.   isInIOS() {
  75.     return window.webkit && window.webkit.messageHandlers;
  76.   },
  77.   isInAndroid() {
  78.     if (typeof Elf.AppCallWeb != "undefined") {
  79.       return typeof Elf.WebCallApp == "function";
  80.     }
  81.   },
  82.   isInHarmonyOS() {
  83.     if (navigator.userAgent.toLowerCase().indexOf('openharmony') !== -1) {
  84.       return true;
  85.     } else {
  86.       return false;
  87.     }
  88.   },
  89.   getSerialNumber() {
  90.     var uuid = this.UUID(3,8);
  91.     return new Date().format("yyyyMMddhhmmssS") + uuid;
  92.   },
  93.   UUID(len,radix) {
  94.     var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
  95.     var uuid = [],
  96.       i;
  97.     radix = radix || chars.length;
  98.     if (len) {
  99.       for (i = 0; i < len; i++) {
  100.         uuid[i] = chars[0 | Math.random() * radix];
  101.       }
  102.     } else {
  103.       var r;
  104.       uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
  105.       uuid[14] = '4';
  106.       for (i = 0; i < 36; i++) {
  107.         if (!uuid[i]) {
  108.           r = 0 | Math.random() * 16;
  109.           uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
  110.         }
  111.       }
  112.     }
  113.     return uuid.join('');
  114.   },
  115. }
  1. /* eslint-disable */
  2. // AppMsgHandlers
  3. import webApp from './index';
  4.  
  5. /*
  6.  *
  7.  * app对接
  8.  * 移动端种植Elf对象
  9.  * window => Elf
  10.  * 
  11.  */
  12. (function () {
  13.   if (!window.applicationCache&&typeof(Worker)=='undefined') {
  14.     alert("E001-检测到您的环境不支持HTML5，程序终止运行！");//不支持HTML5
  15.     return;
  16.   }
  17.   
  18.   var global = window;//create a pointer to the window root
  19.   if (typeof Elf === 'undefined') {
  20.       global.Elf = {};//create elf root if not existed
  21.   }
  22.   Elf.global = global;//add a pointer to window
  23. })();
  24.  
  25. var AppCallBacks = {},//动态数据流水列表
  26.     AppCommendBackHandlers = [],//APP后退监听事件列表
  27.     APPCommendBookStateHandlers = [],//下载状态监听事件列表
  28.     AppCommendRefreshHandlers = [],//刷新监听事件列表
  29.     APPCommendAddToBookShelfHandlers = [],//添加到书架监听事件列表
  30.     APPCommendAddToObtainedBookHandlers = [],//添加到已获得图书列表监听
  31.     APPCommendReBackHandlers = [],//监听重新回到页面通知
  32.     AppCommendNetworkHandlers = [],//监听网络链接状态
  33.     AppCommendAppStartingHandlers = [],//监听APP进入后台运行
  34.     AppCommendAppReactivateHandlers = [],//监听APP重新进入前台运行
  35.     AppCommendScreenShotss = [],//监听手机截屏
  36.     AppCommendKeyboardBounceUp = [];//监听移动端软键盘事件
  37.  
  38. if (typeof Elf != "undefined") {
  39.   Elf.AppCallWeb = (sn,result) => {
  40.     if (result && typeof result == "string") {
  41.       result = decodeURIComponent(result.replace(/\+/g,'%20'));
  42.       try {
  43.         result = JSON.parse(result);//解决空格变成+的问题
  44.       } catch (error) {
  45.         AppCallBacks[sn].callback.call(AppCallBacks[sn].context,result);
  46.         return;
  47.       }
  48.       if (result.sn) {
  49.         AppCallBacks[sn].callback.call(AppCallBacks[sn].context,result.QrCode);
  50.         return;
  51.       }
  52.     }
  53.     if (AppCallBacks[sn]) {
  54.       if (JSON.parse(result.opFlag)) {
  55.         //执行对应回调
  56.         AppCallBacks[sn].callback.call(AppCallBacks[sn].context,(typeof result.serviceResult == "string") ? JSON.parse(result.serviceResult) : result.serviceResult);
  57.       } else {
  58.         //接口调用返回失败信息，统一处理错误消息
  59.         Toast(result.errorMessage ? result.errorMessage : "服务器异常！");
  60.       }
  61.       //调用完成删除对象
  62.       delete AppCallBacks[sn];
  63.     } else if (AppMsgHandlers[sn] && typeof AppMsgHandlers[sn] == "function") {
  64.       //处理消息通知
  65.       AppMsgHandlers[sn].call(window,result);
  66.     }
  67.   };
  68. }
  69.  
  70. export {
  71.   AppCallBacks,
  72.   AppCommendBackHandlers
  73. }

业务方法调用

  1. // 业务所需的点击事件方法中调用
  2. methods : {
  3.     onClickGoBack() {
  4.         // let str = WebCallAppSsss.CmdTest('[交互] - 测试'); // 方式一
  5.         this.webApp.WebCallApp('CmdTest', '111111'); // 方式二
  6.         Toast.success('abc');
  7.     },
  8. }

以上便是此次分享的全部内容，希望能对大家有所帮助！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/680120
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号