鸿蒙网络编程系列24-Web组件与应用互操作示例

1. APP内嵌网页与应用互操作概述

在通常的APP开发中，经常会采用内嵌网页的形式，通过网页来展现丰富的动态内容，虽少了很多原生开发的功能，但是这么做无可厚非，毕竟APP需要适配的系统平台很多，比如安卓、苹果、各种PC端，现在还有如日中天的鸿蒙系统；为每一种平台做定制难度还是很大的，但是这些平台的APP都支持内嵌网页，通过网页可以屏蔽各平台的差异，从而减少开发难度，提高开发效率。

当然，单纯的内嵌网页还是有不少局限性的，不过，可以通过应用和网页的互操作来提升用户的使用体验，所谓的互操作，就是可以在网页中调用APP中的方法，或者在APP中执行网页中的脚本，鸿蒙通过web组件中的javaScriptProxy接口提供了注册应用侧js对象到web组件中的方法：

javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>,controller: WebviewController | WebController, asyncMethodList?: Array<string>})

当然，也可以使用WebviewController的registerJavaScriptProxy接口：

registerJavaScriptProxy(object: object, name: string, methodList: Array<string>, asyncMethodList?: Array<string>): void

在应用侧执行网页中的脚本使用的是WebviewController类的runJavaScript接口：

runJavaScript(script: string): Promise<string>

通过上述几个接口，就可以实现强大的Web组件与应用互操作功能

2. Web组件与应用互操作示例

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

cke_69536.jpg

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

cke_126606.jpg

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

cke_139796.jpg

下面详细介绍创建该应用的步骤。

步骤1：创建Empty Ability项目。

步骤2：在module.json5配置文件加上对权限的声明：

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

这里添加了获取互联网信息的权限。

步骤3：添加资源文件demo.html，路径为src/main/resources/rawfile/demo.html，内容如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
​
<body>
  <div style="text-align: center;font-size: larger;">
    <button type="button" onclick="compute()">计算应用侧的乘法</button>
  </div>
  <div id="info">
​
  </div>
</body>
<script type="text/javascript">
  function compute() {
    let multiplier = multipObj.getMultiplier();
    let multiplicand = multipObj.getMultiplicand();
    let product = multiplier * multiplicand
    multipObj.setProduct(product);
  }
​
  function setbackcolor(color) {
    document.body.style.backgroundColor = color;
  }
</script>
​
</html>

该资源文件很重要，是本示例互操作实现的基础。

步骤4：在Index.ets文件里添加如下的代码：

import web_webview from '@ohos.web.webview'
​
//注册到web组件中的应用侧js对象

class ComputeObj {
  constructor() {
  }
​
  public multiplier: number = 0.618
  public multiplicand: number = 3.14
  public product: string = "乘积"
​
  //获取乘数
  public getMultiplier() {
    return this.multiplier;
  }
​
  //获取被乘数
  public getMultiplicand() {
    return this.multiplicand;
  }
​
  //设置乘积
  public setProduct(newProduct: number) {
    this.product = newProduct.toString();
  }
}
​
@Entry
@Component
struct Index {
  @State computeObj: ComputeObj = new ComputeObj()
  jsName: string = "multipObj"
  @State rColor: number = 100
  @State gColor: number = 100
  @State bColor: number = 100
  @State backColor: string = "#646464"
  scroller: Scroller = new Scroller()
  controller: web_webview.WebviewController = new web_webview.WebviewController()
​
  build() {
    Row() {
      Column() {
        Text("Web组件与应用互操作示例")
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding(5)
​
        Text("输入乘数和被乘数，在web组件中单击计算按钮进行计算")
          .fontSize(14)
          .width('100%')
          .textAlign(TextAlign.Start)
          .padding(5)
​
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          TextInput({ text: this.computeObj.multiplier.toString() })
            .onChange((value) => {
              this.computeObj.multiplier = parseFloat(value)
            })
            .type(InputType.NUMBER_DECIMAL)
            .width(110)
            .fontSize(11)
            .flexGrow(1)
​
          Text("*")
            .fontSize(14)
            .width(20)
            .flexGrow(0)
​
          TextInput({ text: this.computeObj.multiplicand.toString() })
            .onChange((value) => {
              this.computeObj.multiplicand = parseFloat(value)
            })
            .type(InputType.NUMBER_DECIMAL)
            .width(100)
            .fontSize(11)
            .flexGrow(1)
​
          Text("=")
            .fontSize(14)
            .width(20)
            .flexGrow(0)
​
          TextInput({ text: `${this.computeObj.product}` })
            .width(100)
            .fontSize(11)
            .enabled(false)
            .flexGrow(1)
        }
        .width('100%')
        .padding(5)
​
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Text("R颜色分量")
            .fontSize(14)
            .width(100)
            .flexGrow(0)
​
          Slider({ value: this.rColor, min: 0, max: 255 })
            .onChange((value: number, mode: SliderChangeMode) => {
              this.rColor = value
              this.computeBackcolor()
            })
            .flexGrow(1)
        }
        .width('100%')
        .padding(5)
​
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Text("G颜色分量")
            .fontSize(14)
            .width(100)
            .flexGrow(0)
​
          Slider({ value: this.gColor, min: 0, max: 255 })
            .onChange((value: number, mode: SliderChangeMode) => {
              this.gColor = value
              this.computeBackcolor()
            })
            .flexGrow(1)
        }
        .width('100%')
        .padding(5)
​
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Text("B颜色分量")
            .fontSize(14)
            .width(100)
            .flexGrow(0)
​
          Slider({ value: this.bColor, min: 0, max: 255 })
            .onChange((value: number, mode: SliderChangeMode) => {
              this.bColor = value
              this.computeBackcolor()
            })
            .flexGrow(1)
        }
        .width('100%')
        .padding(5)
