【鸿蒙 HarmonyOS 4.0】Web组件

一、介绍

页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景,包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。

二、加载网页

2.1、加载在线网页

Web组件的使用非常简单,只需要在Page目录下的ArkTS文件中创建一个Web组件,传入两个参数就可以了。其中src指定引用的网页路径,controller为组件的控制器,通过controller绑定Web组件,用于实现对Web组件的控制。

import webview from '@ohos.web.webview'
@Entry
@Component
struct WebPage {private controller:WebviewController = new webview.WebviewControllerbuild() {Column(){Web({src:'https://blog.csdn.net/weixin_71403100?spm=1000.2115.3001.5343',controller:this.controller})}}
}

代码运行效果图如下:

备注:预览器是打不开此页面的,需要使用本地模拟器或真机调试

访问在线网页时您需要在module.json5文件中申明网络访问权限:ohos.permission.INTERNET。

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

2.2、加载本地网页

前面实现了Web组件加载在线网页,Web组件同样也可以加载本地网页。首先在main/resources/rawfile目录下创建一个HTML文件,然后通过$rawfile引用本地网页资源,示例代码如下:

import webview from '@ohos.web.webview'
@Entry
@Component
struct WebPage {private controller:WebviewController = new webview.WebviewControllerbuild() {Column(){Web({src:$rawfile('index.html'),controller:this.controller})}}
}

 main/resources/rawfile目录下创建的HTML文件代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-size: 50px;text-align: center;color: red;}</style>
</head>
<body><p>Hello World</p>
</body>
</html>

代码运行效果图如下:

三、网页缩放

有的网页可能不能很好适配手机屏幕,需要对其缩放才能有更好的效果,可以根据需要给Web组件设置zoomAccess属性,zoomAccess用于设置是否支持手势进行缩放,默认允许执行缩放。Web组件默认支持手势进行缩放。

Web({ src:'www.example.com', controller:this.controller }).zoomAccess(true)

如果需要对文本进行缩放,可以使用textZoomAtio(textZoomAtio: number)方法。其中textZoomAtio用于设置页面的文本缩放百分比,默认值为100,表示100%,以下示例代码将文本放大为原来的1.5倍。

Web({ src:'www.example.com', controller:this.controller }).textZoomAtio(150)

从上面的效果图可以看出使用textZoomAtio,文本会放大,但是图片不会随着文本一起放大。

四、处理页面导航

在使用浏览器浏览网页时,可以执行返回、前进、刷新等操作,Web组件同样支持这些操作。

import webview from '@ohos.web.webview'
@Entry
@Component
struct WebPage {private controller:WebviewController = new webview.WebviewControllerbuild() {Column(){Row(){Button('前进').onClick(()=>this.controller.forward())Button('后退').onClick(()=>this.controller.backward())Button('刷新').onClick(()=>this.controller.refresh())Button('停止').onClick(()=>this.controller.stop())Button('清除历史').onClick(()=>this.controller.clearHistory())}.padding(12).backgroundColor(Color.Gray).width('100%')Web({src:'https://developer.harmonyos.com/',controller:this.controller})}.height('100%')}
}

五、Web和JavaScript交互

在开发专为适配Web组件的网页时,您可以实现Web组件和JavaScript代码之间的交互。Web组件可以调用JavaScript方法,JavaScript也可以调用Web组件里面的方法。

在main/resources/rawfile目录下创建login.html、login.css、login.js文件

5.1、启用JavaScript

Web({ src:'https://www.example.com', controller:this.controller }).javaScriptAccess(true)

5.2、Web组件调用JS方法

点击按钮添加runJavaScript方法,事件是网页加载完成时的回调,runJavaScript方法可以执行HTML中的JavaScript脚本。

import webview from '@ohos.web.webview'
@Entry
@Component
struct WebPage {private controller:WebviewController = new webview.WebviewControllerbuild() {Column(){Button('获取js中的方法').onClick(()=>{this.controller.runJavaScript('getUserInfo()',(err,res)=>{if(!err){console.log('lucy',res)}})})Web({src:$rawfile('login.html'),controller:this.controller}).javaScriptAccess(true)}.height('100%')}
}

当页面加载完成时,触发点击事件,调用HTML文件中的getUserInfo()方法并将结果返回给Web组件。

5.3、JS调用Web组件方法

