鸿蒙ArkTS中的获取网络数据

news2024/11/8 7:33:59

  一、通过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.coloradmin.cn/o/2235659.html

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

相关文章

无人车之路径规划篇

无人车的路径规划是指在一定的环境模型基础上&#xff0c;给定无人车起始点和目标点后&#xff0c;按照性能指标规划出一条无碰撞、能安全到达目标点的有效路径。 一、路径规划的重要性 路径规划对于无人车的安全、高效运行至关重要。它不仅能够提高交通效率&#xff0c;减少交…

C语言心型代码解析

方法一 心型极坐标方程 爱心代码你真的理解吗 笛卡尔的心型公式&#xff1a; for (y 1.5; y > -1.5; y - 0.1) for (x -1.5; x < 1.5; x 0.05) 代码里面用了二个for循环&#xff0c;第一个代表y轴&#xff0c;第二个代表x轴 二个增加的单位不同&#xff0c;能使得…

11月7日(内网横向移动(二))

利用系统服务 SCShell SCShell是一款利用系统服务的无文件横向移动工具。与传统的创建远程服务的方法不同&#xff0c;SCShell利用提供的用户凭据&#xff0c;通过ChangeServiceConfigA API修改远程主机上的服务配置&#xff0c;将服务的二进制路径名修改为指定的程序或攻击载…

【YOLOv11[基础]】目标检测OD | 导出ONNX模型 | ONN模型推理以及检测结果可视化 | python

本文将导出YOLO11.pt模型对应的ONNX模型,并且使用ONNX模型推理以及结果的可视化。话不多说,先看看效果图吧!!! 目录 一 导出ONNX模型 二 推理及检测结果可视化 1 代码 2 效果图

力扣—不同路径(路径问题的动态规划)

文章目录 题目解析算法原理代码实现题目练习 题目解析 算法原理 状态表示 对于这种「路径类」的问题&#xff0c;我们的状态表示⼀般有两种形式&#xff1a; i. 从[i, j] 位置出发。 ii. 从起始位置出发&#xff0c;到[i, j] 位置。 这⾥选择第⼆种定义状态表⽰的⽅式&#xf…

传统RAG流程;密集检索器,稀疏检索器:中文的M3E

目录 传统RAG流程 相似性搜索中:神经网络的密集检索器,稀疏检索器 密集检索器 BGE系列模型 text-embedding-ada-002模型 M3E模型 稀疏检索器 示例一:基于TF-IDF的稀疏检索器 示例二:基于BM25的稀疏检索器 稀疏检索器的特点与优势 传统RAG流程 相似性搜索中:神经…

Javascript 获取设备信息 工具