​
        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
          Text(`选中的颜色：${this.backColor}`)
            .fontSize(14)
            .height(30)
            .width(150)
            .backgroundColor(this.backColor)
​
          Button("设置网页背景色")
            .onClick(() => {
              this.controller.runJavaScript(`setbackcolor('${this.backColor}')`)
            })
            .width(140)
            .fontSize(14)
            .flexGrow(0)
        }
        .width('100%')
        .padding(5)
​
        Scroll(this.scroller) {
          Web({ src: $rawfile("demo.html"), controller: this.controller })
            .padding(10)
            .width('100%')
            .textZoomRatio(300)
            .backgroundColor(0xeeeeee)
            //注册js对象
            .javaScriptProxy({
              object: this.computeObj,
              name: this.jsName,
              methodList: ["getMultiplier", "getMultiplicand", "setProduct"],
              controller: this.controller,
            })
        }
        .align(Alignment.Top)
        .backgroundColor(0xeeeeee)
        .height(300)
        .flexGrow(1)
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.On)
        .scrollBarWidth(20)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .height('100%')
    }
    .height('100%')
  }
​
  //计算背景色
  computeBackcolor() {
    this.backColor = "#" + parseInt(this.rColor.toFixed(0)).toString(16)
      + parseInt(this.gColor.toFixed(0)).toString(16)
      + parseInt(this.bColor.toFixed(0)).toString(16)
  }
}

步骤5：编译运行，可以使用模拟器或者真机。

步骤6：具体的操作过程上面讲过了，就不再赘述了。

3. 关键功能分析

第一个是要注册到web组件中的js对象，在API12中写成class的形式，

//注册到web组件中的应用侧js对象
class ComputeObj {
  constructor() {
  }
​
  public multiplier: number = 0.618
  public multiplicand: number = 3.14
  public product: string = "乘积"
​
  //获取乘数
  public getMultiplier() {
    return this.multiplier;
  }
​
  //获取被乘数
  public getMultiplicand() {
    return this.multiplicand;
  }
​
  //设置乘积
  public setProduct(newProduct: number) {
    this.product = newProduct.toString();
  }
}

第二个是注册对象的代码：

Web({ src: $rawfile("demo.html"), controller: this.controller })
            .padding(10)
            .width('100%')
            .textZoomRatio(300)
            .backgroundColor(0xeeeeee)
            //注册js对象
            .javaScriptProxy({
              object: this.computeObj,
              name: this.jsName,
              methodList: ["getMultiplier", "getMultiplicand", "setProduct"],
              controller: this.controller,
            })

这里javaScriptProxy方法的各个参数一定要保证准确，否则在web组件中调用会失败，其中name和demo.html中使用的注册对象名称multipObj要完全一致，methodList参数为注册对象声明的方法，也要保证拼写正确。

最后是计算背景的代码：

  //计算背景色
  computeBackcolor() {
    this.backColor = "#" + parseInt(this.rColor.toFixed(0)).toString(16)
      + parseInt(this.gColor.toFixed(0)).toString(16)
      + parseInt(this.bColor.toFixed(0)).toString(16)
  }

把选中的颜色分量拼凑成了颜色字符串，最前面的是字符#。

（本文作者原创，除非明确授权禁止转载）

本文源码地址：

https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/web/WebAppInteropDemo

本系列源码地址：

https://gitee.com/zl3624/harmonyos_network_samples

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/895461.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

递归神经网络（RNN）简介

递归神经网络（RNN）简介

