鸿蒙网络编程系列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 * multiplicandmultipObj.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.618public multiplicand: number = 3.14public 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 = valuethis.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 = valuethis.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 = valuethis.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.618public multiplicand: number = 3.14public 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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【HarmonyOS NEXT】权限申请及应用设置页跳转

【HarmonyOS NEXT】权限申请及应用设置页跳转

关键词&#xff1a;鸿蒙、程序访问控制、定位、应用详情页、startability、want 在app开发过程中&#xff0c;常进行系统权限的申请以提供设备访问或个性化功能&#xff08;如扫一扫、城市定位、剪贴板等&#xff09;&#xff0c;从而保障应用功能的完整性&#xff0c;那么本期…
阅读更多...
Jupyter notebook和Conda使用

Jupyter notebook和Conda使用

Jupyter notebook和Conda使用 文章目录 Jupyter notebook和Conda使用AnacondaJupyter notebook简介页面使用技巧编写格式自动补全查看函数文档魔术命令远程访问交互式 Anaconda Anaconda是一个开源的Python发行版本&#xff0c;其包含了conda、Python等180多个科学包及其依赖项…
阅读更多...
stm32实现esp8266连接到TCP服务器（二）未完

stm32实现esp8266连接到TCP服务器（二）未完

1.2 连接到TCP Server 1.2.1 使用网络助手&#xff0c;设立TCP服务器 ​ 编辑 1.2.2 连接服务器 ATCIPSTART"TCP","192.168.1.18",8080 //指令&#xff0c;注意双引号逗号都要半角(英文)输入 CONNECT //结果&#xff1a;成功 OK //结果&#xff1a;成功 …
阅读更多...
jmeter中用csv data set config做参数化2

jmeter中用csv data set config做参数化2

在jmeter中&#xff0c;使用csv data set config进行参数化是很重要的一个功能&#xff0c;但是这个功能的使用需要十分仔细和小心&#xff0c;因为细节之处往往决定着结果的正确与否。 举例&#xff1a; 一个登录接口用加密密码登录&#xff0c;一个登录接口用原始密码登录。…
阅读更多...
STM32G4系列MCU的低功耗模式介绍

STM32G4系列MCU的低功耗模式介绍

目录 概述 1 认识低功耗模式 1.1 低功耗模式的应用 1.2 低功耗模式介绍 2 低功耗模式的状态关系 2.1 低功耗模式可能的转换状态图 2.2 低功耗模式总结 3 运行模式 3.1 减慢系统时钟 3.2 外围时钟门控 3.3 低功耗运行模式&#xff08;LP运行&#xff09; 概述 本文主…
阅读更多...
JavaFx学习--chapter02(网络对话)

JavaFx学习--chapter02(网络对话)

chapter02(网络对话) 简单网络对话程序 设计任务&#xff1a;客户端向服务器发送字符串&#xff0c;并能读取服务器返回的字符串。 知识点&#xff1a;TCP套接字技术&#xff0c;C/S软件架构程序设计 重点理解&#xff1a;Java客户套接字类Socket和服务器套接字类ServerSoc…
阅读更多...
蜜罐技术的出现究竟影响了什么

蜜罐技术的出现究竟影响了什么

自网络诞生以来&#xff0c;攻击威胁事件层出不穷&#xff0c;网络攻防对抗已成为信息时代背景下的无硝烟战争。然而&#xff0c;传统的网络防御技术如防火墙、入侵检测技术等都是一种敌暗我明的被动防御&#xff0c;难以有效应对攻击者随时随地发起的无处不在的攻击和威胁。蜜…
阅读更多...
linux线程 | 同步与互斥 | 互斥（下）

linux线程 | 同步与互斥 | 互斥（下）

前言&#xff1a;本篇文章主要讲述linux线程的互斥的知识。 讲解流程为先讲解锁的工作原理&#xff0c; 再自己封装一下锁并且使用一下。 做完这些就要输出一堆理论性的东西&#xff0c; 但博主会总结两条结论&#xff01;&#xff01;最后就是讲一下死锁。 那么&#xff0c; 废…
阅读更多...
什么是 Idempotence 以及它在哪里使用？

什么是 Idempotence 以及它在哪里使用？

大家好&#xff0c;我是锋哥。今天分享关于【什么是 Idempotence 以及它在哪里使用&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 什么是 Idempotence 以及它在哪里使用&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Idempotence&am…
阅读更多...
【C++STL】list的基本介绍与使用方式

【C++STL】list的基本介绍与使用方式