JS获取设备信息(操作系统信息、地理位置、UUID、横竖屏状态、设备类型、网络状态、浏览器信息、生成浏览器指纹、日期、生肖、周几等) Get Device Info Online GitHub - skillnull/DeviceJs: JS获取设备信息(操作系统信息、地理位置、UUID、横竖屏状态、设备类型、网络状态、浏…

【数据仓库】

1、概述 数据仓库&#xff0c;英文名称为Data Warehouse&#xff0c;可简写为DW或DWH。 数据仓库是企业中用于集中存储和管理来自多个源的经过处理和组织的数据的系统。它为复杂的查询和分析提供了一个优化的环境&#xff0c;使得用户能够执行高级数据分析&#xff0c;以支持…

成都栩熙酷网络科技有限公司抖音小店探索

在数字经济的浪潮中&#xff0c;电商行业正以前所未有的速度蓬勃发展&#xff0c;而短视频平台的崛起更是为这一领域注入了新的活力。成都栩熙酷网络科技有限公司&#xff08;以下简称“栩熙酷”&#xff09;&#xff0c;作为这股浪潮中的佼佼者&#xff0c;凭借其敏锐的市场洞…

基于ViT的无监督工业异常检测模型汇总

基于ViT的无监督工业异常检测模型汇总 论文1&#xff1a;RealNet: A Feature Selection Network with Realistic Synthetic Anomaly for Anomaly Detection&#xff08;2024&#xff09;1.1 主要思想1.2 系统框架 论文2&#xff1a;Inpainting Transformer for Anomaly Detecti…

传输协议设计与牧村摆动(Makimoto‘s Wave)

有一条活鱼和一条死鱼&#xff0c;你准备怎么做&#xff0c;你会将活鱼红烧或将死鱼清蒸吗&#xff1f;好的食材只需要最简单的烹饪&#xff0c;不好的食材才需要花活儿。 我此前的文字几乎都在阐述一个观点&#xff0c;广域网就是那条死鱼&#xff0c;数据中心则是那条活鱼。…

基于Python的旅游景点推荐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

程序员的生活周刊 #7:耐克总裁被裁记

0. 庙宇 这张图来自 Tianshu Liu&#xff0c; 被树木环绕的宝塔庙宇 1. 耐克总裁 耐克最近的总裁 John Donahoe 干了 5 年&#xff0c;终于被裁掉了。 这位总裁即不了解球鞋文化&#xff0c;也没有零售经验&#xff0c;但不懂事的董事会还是聘用它&#xff0c;寄托把耐克从运…

全面解析:区块链技术及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 全面解析&#xff1a;区块链技术及其应用 全面解析&#xff1a;区块链技术及其应用 全面解析&#xff1a;区块链技术及其应用 区…

工作流初始错误 泛微提交流程提示_泛微协同办公平台E-cology8.0版本后台维护手册(11)–系统参数设置

工作流初始错误 泛微提交流程提示_泛微协同办公平台E-cology8.0版本后台维护手册(11)–系统参数设置...-CSDN博客 工作流初始错误 泛微提交流程提示_泛微OA 工作流WebService接口使用说明 工作流初始错误 泛微提交流程提示_泛微OA 工作流WebService接口使用说明-CSDN博客 工作…

每日OJ题_牛客_春游_贪心+数学_C++_Java

目录 牛客_春游_贪心数学 题目解析 C代码 Java代码 牛客_春游_贪心数学 春游 描述&#xff1a; 盼望着&#xff0c;盼望着&#xff0c;东风来了&#xff0c;春天脚步近了。 值此大好春光&#xff0c;老师组织了同学们出去划船&#xff0c;划船项目收费如下&#xff1a;…

关于elementui el-radio 赋值问题

今天遇到这样的问题&#xff1a; 点击的时候&#xff0c;同时选中 照抄官网&#xff01; 后来发现了问题&#xff1a; 也就是说如果你的版本太低&#xff0c;就不能用value&#xff0c;而得用label&#xff0c;于是修改 <el-radio-group v-model"searchTime"&g…

设计者模式之策略模式

前言 在软件构建过程中&#xff0c;某些对象使用的算法可能多种多样&#xff0c;经常改变&#xff0c;如果将这些算法都写在对象中&#xff0c;将会使对象变得异常复杂&#xff1b;而且有时候支持不频繁使用的算法也是一个性能负担。 如何在运行时根据需要透明地更改对象的算…

MetaGeneMark:宏转录组转录本基因预测

GeneMark™ download 下载 gunzip gm_key_64.gz tar -xvzf MetaGeneMark_linux_64.tar.gz #查看安装 (完整路径)/gmhmmp #解压文件里面这个比较重要 MetaGeneMark_linux_64/mgm/MetaGeneMark_v1.mod #复制gm_key文件到主路径 mv gm_key_64 .gm_key cp .gm_key /home/zhongpei…

阿里云-防火墙设置不当导致ssh无法连接

今天学网络编程的时候&#xff0c;看见有陌生ip连接&#xff0c;所以打开了防火墙禁止除本机之外的其他ip连接&#xff1a; 但是当我再次用ssh的时候&#xff0c;连不上了才发现大事不妙。 折腾了半天&#xff0c;发现阿里云上可以在线向服务器发送命令&#xff0c;所以赶紧把2…