递归神经网络简介 在本文中，我们将介绍神经网络的一种新的变体，即递归神经网络，也称为 （RNN），当数据是连续的时，如时间序列数据和文本数据，它比简单的神经网络效果更好。 什么是递归神经网络 （RNN）？ 循环神经网络 （RNN） 是一种神经网络，其中上一步的输出作为当前…
阅读更多...
王道考研视频——操作系统笔记

王道考研视频——操作系统笔记

操作系统 1.1 操作系统的概念、特征、功能、目标 操作系统&#xff08; Operating System&#xff0c;OS&#xff09;是指控制和管理整个计算机系统的硬件和软件资源&#xff0c;并合理地组织调度计算机的工作和资源的分配&#xff0c;以提供给用户和其他软件方便的接口和环境…
阅读更多...
[数据结构]栈的实现与应用

[数据结构]栈的实现与应用

文章目录 一、引言二、栈的基本概念1、栈是什么2、栈的实现方式对比3、函数栈帧 三、栈的实现1、结构体定义2、初始化3、销毁4、显示5、数据操作 四、分析栈1、优点2、缺点 五、总结1、练习题2、源代码 一、引言 栈&#xff0c;作为一种基础且重要的数据结构&#xff0c;在计算…
阅读更多...
【数据结构】滑动窗口算法详解：高效解决子串问题

【数据结构】滑动窗口算法详解：高效解决子串问题

滑动窗口&#xff08;Sliding Window&#xff09;是一种常用于处理数组或字符串中子序列问题的算法技巧。它通过维护一个窗口来限制待处理的数据范围&#xff0c;从而高效地解决问题&#xff0c;避免重复计算。它的时间复杂度通常为 O(N)&#xff0c;相较于暴力破解&#xff08…
阅读更多...
Go 项目如何集成类似mybatisPlus插件呢？GORM走起!!

Go 项目如何集成类似mybatisPlus插件呢？GORM走起!!

导读&#xff1a; 在 Go 项目中&#xff0c;虽然没有像 MyBatis Plus 这样特定的 ORM 插件&#xff0c;但可以使用功能相似的 Go ORM 框架&#xff0c;比如 GORM&#xff0c;它支持链式查询、自动迁移、预加载等功能&#xff0c;与 MyBatis Plus 有相似之处。通过一些插件或扩…
阅读更多...
常用API

常用API

Object类&#xff1a; instanceof&#xff1a;java中的关键字&#xff0c;判断左边的对象是否是右面类的实例。 它的作用是判断其左边对象是否为其右边类的实例&#xff0c;返回boolean类型的数据。 getClass()&#xff1a;得到调用者的数据类型&#xff1b; 进行对象内容比较…
阅读更多...
016_基于python+django网络爬虫及数据分析可视化系统2024_kyz52ks2

016_基于python+django网络爬虫及数据分析可视化系统2024_kyz52ks2

目录 系统展示 开发背景 代码实现 项目案例 获取源码 博主介绍&#xff1a;CodeMentor毕业设计领航者、全网关注者30W群落&#xff0c;InfoQ特邀专栏作家、技术博客领航者、InfoQ新星培育计划导师、Web开发领域杰出贡献者&#xff0c;博客领航之星、开发者头条/腾讯云/AW…
阅读更多...
盘点现代浏览器的各种神奇能力，功能令人惊讶

盘点现代浏览器的各种神奇能力，功能令人惊讶

盘点现代浏览器的各种神奇能力&#xff0c;功能令人惊讶&#x1f62e; 浏览器的进化 一个运行在浏览器里面的操作系统。一个炫酷的量子纠缠网页。内嵌在浏览器里面的AI大模型。 随着web技术的迅猛发展&#xff0c;现代浏览器已经不仅仅是一个浏览网页的工具了。它的功能早已进…
阅读更多...
【判断推理】逻辑论证之归因论证

【判断推理】逻辑论证之归因论证

2.1 归因论证概述 归因&#xff1a;指人们对 他人或自己行为的原因的推论过程。具体而言&#xff0c;就是观察者对他人的行为过程或自己的行为过程所进行的因果解释和推论。&#xff08;通俗而言&#xff0c;归因就是对已经发生的事实&#xff0c;在众多可能的原因中找出一个原…
阅读更多...
Cesium 实战 - 自定义纹理材质 - 立体墙（旋转材质）

Cesium 实战 - 自定义纹理材质 - 立体墙（旋转材质）

Cesium 实战 - 自定义纹理材质 - 立体墙（旋转材质） 核心代码完整代码在线示例Cesium 给实体对象（Entity）提供了很多实用的样式，基本满足普通项目需求； 但是作为 WebGL 引擎，肯定不够丰富，尤其是动态效果样式。 对于实体对象（Entity），可以通过自定义材质，实现各种…
阅读更多...
CLion和Qt 联合开发环境配置教程（Windows和Linux版）

CLion和Qt 联合开发环境配置教程（Windows和Linux版）