✨ Blog’s 主页: 白乐天_ξ( ✿&#xff1e;◡❛) &#x1f308; 个人Motto&#xff1a;他强任他强&#xff0c;清风拂山冈&#xff01; &#x1f525; 所属专栏&#xff1a;C深入学习笔记 &#x1f4ab; 欢迎来到我的学习笔记&#xff01; 一、list的介绍 文档内容以及大致翻…
阅读更多...
ESP32-IDF 非易失存储 NVS

ESP32-IDF 非易失存储 NVS

目录 零、前言一、基本介绍1、配置结构体1.1 nvs_entry_info_t 2、常用 API2.1 nvs_flash_init2.2 nvs_flash_init_partition2.3 nvs_flash_init_partition_ptr2.4 nvs_flash_erase2.5 nvs_flash_erase_partition2.6 nvs_flash_erase_partition_ptr2.7 nvs_flash_generate_keys…
阅读更多...
element plus中menu菜单技巧

element plus中menu菜单技巧

我在使用element plus的menu&#xff08;侧边栏&#xff09;组件的过程中遇到了一些问题&#xff0c;就是menu编写样式和路由跳转&#xff0c;下面给大家分享以下&#xff0c;我是怎么解决的。 1.页面效果 我要实现的网站布局是这样的&#xff1a; 侧边栏折叠以后的效果&#…
阅读更多...
python爬虫快速入门之---Scrapy 从入门到包吃包住

python爬虫快速入门之---Scrapy 从入门到包吃包住

python爬虫快速入门之—Scrapy 从入门到包吃包住 文章目录 python爬虫快速入门之---Scrapy 从入门到包吃包住一、scrapy简介1.1、scrapy是什么?1.2、Scrapy 的特点1.3、Scrapy 的主要组件1.4、Scrapy 工作流程1.5、scrapy的安装 二、scrapy项目快速入门2.1、scrapy项目快速创建…
阅读更多...
详解equals底层原理

详解equals底层原理

equals 方法是 Java 中用于比较两个对象是否“相等”的方法。在 Java 中&#xff0c;每个类都继承自 java.lang.Object 类&#xff0c;而 equals 方法正是定义在 Object 类中的一个方法。默认情况下&#xff0c;Object 类的 equals 方法比较的是两个对象的内存地址&#xff08;…
阅读更多...
SQL 多表联查

SQL 多表联查

SQL JOIN (w3school.com.cn) SQL join用于根据两个或多个表中的列之间的关系&#xff0c;从这些表中查询数据。 之前跟着老师学数据库的时候学过&#xff0c;最近又在比较频繁的使用&#xff0c;再复习一下。 Person表&#xff1a; Id_P &#xff1a;居民编号。主键 …
阅读更多...
大数据开发基于Hadoop+springboot平台的岗位推荐系统

大数据开发基于Hadoop+springboot平台的岗位推荐系统

文章目录 前言项目介绍技术介绍功能介绍核心代码数据库参考 系统效果图文章目录 前言 文章底部名片&#xff0c;获取项目的完整演示视频&#xff0c;免费解答技术疑问 项目介绍 随着网络科学技术不断的发展和普及化&#xff0c;用户在寻找适合自己的信息管理系统时面临着越来…
阅读更多...
成功解决pycharm软件中按住Ctrl+点击指定函数却不能跳转到对应库中的源代码

成功解决pycharm软件中按住Ctrl+点击指定函数却不能跳转到对应库中的源代码

成功解决pycharm软件中按住Ctrl点击指定函数却不能跳转到对应库中的源代码 目录 解决问题 解决方法 解决问题 在pycharm软件中按住Ctrl点击指定函数却不能跳转到对应库中的源代码 解决方法
阅读更多...
探索秘境：如何使用智能体插件打造专属的小众旅游助手『小众旅游探险家』

探索秘境：如何使用智能体插件打造专属的小众旅游助手『小众旅游探险家』

文章目录 摘要引言智能体介绍和亮点展示介绍亮点展示 已发布智能体运行效果智能体创意想法创意想法创意实现路径拆解 如何制作智能体可能会遇到的几个问题快速调优指南总结未来展望 摘要 本文将详细介绍如何使用智能体平台开发一款名为“小众旅游探险家”的旅游智能体。通过这…
阅读更多...
个人健康系统|个人健康数据管理系统|基于小程序+java的个人健康数据管理系统设计与实现(源码+数据库+文档)

个人健康系统|个人健康数据管理系统|基于小程序+java的个人健康数据管理系统设计与实现(源码+数据库+文档)

个人健康数据管理系统 目录 基于小程序java的个人健康数据管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师…
阅读更多...
重构案例：将纯HTML/JS项目迁移到Webpack

重构案例：将纯HTML/JS项目迁移到Webpack

我们已经了解了许多关于 Webpack 的知识&#xff0c;但要完全熟练掌握它并非易事。一个很好的学习方法是通过实际项目练习。当我们对 Webpack 的配置有了足够的理解后&#xff0c;就可以尝试重构一些项目。本次我选择了一个纯HTML/JS的PC项目进行重构&#xff0c;项目位于 GitH…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023