HarmonyOS NEXT鸿蒙（开发进阶）Web组件与APP应用互操作实践 ...

雁过留声  金牌会员 | 2024-10-25 04:05:38 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 965|帖子 965|积分 2895

  鸿蒙NEXT开发实战往期必看文章：
一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！
“非常具体的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到夺目）
HarmonyOS NEXT应用开发案例实践总结合（连续更新......）
HarmonyOS NEXT应用开发性能优化实践总结（连续更新......）
1. APP内嵌网页与应用互操作概述

在通常的APP开发中，经常会采用内嵌网页的形式，通过网页来展现丰富的动态内容，虽少了很多原生开发的功能，但是这么做无可厚非，究竟APP需要适配的系统平台很多，好比安卓、苹果、各种PC端，如今另有方兴未艾的鸿蒙系统；为每一种平台做定制难度还是很大的，但是这些平台的APP都支持内嵌网页，通过网页可以屏蔽各平台的差异，从而减少开发难度，提高开发服从。
当然，单纯的内嵌网页还是有不少局限性的，不过，可以通过应用和网页的互操作来提升用户的使用体验，所谓的互操作，就是可以在网页中调用APP中的方法，或者在APP中执行网页中的脚本，鸿蒙通过web组件中的javaScriptProxy接口提供了注册应用侧js对象到web组件中的方法：
  1. javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>,controller: WebviewController | WebController, asyncMethodList?: Array<string>})
复制代码
当然，也可以使用WebviewController的registerJavaScriptProxy接口：
  1. registerJavaScriptProxy(object: object, name: string, methodList: Array<string>, asyncMethodList?: Array<string>): void
复制代码
在应用侧执行网页中的脚本使用的是WebviewController类的runJavaScript接口：
  1. runJavaScript(script: string): Promise<string>
复制代码
通过上述几个接口，就可以实现强盛的Web组件与应用互操作功能
2. Web组件与应用互操作示例

本示例运行后的界面如下所示


单击网页中“盘算应用侧的乘法”按钮，可以主动盘算app上部的乘法，盘算后的界面如下所示；


在app内调节RGB颜色分量，设置好选择的背景色后，单击应用中的“设置网页背景色”按钮，可以设置网页的背景色：


下面具体介绍创建该应用的步调。
步调1：创建Empty Ability项目。
步调2：在module.json5配置文件加上对权限的声明：
  1. "requestPermissions": [
  2.       {
  3.         "name": "ohos.permission.INTERNET"
  4.       }
  5.     ]
复制代码
这里添加了获取互联网信息的权限。
步调3：添加资源文件demo.html，路径为src/main/resources/rawfile/demo.html，内容如下：
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <meta charset="utf-8">
  6. <body>
  7.   <div style="text-align: center;font-size: larger;">
  8.     <button type="button" onclick="compute()">计算应用侧的乘法</button>
  9.   </div>
  10.   <div id="info">
  12.   </div>
  13. </body>
  14. <script type="text/javascript">
  15.   function compute() {
  16.     let multiplier = multipObj.getMultiplier();
  17.     let multiplicand = multipObj.getMultiplicand();
  18.     let product = multiplier * multiplicand
  19.     multipObj.setProduct(product);
  20.   }
  22.   function setbackcolor(color) {
  23.     document.body.style.backgroundColor = color;
  24.   }
  25. </script>
  27. </html>
