当前位置: 首页 > news >正文

鸿蒙应用框架开发【JS注入与执行】 Web

JS注入与执行

介绍

本示例基于H5游戏,通过arkui的button实现对游戏实现基本控制,展示webview的JS注入与执行能力,及native应用与H5的通信能力。

效果预览

1

使用说明

1.设备连接热点,可访问互联网。

2.打开应用,通过界面中按钮进行游戏控制。

具体实现

  • 本示例分成一个模块

    • 通过button实现对游戏的基本控制,WebviewController方法控制Web组件各种行为,使用webview注入JS与执行能力。
      源码:[EntryAbility.ets]
/** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { hilog } from '@kit.PerformanceAnalysisKit';
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {hilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.INFO);hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');hilog.info(0x0000, 'testTag', '%{public}s', 'want param:' + JSON.stringify(want) ?? '');hilog.info(0x0000, 'testTag', '%{public}s', 'launchParam:' + JSON.stringify(launchParam) ?? '');}onDestroy() {hilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.INFO);hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');}onWindowStageCreate(windowStage: window.WindowStage) {// Main window is created, set main page for this abilityhilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.INFO);hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent('pages/Index', (err, data) => {if (err.code) {hilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.ERROR);hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');return;}hilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.INFO);hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');});}onWindowStageDestroy() {// Main window is destroyed, release UI related resourceshilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.INFO);hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');}onForeground() {// Ability has brought to foregroundhilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.INFO);hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');}onBackground() {// Ability has back to backgroundhilog.isLoggable(0x0000, 'testTag', hilog.LogLevel.INFO);hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');}
}

源码[Index.ets]

/** Copyright (c) 2022 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
import { webview } from '@kit.ArkWeb';
import Logger from '../model/Logger';const TAG: string = '[Index]';@Entry
@Component
struct Index {@State gameLeft: string = "console.info('webgame gameLeft'); _main.paddle.moveLeft();";@State gameRight: string = "console.info('webgame gameRight'); _main.paddle.moveRight();";@State gameStart: string = "console.info('webgame gameStart'); if (_main.game.state !== _main.game.state_GAMEOVER) {_main.game.state = _main.game.state_RUNNING; _main.ball.fired = true;}";@State gameReset: string = "console.info('webgame gameReset'); if (_main.game.state === _main.game.state_GAMEOVER) {_main.game.state = _main.game.state_START; _main.start()}";@State removeDesc: string = "console.info('webgame removeDesc'); y=document.getElementsByTagName('div')[0]; y.parentNode.removeChild(y)";private imgRequestUrl: string = 'https://yangyunhe369.github.io/h5-game-blockBreaker/images/background.jpg';controller: webview.WebviewController = new webview.WebviewController();responseweb: WebResourceResponse = new WebResourceResponse();build() {Row() {Column() {Button('Start', { type: ButtonType.Capsule }).onClick(() => {try {this.controller.loadUrl("javascript:" + this.gameStart);} catch (error) {Logger.info(TAG, `loadUrl gameStart fail: ${JSON.stringify(error)}`);}})Button('L', { type: ButtonType.Capsule }).width(50).height(100).backgroundColor(Color.Red).gesture(LongPressGesture({ repeat: true, duration: 20 }).onAction((event: GestureEvent) => {if (event.repeat) {try {this.controller.loadUrl("javascript:" + this.gameLeft);} catch (error) {Logger.info(TAG, `loadUrl gameLeft fail: ${JSON.stringify(error)}`);}}}))}.width('8%')Column() {Web({ src: "https://yangyunhe369.github.io/h5-game-blockBreaker/", controller: this.controller }).domStorageAccess(true).onlineImageAccess(true).imageAccess(true).zoomAccess(false).javaScriptAccess(true).backgroundColor(Color.Orange)//拦截资源请求,优化游戏流畅度.onInterceptRequest((event) => {let url = '';if (event) {url = event.request.getRequestUrl();}if (url === this.imgRequestUrl) {return this.responseweb;}return null;}).onPageEnd(e => {try {this.controller.loadUrl("javascript:" + this.removeDesc);} catch (error) {Logger.info(TAG, `loadUrl removeDesc fail: ${JSON.stringify(error)}`);}})}.width('78%')Column() {Button('Reset', { type: ButtonType.Capsule }).onClick(() => {try {this.controller.loadUrl("javascript:" + this.gameReset);} catch (error) {Logger.info(TAG, `loadUrl gameReset fail: ${JSON.stringify(error)}`);}})Button('R', { type: ButtonType.Capsule }).width(50).height(100).backgroundColor(Color.Red).gesture(LongPressGesture({ repeat: true, duration: 20 }).onAction((event: GestureEvent) => {if (event.repeat) {try {this.controller.loadUrl("javascript:" + this.gameRight);} catch (error) {Logger.info(TAG, `loadUrl gameRight fail: ${JSON.stringify(error)}`);}}}))}.width('8%')}}
}
  • 接口参考:@ohos.window,@ohos.web.webview

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解;想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到!
下面是鸿蒙的完整学习路线,展示如下:
1

除此之外,根据这个学习鸿蒙全栈学习路线,也附带一整套完整的学习【文档+视频】,内容包含如下

内容包含了:(ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战)等技术知识点。帮助大家在学习鸿蒙路上快速成长!

鸿蒙【北向应用开发+南向系统层开发】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

在这里插入图片描述

为了避免大家在学习过程中产生更多的时间成本,对比我把以上内容全部放在了↓↓↓想要的可以自拿喔!谢谢大家观看!

相关文章:

鸿蒙应用框架开发【JS注入与执行】 Web

JS注入与执行 介绍 本示例基于H5游戏,通过arkui的button实现对游戏实现基本控制,展示webview的JS注入与执行能力,及native应用与H5的通信能力。 效果预览 使用说明 1.设备连接热点,可访问互联网。 2.打开应用,通过…...

AI问答:理解 DRG / Diagnosis Related Group / 按疾病诊断相关分组

DRG(Diagnosis Related Group)系统,中文译作“按疾病诊断相关分组”,是一种根据病情临床相似程度和资源消耗水平将住院病人进行分组的系统。以下是对DRG系统的详细理解: 一、定义与原理 1.1、定义:DRG系统…...

多个线程同时调用接口

1、线程的基本概念 线程是程序执行的最小单元。每个线程可以独立执行一段代码,与其他线程并行运行。Java提供Thread类和Runnable接口来创建和管理线程。 2、创建线程 1)继承Thread类并重写run()方法: class MyThread extend Thread{ pub…...

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——1到手测试

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——1到手测试 ​ 大家好,今天给大家带来的是购买到小车或者说RDK X3之后直接快速体验,今天主要围绕官方的快速入门手册进行逐步测试 1.知识补充1 ​ 在这里首先要给新手小白补充几…...

2024第三届钉钉杯大学生大数据挑战赛【A题】完整分享

2024第三届钉钉杯大学生大数据挑战赛已经开赛,小编给大家带来非常实用的助力【A题】完整,(看图片下方的说明),资料预览: 微信公众号...

下面关于数组排序的说明那项是错误的?

下面关于数组排序的说明那项是错误的? A. java.util.Arrays类提供有数组排序的支持方法:sort(); B. 通过java.util.Arrays类排序的对象所在类需要实现Comparable或Comparator接口; C. String数组可以进行排序,是因为St…...

【第二篇章】优秀的机器学习策略 超参数优化之决策树

在机器学习的浩瀚星空中,决策树作为一颗璀璨的星辰,以其直观易懂、解释性强以及高效处理分类与回归任务的能力,赢得了众多数据科学家与工程师的青睐。随着大数据时代的到来,如何从海量数据中提炼出有价值的信息,构建出…...

httprunner转载

基于 HttpRunner4.0 的接口自动化测试实践 测试之家 from httprunner import HttpRunner, Config, Step, RunRequest, RunTestCase # 配置数据库连接信息 config ( Config("database test") .variables( **{ "db_host": &…...

反序列化漏洞vulhub靶场serial

环境搭建 下载 https://download.vulnhub.com/serial/serial.zip 解压出来就是这种 你会得到一个这样的文件,这里使用VMware新建一个虚拟机,这里记录比较重要的几部分。 这里就是使用我们刚才下过来的。 漏洞过程详解 1.信息收集 打开靶机&#xff0…...

C++ 文件流详解

在 C 中&#xff0c;文件处理是一个常见且重要的任务。标准库提供了三种主要的文件流类来处理文件输入和输出&#xff1a;fstream、ifstream 和 ofstream。这些类都在 <fstream> 头文件中定义。 一、fstream 类 fstream 是文件流类的基类&#xff0c;既可以用于读操作&…...

docker compse简介与安装

目录 1. Docker Compose 简介 2. Docker Compose 安装 2.1 在 Ubuntu 上安装 Docker Compose 2.1.1 通过 apt 安装 2.1.2 使用官方脚本安装最新版本 2.2 在 CentOS 上安装 Docker Compose 2.2.2 使用官方脚本安装最新版本 2.2.3 使用 pip 安装 2.3 在 openEuler 上安装…...

基于深度学习的零样本学习

零样本学习&#xff08;Zero-Shot Learning, ZSL&#xff09;是深度学习中的一个前沿研究领域&#xff0c;其目标是在没有见过目标类别的样本的情况下&#xff0c;对这些新类别进行识别或分类。这种方法特别适用于在实际应用中存在大量未标注类别或新类别不断涌现的场景&#x…...

C++——list容器以及手动实现

LIST容器 list概述列表容器属性例子 list函数构造函数默认构造函数&#xff1a;带有元素个数和元素初值的构造函数&#xff1a;范围构造函数&#xff1a;拷贝构造函数&#xff1a;移动构造函数&#xff1a;示例 赋值运算符重载拷贝赋值操作符 (1)&#xff1a;移动赋值操作符 (2…...

Win11系统文件资源管理器鼠标右键卡顿解决方法

引用链接&#xff1a; Windows 11文件资源管理器崩溃怎么解决&#xff1f;看看这7个解决办法&#xff01;...

零基础学Python之 第十八讲 文件读写

当你开始学习Python编程时&#xff0c;文件读写是一个非常基础且重要的技能。本篇博客将引导你从零开始学习如何在Python中进行文件读写操作。 1. 打开文件 在Python中&#xff0c;要操作一个文件&#xff0c;首先需要打开它。使用内置的 open() 函数来打开文件&#xff0c;语…...

检索增强生成(RAG):智能内容生成的新纪元

引言 在大 AI 时代&#xff0c;生成式人工智能&#xff08;GenAI&#xff09;模型&#xff0c;尤其是大型语言模型&#xff08;LLM&#xff09;&#xff0c;已经展现出了令人瞩目的能力。然而&#xff0c;这些模型在提供信息的准确、即时、专业、权威等方面仍存在局限。检索增…...

ubuntu2204安装elasticsearch7.17.22

下载安装 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.17.22-amd64.deb wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.17.22-amd64.deb.sha512 shasum -a 512 -c elasticsearch-7.17.22-amd64.deb.sha512 su…...

介绍Servlet后端中两种接收参数方式req.getAttributer和req.getParameter的区别

数据来源 getParameter&#xff1a;此方法用于获取客户端发送的请求中携带的参数&#xff0c;通常这些参数是通过HTTP GET或POST请求传递的表单数据。例如&#xff0c;用户填写的用户名和密码等输入信息。getAttribute&#xff1a;该方法用来获取在服务器端通过setAttribute方法…...

Delphi FMX安卓Android播放mp3音频内存流

【笔记&#xff1a;安卓开发JavaDelphi FMX】 Delphi FMX跨平台的MediaPlayer无法播放音频数据流只能打开音频文件播放&#xff0c;但有时候需要直接播放内存流数据而无需生成文件&#xff0c;可以通过把内存流转ByteArray再通过Android平台系统原生的MediaDataSource或ParcelF…...

MapUtils常用方法

1、摘要 MapUtils是一个用于处理Map对象的实用工具类&#xff0c;它提供了许多方便的方法来执行常见的操作&#xff0c;如获取值、设置默认值、合并Map等。本文将介绍MapUtils的常见用法&#xff0c;以帮助你更轻松地处理Map数据。 2、前言 在Java编程中&#xff0c;Map是一…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

归并排序:分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

【Java多线程从青铜到王者】单例设计模式(八)

wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本&#xff0c;sleep也是可以指定时间的&#xff0c;也就是说时间一到就会解除阻塞&#xff0c;继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒)&#xff0c;wait能被notify提前唤醒&#xf…...

Excel 怎么让透视表以正常Excel表格形式显示

目录 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总...