import webview from '@ohos.web.webview'
@Entry
@Component
struct WebPage {private controller:WebviewController = new webview.WebviewControllerbuild() {Column(){Button('注册信息到js中').onClick(()=>{this.controller.registerJavaScriptProxy({getAuth:()=>JSON.stringify({username:'tom',password:'123'})},'windowarkTs',['getAuth'])this.controller.refresh()})Web({src:$rawfile('login.html'),controller:this.controller}).javaScriptAccess(true)}.height('100%')}
}
//login.js文件代码
username.value = JSON.parse(windowarkTs.getAuth()).username
password.value = JSON.parse(windowarkTs.getAuth()).passwordconst handlelogin = () => {console.log(`lucy--用户名---${username.value}`);console.log(`lucy--密码---${password.value}`);
}const getUserInfo = ()=>{return {username:username.value,password:password.value}
}

点击按钮时,直接将getAuth里面的信息注册到js中

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

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

相关文章

5款好用的AI办公软件,一键轻松制作PPT、视频,提升工作效率!

众所周知&#xff0c;AI 人工智能技术已渗透到生活的方方面面&#xff0c;无论是很多人早已用上的智能音箱、语音助手&#xff0c;还是新近诞生的各种 AI 软件工具&#xff0c;背后都离不开 AI 人工智能技术的加持。 对于各类新生的 AI 软件工具&#xff0c;人们很容易「选边站…

Go的安装

一. 下载地址 Go官方下载地址&#xff1a;https://golang.org/dl/ Go中文网&#xff1a;https://go.p2hp.com/go.dev/dl/ 根据不同系统下载不同的包。 二. 配置GOPATH GOPATH是一个环境变量&#xff0c;用来表明你写的go项目的存放路径。 GOPATH路径最好只设置一个&#xff0…

部署 Web 项目到Linux上

目录 环境配置 构建项目 ​编辑 数据准备 运行并查看日志 杀掉进程 把程序安装到生产环境上, 这个过程称为 "部署"&#xff0c;也叫 "上线"。一旦程序部署成功, 那么这个程序就能被外网中千千万万的普通用户访问到。 环境配置 程序配置文件修改 实…

讲解Python 3的10种基本语法

在学习Python编程语言时&#xff0c;掌握基本语法是至关重要的。本文将通过10个范例详细讲解Python 3的基本语法&#xff0c;帮助读者更好地理解和掌握这门流行的编程语言。 1. 变量和数据类型 Python是一种动态类型语言&#xff0c;不需要事先声明变量的数据类型。例如&…

网络套接字1

网络套接字1 &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容讲解了udp的Linux环境下的使用&#xff0c…

Rust 语言中符号 :: 的使用场景

在 Rust 语言中&#xff0c;:: 符号主要用于以下几个场合&#xff1a; 指定关联函数或关联类型&#xff1a; 关联函数&#xff08;也称为静态方法&#xff09;是与类型关联而非实例关联的函数。它们使用 :: 符号来调用。例如&#xff1a; let value String::from("Hello,…

有线网络下windows电脑被投屏方案实践

最近在看使用笔记本屏幕作PC副屏的解决方案 无线网络Miracast 如果使用Win10/11自带的Miracast方案&#xff08;即windows系统中的&#xff1a;设置-系统-投影到此电脑&#xff09;&#xff0c;原则上需要通过Wi-Fi网络&#xff08;这是因为Miracast就是Wi-Fi联盟组织提出的&a…

react-native 搭建环境及运行项目

目前创建的是0.73版本的&#xff0c;Node 的版本应大于等于 18&#xff0c;需要 Java Development Kit [JDK] 17版本的&#xff08;必须是17版本&#xff09;。安装完后你可以在命令行中输入 javac -version&#xff08;请注意是 javac&#xff0c;不是 java&#xff09;来查看…

JDK8 新特性和stream流的使用(一)

JDK 8 的新特性包括&#xff1a; Lambda表达式。允许编写更加简洁和灵活的代码&#xff0c;它允许将代码作为参数传递给其他方法或作为函数返回。Lambda表达式使用“->”操作符&#xff0c;并且可以包含一个或多个参数&#xff0c;这些参数的类型由编译器推断得出。123 …

一键优化B2B2C电商系统,开启无限商机

在当今竞争激烈的电商行业&#xff0c;B2B2C模式已成为众多企业选择的经营模式之一。通过一键优化B2B2C电商系统&#xff0c;企业能够开启无限商机&#xff0c;实现更大的发展空间。 首先&#xff0c;优化B2B2C电商系统可以帮助企业提升用户体验&#xff0c;吸引更多客户。通过…