复制代码
该资源文件很告急，是本示例互操作实现的基础。
步调4：在Index.ets文件里添加如下的代码：
  1. import web_webview from '@ohos.web.webview'
  3. //注册到web组件中的应用侧js对象
  4. class ComputeObj {
  5.   constructor() {
  6.   }
  8.   public multiplier: number = 0.618
  9.   public multiplicand: number = 3.14
  10.   public product: string = "乘积"
  12.   //获取乘数
  13.   public getMultiplier() {
  14.     return this.multiplier;
  15.   }
  17.   //获取被乘数
  18.   public getMultiplicand() {
  19.     return this.multiplicand;
  20.   }
  22.   //设置乘积
  23.   public setProduct(newProduct: number) {
  24.     this.product = newProduct.toString();
  25.   }
  26. }
  28. @Entry
  29. @Component
  30. struct Index {
  31.   @State computeObj: ComputeObj = new ComputeObj()
  32.   jsName: string = "multipObj"
  33.   @State rColor: number = 100
  34.   @State gColor: number = 100
  35.   @State bColor: number = 100
  36.   @State backColor: string = "#646464"
  37.   scroller: Scroller = new Scroller()
  38.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  40.   build() {
  41.     Row() {
  42.       Column() {
  43.         Text("Web组件与应用互操作示例")
  44.           .fontSize(14)
  45.           .fontWeight(FontWeight.Bold)
  46.           .width('100%')
  47.           .textAlign(TextAlign.Center)
  48.           .padding(5)
  50.         Text("输入乘数和被乘数，在web组件中单击计算按钮进行计算")
  51.           .fontSize(14)
  52.           .width('100%')
  53.           .textAlign(TextAlign.Start)
  54.           .padding(5)
  56.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
  57.           TextInput({ text: this.computeObj.multiplier.toString() })
  58.             .onChange((value) => {
  59.               this.computeObj.multiplier = parseFloat(value)
  60.             })
  61.             .type(InputType.NUMBER_DECIMAL)
  62.             .width(110)
  63.             .fontSize(11)
  64.             .flexGrow(1)
  66.           Text("*")
  67.             .fontSize(14)
  68.             .width(20)
  69.             .flexGrow(0)
  71.           TextInput({ text: this.computeObj.multiplicand.toString() })
  72.             .onChange((value) => {
  73.               this.computeObj.multiplicand = parseFloat(value)
  74.             })
  75.             .type(InputType.NUMBER_DECIMAL)
  76.             .width(100)
  77.             .fontSize(11)
  78.             .flexGrow(1)
  80.           Text("=")
  81.             .fontSize(14)
  82.             .width(20)
  83.             .flexGrow(0)
  85.           TextInput({ text: `${this.computeObj.product}` })
  86.             .width(100)
  87.             .fontSize(11)
  88.             .enabled(false)
  89.             .flexGrow(1)
  90.         }
  91.         .width('100%')
  92.         .padding(5)
  94.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
  95.           Text("R颜色分量")
  96.             .fontSize(14)
  97.             .width(100)
  98.             .flexGrow(0)
  100.           Slider({ value: this.rColor, min: 0, max: 255 })
  101.             .onChange((value: number, mode: SliderChangeMode) => {
  102.               this.rColor = value
  103.               this.computeBackcolor()
  104.             })
  105.             .flexGrow(1)
  106.         }
  107.         .width('100%')
  108.         .padding(5)
  110.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
  111.           Text("G颜色分量")
  112.             .fontSize(14)
  113.             .width(100)
  114.             .flexGrow(0)
  116.           Slider({ value: this.gColor, min: 0, max: 255 })
  117.             .onChange((value: number, mode: SliderChangeMode) => {
  118.               this.gColor = value
  119.               this.computeBackcolor()
  120.             })
  121.             .flexGrow(1)
  122.         }
  123.         .width('100%')
  124.         .padding(5)
  126.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
  127.           Text("B颜色分量")
  128.             .fontSize(14)
  129.             .width(100)
  130.             .flexGrow(0)
  132.           Slider({ value: this.bColor, min: 0, max: 255 })
  133.             .onChange((value: number, mode: SliderChangeMode) => {
  134.               this.bColor = value
  135.               this.computeBackcolor()
  136.             })
  137.             .flexGrow(1)
  138.         }
  139.         .width('100%')
  140.         .padding(5)
  142.         Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
  143.           Text(`选中的颜色：${this.backColor}`)
  144.             .fontSize(14)
  145.             .height(30)
  146.             .width(150)
  147.             .backgroundColor(this.backColor)
  149.           Button("设置网页背景色")
  150.             .onClick(() => {
  151.               this.controller.runJavaScript(`setbackcolor('${this.backColor}')`)
  152.             })
  153.             .width(140)
  154.             .fontSize(14)
  155.             .flexGrow(0)
  156.         }
  157.         .width('100%')
  158.         .padding(5)
  160.         Scroll(this.scroller) {
  161.           Web({ src: $rawfile("demo.html"), controller: this.controller })
  162.             .padding(10)
  163.             .width('100%')
  164.             .textZoomRatio(300)
  165.             .backgroundColor(0xeeeeee)
  166.             //注册js对象
  167.             .javaScriptProxy({
  168.               object: this.computeObj,
  169.               name: this.jsName,
  170.               methodList: ["getMultiplier", "getMultiplicand", "setProduct"],
  171.               controller: this.controller,
  172.             })
  173.         }
  174.         .align(Alignment.Top)
  175.         .backgroundColor(0xeeeeee)
  176.         .height(300)
  177.         .flexGrow(1)
  178.         .scrollable(ScrollDirection.Vertical)
  179.         .scrollBar(BarState.On)
  180.         .scrollBarWidth(20)
  181.       }
  182.       .width('100%')
  183.       .justifyContent(FlexAlign.Start)
  184.       .height('100%')
  185.     }
  186.     .height('100%')
  187.   }
  189.   //计算背景色
  190.   computeBackcolor() {
  191.     this.backColor = "#" + parseInt(this.rColor.toFixed(0)).toString(16)
  192.       + parseInt(this.gColor.toFixed(0)).toString(16)
  193.       + parseInt(this.bColor.toFixed(0)).toString(16)
  194.   }
  195. }
