HarmonyOS使用Web组件加载页面

1、加载网络页面

在Web组件创建时,指定默认加载的网络页面 。在默认页面加载完成后,如果开发者需要变更此Web组件显示的网络页面,可以通过调用loadUrl()接口加载指定的网页。

默认在Web组件加载完“www.baidu.com”页面后,点击按钮时可通过loadUrl接口将此Web组件显示页面变更为“www.huawei.com”。

2、加载本地页面

将本地页面文件放在应用的rawfile目录下,可以在Web组件创建的时候指定默认加载的本地页面 ,并且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。

3、加载HTML格式的文本数据

Web组件可以通过loadData()接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面,只需要显示一些页面片段时,可通过此功能来快速加载页面。

import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponentSimple {webviewController: web_webview.WebviewController = new web_webview.WebviewController();build() {Column() {Row(){Button('华为官方官网').onClick(() => {try {// 点击按钮时,通过loadUrl,跳转到www.baidu.comthis.webviewController.loadUrl('www.huawei.com');} catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);}})Button('加载本地页面').onClick(() => {try {// 点击按钮时,通过loadUrl,跳转到local1.htmlthis.webviewController.loadUrl($rawfile('local.html'));} catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);}})Button('加载HTML代码片段').onClick(() => {try {// 点击按钮时,通过loadData,加载HTML格式的文本数据this.webviewController.loadData("<html><body bgcolor=\"white\">Source:<pre>加载HTML代码片段</pre></body></html>","text/html","UTF-8");} catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);}})}.justifyContent(FlexAlign.Start)Row(){// 组件创建时,加载www.baidu.comWeb({ src: 'www.baidu.com', controller: this.webviewController})}} .alignItems(HorizontalAlign.Start)}
}
4、在module.json5中配置网络访问权限
    "requestPermissions":[{"name" : "ohos.permission.INTERNET","usedScene": {"abilities": ["FormAbility"],"when":"inuse"}}]
5、src/main/resources/rawfile目录下创建local.html文件
<!DOCTYPE html>
<html>
<body>
<p style="font-size:20px">本地页面</p>
<p>以下内容建设中……</p>
</body>
</html>
6、HarmonyOS模拟器中,运行并查看结果

注:PreViewer预览器无法查看结果

         

  

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

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

相关文章

html+js+css静态故宫主题

登录代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>登录 - 故宫博物院</title><…

C语言菜鸟入门·函数

目录 1. 函数的定义 2. 函数声明 3. 函数调用 4. 函数参数 4.1 传值调用 4.2 引用调用 函数是一组一起执行一个任务的语句。每个 C 程序都至少有一个函数&#xff0c;即主函数 main() &#xff0c;所有简单的程序都可以定义其他额外的函数。 您可以把代码划分到不同…

【C++】C++入门—— 引用

引用 1 前情提要2 概念剖析3 引用特性4 常引用5 使用场景5.1做参数5.2 做返回值 6 传值 传引用的效率比较7 引用与指针的差异Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读下一篇文章见 1 前情提要 在C语言中&#xff0c;我们往往会遇见复杂的指针&#xff08;如…

论文阅读-MapReduce

论文名称&#xff1a;MapReduce: Simplified Data Processing on Large Clusters 翻译的效果不是很好&#xff0c;有空再看一遍&#xff0c;参照一下别人翻译的。 MapReduce:Simplified Data Processing on Large Clusters 中文翻译版(转) - 阿洒 - 博客园 (cnblogs.com) 概…

C#,欧拉数(Eulerian Number)的算法与源代码

1 欧拉数 欧拉数特指 Eulerian Number&#xff0c;不同于 Euler numbers&#xff0c;Eulers number 哦。 组合数学中&#xff0c;欧拉数&#xff08;Eulerian Number&#xff09;是从1到n中正好满足m个元素大于前一个元素&#xff08;具有m个“上升”的排列&#xff09;条件的…

mini-spring 实现应用上下文,自动识别、资源加载、扩展机制

我们不能让面向 Spring 本身开发的 DefaultListableBeanFactory 服务&#xff0c;直接给予用户使用 DefaultListableBeanFactory、XmlBeanDefinitionReader&#xff0c;是我们在目前 Spring 框架中对于服务功能测试的使用方式&#xff0c;它能很好的体现出 Spring 是如何对 xm…

【靶场实战】Pikachu靶场暴力破解关卡详解

Nx01 系统介绍 Pikachu是一个带有漏洞的Web应用系统&#xff0c;在这里包含了常见的web安全漏洞。 如果你是一个Web渗透测试学习人员且正发愁没有合适的靶场进行练习&#xff0c;那么Pikachu可能正合你意。 Nx02 Burte Force概述 “暴力破解”是一攻击具手段&#xff0c;在web…

Transformer 自然语言处理(二)

原文&#xff1a;Natural Language Processing with Transformers 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第五章&#xff1a;文本生成 基于 Transformer 的语言模型最令人不安的特点之一是它们生成的文本几乎无法与人类写的文本区分开。一个著名的例子是 Ope…

60、Flink CDC 入门介绍及Streaming ELT示例(同步Mysql数据库数据到Elasticsearch)-完整版

Flink 系列文章 一、Flink 专栏 Flink 专栏系统介绍某一知识点&#xff0c;并辅以具体的示例进行说明。 1、Flink 部署系列 本部分介绍Flink的部署、配置相关基础内容。 2、Flink基础系列 本部分介绍Flink 的基础部分&#xff0c;比如术语、架构、编程模型、编程指南、基本的…

【Docker】在Windows下使用Docker Desktop创建nginx容器并访问默认网站

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Docker容器》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

布局技巧及CSS初始化

一&#xff0c;margin负值巧妙应用 二&#xff0c;文字围绕浮动元素 三&#xff0c;行内块 四&#xff0c;CSS三角强化 五&#xff0c;CSS初始化 一&#xff0c;margin负值巧妙应用 制作盒子的细线边框&#xff1a; 鼠标经过li后变色&#xff1a; 二&#xff0c;文字围绕…

Redis缓存穿透、缓存击穿、缓存雪崩的解决方案

一、背景 不管是实际工作还是面试&#xff0c;这3个问题都是非常常见的&#xff0c;今天我们就好好探讨一下这个三个问题的解决方案 三者的区别&#xff1a; 缓存穿透&#xff1a;查询缓存和数据库都不存在的数据&#xff0c;缓存没有&#xff0c;数据库也没有 缓存击穿&#…

Java入门高频考查基础知识8(腾讯18问1.5万字参考答案)

刷题专栏&#xff1a;http://t.csdnimg.cn/gvB6r Java 是一种广泛使用的面向对象编程语言&#xff0c;在软件开发领域有着重要的地位。Java 提供了丰富的库和强大的特性&#xff0c;适用于多种应用场景&#xff0c;包括企业应用、移动应用、嵌入式系统等。 以下是几个面试技巧&…

使用AKStream对接gb28181

优点&#xff1a;功能比较多&#xff0c;C#开发的&#xff0c;容易修改&#xff0c;内嵌入了zlmk流媒体服务品&#xff0c;启动简单 缺点&#xff1a;sip对摄像头兼容还有问题&#xff0c;大华接入非常不稳定&#xff0c;注册等待时间久&#xff0c;对海康是正常&#xff0c;占…

IntelliJ Idea实用插件推荐

目录 一、插件安装 二、常用插件 A、代码规范 Alibaba Java Coding Guidelines SonarLint B、快捷开发 aiXcoder-AI代码生成 AWS Toolkit-AI代码生成 CodeGeeX-AI代码生成 CodeGlance-代码缩略图 camelCase-格式转换 GsonFormatPlus-json代码生成 Sequence Giagram…

UE4 CustomDepthMobile流程小记

原生UE opaque材质中获取CustomDepth/CustomStencil会报错 在其Compile中调用的函数中没有看到报错逻辑 材质节点的逻辑都没有什么问题&#xff0c;所以看一下报错 在HLSLMaterialTranslator::Translate中 修改之后 mobile流程的不透明材质可以直接获取SceneTexture::customd…

聚焦AI新动能,九州未来与燧弘华创签约!

1月24日&#xff0c;厦门市电子信息与人工智能产业高质量发展大会成功举办。来自电子信息产业、人工智能领域的企业家、专家等近300位嘉宾齐聚一堂&#xff0c;共谋智能基础&#xff0c;共话产业合作&#xff0c;共享发展商机。 会上&#xff0c;九州未来与燧弘华创签署算力租…

anaconda离线安装包的方法

当设备没有网络时&#xff0c;可以使用有网络的设备先下载所需安装包&#xff0c;然后离线拷贝到需要安装的设备&#xff0c;最后安装。 一. 下载所需安装包 下载命令&#xff1a;使用pip download。详细描述参见pip download -h 以"blind-watermark"为例。 pip …

​学者观察 | 区块链技术理论研究与实践观察——中央财经大学朱建明

导语 当下区块链研究成果质量越来越高&#xff0c;技术应用越来越成熟。在现阶段的研究中存在哪些短板需要弥补&#xff0c;如何将研究成果转化为推动数字经济高质量发展的实际应用&#xff0c;区块链技术与其他新技术结合发展将带来哪些新的机遇&#xff1f; 中央财经大学朱…

eduSRC那些事儿-3(命令执行类+越权逻辑类)

点击星标&#xff0c;即时接收最新推文 本文对edusrc挖掘的部分漏洞进行整理&#xff0c;将案例脱敏后输出成文章&#xff0c;不包含0DAY/BYPASS的案例过程&#xff0c;仅对挖掘思路和方法进行相关讲解。 命令执行类 St2命令执行 在电量查询手机管理平台&#xff0c;观察到.do或…