需要安装的工具CLion 和Qt CLion下载链接 :https://www.jetbrains.com.cn/clion/ 这个软件属于直接默认安装就行&#xff0c;很简单&#xff0c;不多做介绍了 Qt:https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ window 直接点exe Linux 先c…
阅读更多...
【2024软著申请】软著申请到发放全流程（附带教程+工具+撰写建议）

【2024软著申请】软著申请到发放全流程（附带教程+工具+撰写建议）

目录 总时间线材料准备1、计算机软件著作权登记申请表4页2、身份证明文件3、软件鉴别材料4、文档鉴别材料 唠叨两句 总时间线 时间关键节点20240811电子材料提交进入待受理阶段20240826受理阶段审查通过&#xff0c;进入审查中20240930发放完成 材料准备 版权登记链接(https…
阅读更多...
用柔性神经k-Opt学习搜索路径问题的可行和不可行区域(未完,先看前驱文章L2S)

用柔性神经k-Opt学习搜索路径问题的可行和不可行区域(未完,先看前驱文章L2S)

文章目录 Abstract1 IntroductionAbstract 介绍了一种名为 Neural k-Opt（NeuOpt）的新型学习搜索（L2S）求解器，用于解决路径问题。它学习执行基于定制的动作分解方法和定制的循环双流（Recurrent Dual-Stream）解码器的灵活 k-opt 交换。 作为一项开创性的工作，我们绕过了…
阅读更多...
华山论剑之Rust的Trait

华山论剑之Rust的Trait

华山论剑&#xff0c;群雄荟萃&#xff0c;各显神通。武林中人&#xff0c;各有所长&#xff0c;或剑法飘逸&#xff0c;或掌法刚猛&#xff0c;或轻功绝顶。这就好比Rust中的trait&#xff0c;它定义了一种武功套路&#xff0c;而不同的门派、不同的人&#xff0c;可以将这套武…
阅读更多...
All-reduce，AIl-to-all

All-reduce，AIl-to-all

目录 跨中心架构下的大模型并行训练 优化All-reduce通信效率 优化AIl-to-all通信效率 跨中心架构下的大模型并行训练 优化All-reduce通信效率 All-reduce是一种在分布式计算中广泛使用的通信操作，用于将多个节点的数据聚合成一个全局结果，并将该结果分发回所有节点。优化…
阅读更多...
sv标准研读第十五章-进程间同步与通信

sv标准研读第十五章-进程间同步与通信

书接上回&#xff1a; sv标准研读第十四章-clocking block 第15章 进程间的同步和通信 15.1 概览 -semaphores -mailboxes -named events 15.2 综述 简单的进程间通信可以通过named events来实现&#xff0c;有event trigger和event control过程&#xff0c;分别需要依…
阅读更多...
Elasticsearch基本使用及介绍

Elasticsearch基本使用及介绍

Elasticsearch 1. 关于各种数据库的使用 关于MySQL&#xff1a;是关系型数据库&#xff0c;能清楚的表示数据之间的关系&#xff0c;并且&#xff0c;是基于磁盘存储的&#xff0c;可以使用相对较低的成本存储大量的数据 关于Redis&#xff1a;是基于K-V结构的在内存中读写数…
阅读更多...
2011年国赛高教杯数学建模B题交巡警服务平台的设置与调度解题全过程文档及程序

2011年国赛高教杯数学建模B题交巡警服务平台的设置与调度解题全过程文档及程序

2011年国赛高教杯数学建模 B题 交巡警服务平台的设置与调度 有困难找警察”&#xff0c;是家喻户晓的一句流行语。警察肩负着刑事执法、治安管理、交通管理、服务群众四大职能。为了更有效地贯彻实施这些职能&#xff0c;需要在市区的一些交通要道和重要部位设置交巡警服务平台…
阅读更多...
【jQuery】jQuery 处理 Ajax 以及解决跨域问题的方式

【jQuery】jQuery 处理 Ajax 以及解决跨域问题的方式

文章目录 HTTP原生创建 AjaxjQuery 处理 Ajax$.ajax()$().load()$.get()$.post() 跨域CORSJSONPiframeweb sockets HTTP 超文本传输协议&#xff08;HTTP&#xff0c;HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计 HTTP 最初的目的是为了提供一种发…
阅读更多...
QT中中文显示乱码问题

QT中中文显示乱码问题

在VS2013中用QT开发GUI应用程序&#xff0c;Qt中显示中文乱码 一&#xff1a; //解决QT中中文显示乱码问题 #pragma execution_character_set("utf-8") 二&#xff1a;在main函数中添加以下代码&#xff1a; #include <QTextCodec>void main() {QTextCod…
阅读更多...
最新文章

Copyright @ 2022~2023