复制代码
步调5：编译运行，可以使用模仿器或者真机。
步调6：具体的操作过程上面讲过了，就不再赘述了。
3. 关键功能分析

第一个是要注册到web组件中的js对象，在API12中写成class的形式，
  1. //注册到web组件中的应用侧js对象
  2. class ComputeObj {
  3.   constructor() {
  4.   }
  6.   public multiplier: number = 0.618
  7.   public multiplicand: number = 3.14
  8.   public product: string = "乘积"
  10.   //获取乘数
  11.   public getMultiplier() {
  12.     return this.multiplier;
  13.   }
  15.   //获取被乘数
  16.   public getMultiplicand() {
  17.     return this.multiplicand;
  18.   }
  20.   //设置乘积
  21.   public setProduct(newProduct: number) {
  22.     this.product = newProduct.toString();
  23.   }
  24. }
复制代码
第二个是注册对象的代码：
  1. Web({ src: $rawfile("demo.html"), controller: this.controller })
  2.             .padding(10)
  3.             .width('100%')
  4.             .textZoomRatio(300)
  5.             .backgroundColor(0xeeeeee)
  6.             //注册js对象
  7.             .javaScriptProxy({
  8.               object: this.computeObj,
  9.               name: this.jsName,
  10.               methodList: ["getMultiplier", "getMultiplicand", "setProduct"],
  11.               controller: this.controller,
  12.             })
复制代码
这里javaScriptProxy方法的各个参数肯定要包管正确，否则在web组件中调用会失败，其中name和demo.html中使用的注册对象名称multipObj要完全一致，methodList参数为注册对象声明的方法，也要包管拼写正确。
最后是盘算背景的代码：
  1.   //计算背景色
  2.   computeBackcolor() {
  3.     this.backColor = "#" + parseInt(this.rColor.toFixed(0)).toString(16)
  4.       + parseInt(this.gColor.toFixed(0)).toString(16)
  5.       + parseInt(this.bColor.toFixed(0)).toString(16)
  6.   }
复制代码
把选中的颜色分量拼集成了颜色字符串，最前面的是字符#。


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

本帖子中包含更多资源

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

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

雁过留声

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表