鸿蒙ArkTS中的获取网络数据

  一、通过web组件加载网页

  在C/S应用程序中,都有网络组件用于加载网页,鸿蒙ArkTS中也有类似的组件。
  web组件,用于加载指定的网页,里面有很多的方法可以调用,虽然现在用得比较少,了解还是必须的。
  演示代码:

import webview from '@ohos.web.webview';@Entry
@Component
struct Index {myController:webview.WebviewController=new  webview.WebviewController() //控制器@State strWebURL:string=''  //网络地址@State strWebResult:string='' //返回的结果build() {Column({space:10}) {Row(){Column(){Row(){TextInput({placeholder:'请输入网址'}).layoutWeight(1).onChange((value:string)=>{this.strWebURL=value})Button('加载').onClick(()=>{// this.strWebURL = 'https://www.baidu.com';this.myController.loadUrl(this.strWebURL);})Button('刷新').onClick(()=>{this.myController.refresh();})Button('停止').onClick(()=>{this.myController.stop();})}Web({src:this.strWebURL,controller:this.myController}).height('100%').width('100%').zoomAccess(true).textZoomRatio(2)}}}.height('100%').width('100%')}
}

  我的计算机很卡顿,一直没有重装系统,可以运行出效果,安装了Huawei Mate10的真机模拟器。
  1、使用系统自带的模拟器Previewer预览时系统会提示:Property 'relativeOffset' does not exist on type 'TextAttribute'. <ArkTSCheck>,连上华为Mate10,下载安装文件后,模拟效果就出来了。
  2、需要开通网络访问权限。在module.json5中配置网络访问权限:

  3、注意函数名的大小写,我因为这个问题折腾了2个多小时,犯了很低级的错误。

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

  二、加载本地的网页并执行网页中的函数并得到返回数据

  与上面的类似,只是文件存放到resource\rawfile目录下。可以执行网页的程序并得到返回值。

import webview from '@ohos.web.webview';@Entry
@Component
struct Index {myController:webview.WebviewController=new  webview.WebviewController() //控制器@State strResult:string=''build() {Column({space:10}) {Row(){Web({src:$rawfile('test.html'),controller:this.myController}).height(300).width('100%').javaScriptAccess(true)}.height(300).width('100%').backgroundColor(Color.Pink)Row({space:6}){Button('加载本地网页').onClick(()=>{console.log('123')this.myController.runJavaScript('Test()').then(result =>{console.log(result)this.strResult=result})console.log(this.strResult)})Text('返回数据:')Text(this.strResult)}.height(200).width('100%').backgroundColor(Color.Orange)}.height('100%').width('100%')}
}

  效果图:

  网页test.html内容:

<!DOCTYPE html>
<html>
<head><title>JavaScript->函数</title>
</head>
<body><div id="demo"><font size=32>JavaScript->函数</font></div><input type="button" value="点击" onclick="Test123()" id="DD3"/><input type="button" value="点击" onclick="Test()" id="DD3"/>
<script>function Test(){document.getElementById("demo").style.color="#d70008"return 'test.html返回的数据'}function Test123(){return '点击按钮l返回的数据'}
</script>
</body>
</html>

  三、通过get和post获取网络数据

  使用http不可视组件可以通过get和post方法来获取网络数据,格式比较固定,实际使用时可以根据情况再封装一下,就是加上async和await。

  代码:

import http from '@ohos.net.http';
import { JSON } from '@kit.ArkTS';@Entry
@Component
struct MyComponent {@State StrReturnData_Get:string=''@State StrReturnData_Post:string=''@State strUrl_Get:string=''@State strUrl_Post:string=''objectToStringEncoding(obj:Record<string,string>) {let encodedStr = '';for (let key of Object.entries(obj)) {encodedStr += `${key[0]}=${encodeURIComponent(key[1])}&`;}return encodedStr.slice(0, -1); // 去除最后多余的 '&'
}build() {Column({space:10}) {Row(){Button('获取Get数据').fontSize(12).onClick(() => this.getWeatherData());TextInput({placeholder:'请输入网址'}).onChange((value:string)=>{this.strUrl_Get=value})}.width('100%').height(32)Row(){Text(this.StrReturnData_Get)}.layoutWeight(1)Row(){Button('获取Post数据').fontSize(12).onClick(() => this.getPostData())TextInput({placeholder:'请输入网址'}).onChange((value:string)=>{this.strUrl_Post=value})}.width('100%').height(32)Row(){Text(this.StrReturnData_Post)}.layoutWeight(1)}}getWeatherData() {let httpRequest =http.createHttp()httpRequest.request(this.strUrl_Get,{method:http.RequestMethod.GET,header:{'Content-Type':'application/json'},},(error,data)=>{if(!error){this.StrReturnData_Get=data.result.toString()console.log(this.StrReturnData_Get)}else {console.log(data.responseCode.toString())console.log(JSON.stringify(error))}})}getPostData() {let httpRequest =http.createHttp()httpRequest.request(this.strUrl_Post,{method:http.RequestMethod.POST,header:{'Content-Type':'application/x-www-form-urlencoded'},extraData:this.objectToStringEncoding({"name":"张三"})//   readTimeout:3000,// connectTimeout:3000},(error,data)=>{if(!error){this.StrReturnData_Post=data.result.toString()console.log(this.StrReturnData_Post)}else {console.log(data.responseCode.toString())console.log(JSON.stringify(error))}})}
}

  效果:

  实际上,ArkTS中封装了很多获取网络数据的组件,后面再一一学习。

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

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

相关文章

数学建模(基于Python实现)--灰色关联分析法讲解,含案例

前言 这是去年底学数学建模老哥的建模课程笔记&#xff1b; 未来本人将陆陆续续的更新数学建模相关的一些基础算法&#xff0c;大家可以持续关注一下&#xff0c;主要在于运用&#xff1b; 提示&#xff1a;数学建模只有实战才能提升&#x1f525;​&#x1f525;​&#x1f…

【go从零单排】error错误处理及封装

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;error 是一个内置的接口类型&#xff0c;用于表示错误情…

论文阅读笔记:Depth Pro: Sharp Monocular Metric Depth in Less Than a Second

论文阅读笔记&#xff1a;Depth Pro: Sharp Monocular Metric Depth in Less Than a Second 1 背景1.1 动机1.2 提出的方法 2 创新点3 方法4 模块4.1 训练目标4.2 课程训练 4.3 边缘评价指标4.4 焦距估计 5 效果5.1 和SOTA方法的对比 论文&#xff1a;https://arxiv.org/abs/24…

flutter 项目初建碰到的控制台报错无法启动问题

在第一次运行flutter时&#xff0c;会碰见一直卡在Runing Gradle task assembleDebug的问题。其实出现这个问题的原因有两个。 一&#xff1a;如果你flutter -doctor 检测都很ok&#xff0c;而且环境配置都很正确&#xff0c;那么大概率就是需要多等一会&#xff0c;少则几十分…

跨子网的WinCC客户机/服务器如何实现通讯?

为了更有效地利用有限的IP地址&#xff0c;为了减少广播对网络带宽的占用从而提高带宽&#xff0c;为了实现在不同子网中应用不同的安全策略从而提高网络安全性&#xff0c;现场通常要求划分子网&#xff0c;将安全等级要求不同的计算机安置在不同的子网中&#xff0c;分开管理…

SpringClud一站式学习之Eureka服务治理(二)

SpringClud一站式学习之Eureka服务治理 引言1. 搭建Eureka Server1.1. 添加Eureka Server依赖1.2. 添加 Eureka Server注解1.3. 配置Eureka Server1.4. 运行Eureka Server 2. 搭建Eureka Client 服务提供者2.1. 添加依赖2.2. 添加注解2.3. 配置Eureka Client2.4. 启动服务 3. 搭…

实战攻略 | ClickHouse优化之FINAL查询加速

【本文作者&#xff1a;擎创科技资深研发 禹鼎侯】 查询时为什么要加FINAL 我们在使用ClickHouse存储数据时&#xff0c;通常会有一些去重的需求&#xff0c;这时候我们可以使用ReplacingMergeTree引擎。这个引擎允许你存储重复数据&#xff0c;但是在merge的时候会根据order …

加入GitHub Spark需要申请

目录 加入GitHub Spark需要申请 GitHub Spark 一、产品定位与特点 二、核心组件与功能 三、支持的AI模型 四、应用场景与示例 五、未来展望 六、申请体验 加入GitHub Spark需要申请 GitHub Spark 是微软旗下GitHub在2024年10月30日的GitHub Universe大会上推出的一款革…

鸿蒙与团结引擎c#与ts简单交互

目录 团结中调用ts代码 鸿蒙中调用团结代码 首先在团结创建代码&#xff0c;需要将代码添加到场景物体中 devecoStudio端编写ts代码 在index页面添加一个测试按钮 团结中调用ts代码 团结引擎 - 手册: Call TypeScript plug-in code from C# scripts 注册函数要跟文件名一致 在u…

Qt QCustomplot 在采集信号领域的应用

文章目录 一、常用的几种开源库:1、QCustomPlot:2、QChart:3、Qwt:QCustomplot 在采集信号领域的应用1、应用实例时域分析频谱分析2.数据筛选和处理其他参考自然界中的物理过程、传感器和传感器网络、电路和电子设备、通信系统等都是模拟信号的来源。通过可视化模拟信号,可以…

世优科技携手人民中科打造AI数字人智能体助力智慧校园

近日&#xff0c;世优科技与人民中科携手&#xff0c;为中国劳动关系学院开发了一款AI数字人助手&#xff0c;不仅在校园内部承担日常问询、交互工作&#xff0c;还在学校的展厅中担任讲解员的角色&#xff0c;为师生们提供生动详尽的导览服务。 中国劳动关系学院作为中华全国总…

7.2、实验二:被动接口和单播更新

源文件链接&#xff1a; 7.2、实验二&#xff1a;被动接口和单播更新: https://url02.ctfile.com/d/61945102-63671890-6af6ec?p2707 (访问密码: 2707) 一、被动接口 1.介绍 定义: 在路由协议的配置中&#xff0c;一个被动接口指的是一个接口不发送路由更新包的配置方式&a…

达梦8-达梦数据实时同步软件(DMHS)配置-Oracle-DM8

1、安装环境 源端目的端IP地址192.168.6.111192.168.6.110系统版本Red Hat 6.4Kylin v10数据库版本Oracle11g达梦 v8系统用户Oracledmdba字符集MERICAN_AMERICA.AL32UTF8UTF-8端口15215236实例名PRODDMSERVER数据库软件目录/u01/app/oracle/opt/dmdbmsDMHS安装目录/u01/dmhs/o…

多个NVR同时管理EasyNVR多品牌NVR管理工具/设备:IP常见问题解决方案

随着视频监控技术的不断发展&#xff0c;NVR&#xff08;网络视频录像机&#xff09;已经成为现代安防系统的重要组成部分。而为了更高效地管理多个品牌的NVR设备&#xff0c;EasyNVR这一多品牌NVR管理工具应运而生。然而&#xff0c;在实际使用过程中&#xff0c;尤其是在多个…

新160个crackme - 094-TheBigMan-crackme6

运行分析 需破解Name和Serial PE分析 LCC win32程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 ida搜索字符串&#xff0c;进入关键函数 ida动调&#xff0c;发现关键判断函数func_1 进入后&#xff0c;发现Name长度需满足一定要求&#xff0c;且func_2返回值不能…

软考系统分析师知识点三七:今日考试

前言 今年报考了11月份的软考高级&#xff1a;系统分析师。 考试时间&#xff1a;11月9日。 今日考试。 今日考试 上午&#xff1a;选择题、案例题&#xff0c;注意记一下选择题和案例题中出现的知识点。 中午&#xff1a;再次整理强记一下论文框架、论文知识点 下午&…

u8g2操作流程和相关问题总结

1、下载官方源码实例 GitHub - olikraus/u8g2: U8glib library for monochrome displays, version 2 2、将目录中的csrc拷贝到工程文件夹里 3、裁剪代码 将u8x8_d_XXX.c 的文件,是自己硬件的保留,其他的都可以删掉。 4、裁剪文件的代码

Github 2024-11-05 Python开源项目日报Top10

根据Github Trendings的统计,今日(2024-11-05统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10HTML项目1TypeScript项目1系统设计指南 创建周期:2507 天开发语言:Python协议类型:OtherStar数量:241693 个Fork数量:42010 次…

Oracle视频基础1.4.4练习

1.4.4 [dbs] 删干净上次创建的bbk ll rm -f *dbf ll rm -f spfilebbk.ora clear ll创建bbk的pfile&#xff0c;准备对应的目录 ll strings spfilewilson.ora | more strings spfilewilson.ora > initbbk.ora :%s/wilson/bbk :%s/*\.//g :wq ll vi initbbk.ora####### 创…

跨境电商独立站怎么建?如何收款?

独立站是相对于平台电商以及近年迅猛发展的社交电商而言的。 平台站就是在亚马逊、Lazada、速卖通、Temu等电商平台上开设店铺的站点&#xff0c;社交电商则是依托社交媒体的流量衍生的电商平台&#xff0c;TikTok Shop便是典型代表。 一、什么是独立站 独立站&#xff0c;简…