仿生蝴蝶制作——蝴蝶翅膀制作

前言 上一次已经设计好了的翅膀图纸 接下来就是根据这个图纸来制作翅膀。 过程中其实可以不用尺子准确测量&#xff0c;直接用碳纤维棒比着剪下来就好了&#xff0c;然后把减下来的一截比着剪下另一只翅膀需要的材料。因为左右两只翅膀差别不能太大&#xff0c;所以这样是最好…

异步编程和asyncio

介绍异步编程的重要性和在Python中的应用&#xff0c;特别是在I/O密集型任务和网络编程场景下。 目录 理解异步编程 异步编程基本概念 任务与Future 异步编程的工作原理 事件循环 协程&#xff08;Coroutines&#xff09; 异步与同步代码的结合 深入asyncio模块 事件循…

CCF-C推荐会议 IEEE CLOUD‘24 3月24日截稿!深圳开启全球云计算新纪元!

会议之眼 快讯 IEEE CLOUD(IEEE International Conference on Cloud Computing)即IEEE云计算国际会议将于 2024 年7月7日至13日在中国深圳举行&#xff01;IEEE CLOUD由lEEE Computer Society主办&#xff0c;CCF服务计算专委会、北京大学、IBM Research承办。CLOUD一直是研究人…

软件测试APP完整测试作业流程(附流程图),公司级软件测试流程化办公

目录 1. 概述 2. 软件测试流程 3. 软件测试周期人员活动图 4. 总结 1. 概述 1.1 目的 有效的保证软件质量&#xff1b; 有效的制定不同测试类型&#xff08;软件系统测试、音频主观性测试、Field Trial、专项测试、自动化测试、性 能测试、用户体验测试&#xff09;的软件…

【框架设计】MVC和MVVM对比图

1. MVC&#xff08;Model-View-Controller&#xff09; 单向通信View和Model通过Controller承上启下 2. MVVM&#xff08;Model-View-ViewModel&#xff09; 数据绑定M -> VM -> V DOM事件监听 V -> VM -> M 1. MVC是单向的&#xff0c;MVVM是双向的&#xff0c;…

【SpringCloud微服务全家桶学习笔记-GateWay网关(微服务入口)】

Gateway服务网关 API网关为微服务架构中的服务提供了统一的访问入口&#xff0c;客户端通过API网关访问相关服务。API网关的定义类似于设计模式中的门面模式&#xff0c;它相当于整个微服务架构中的门面&#xff0c;所有客户端的访问都通过它来进行路由及过滤。它实现了请求路…

二 超级数据查看器   讲解稿   导入功能

二 超级数据查看器 讲解稿 导入功能 APP下载地址 百度手机助手 下载地址4 ​ 讲解稿全文&#xff1a; 大家好。 今天我们对 超级数据查看器的 导入信息功能 做一下详细讲解。 首先&#xff0c;我们打开 超级数据查看器。 我们这个系统要实现的是&#xff0c;快速生…

GEE:基于Landsat8计算陆地表面温度(Land Surface Temperature,LST)

作者&#xff1a;CSDN _养乐多_ 本文将介绍在Google Earth Engine&#xff08;GEE&#xff09;平台上使用 Landsat 8 卫星影像数据计算陆地表面温度&#xff08;Land Surface Temperature&#xff0c;LST&#xff09;的代码。 结果如下图所示&#xff0c; 文章目录 一、参考…

ChatGPT Prompt方法原理详解

在人工智能的浪潮中,ChatGPT以其出色的对话生成能力引起了广泛关注。其强大的功能背后,离不开其独特的Prompt方法。本文将深入剖析ChatGPT Prompt方法的原理,带领读者了解其背后的奥秘。 ChatGPT Prompt方法的核心在于通过精心设计的提示语(Prompt),引导模型生成符合要求…

阿里P8解析自动化测试工具 —— SeleniumAppium!

自动化测试&#xff0c;利用自动化测试工具&#xff0c;通过录制/编程方式实现测试活动&#xff0c;发现被测对象存在的缺陷&#xff0c;从而替代手工测试活动。自动化测试不局限于某个具体测试阶段&#xff0c;也不局限被测对象的类型&#xff0c;只要满足自动化测试的必要条件…