首页 > 其他分享 >HarmonyOS开发实战系列:网络连接绑定到应用规范-Web组件

HarmonyOS开发实战系列:网络连接绑定到应用规范-Web组件

时间:2024-07-04 20:27:55浏览次数:18  
标签:Web 鸿蒙 width 绑定 网络 HarmonyOS connection 网络连接 msgHistory

1. 网络类型简介

移动设备一般都具备移动网络和无线WIFI的连接能力,有些还可以接入有线以太网,这些网络可以根据需要随时切换。鸿蒙APP可以自动适应上述的网络,一般来说,会优先使用WIFI或者有线以太网,移动网络因为要收费,不会首选使用。但是在某些特殊情形下,可能要求必须使用某一种网络,比如必须使用蜂窝网络,这时候就需要显示的配置一下,指定app使用该网络类型。

2. Web组件及控制器常用方法

网络连接相关能力位于connection模块下,使用如下的方式导入:

import connection from '@ohos.net.connection'

connection模块包括了众多的操作方法,就本文而言,重点需要掌握的是如下四个:

1)getAllNets(): Promise<Array<NetHandle>>

获取所有处于连接状态的网络列表,使用Promise方式作为异步方法。

2)getConnectionProperties(netHandle: NetHandle): Promise<ConnectionProperties>

获取netHandle对应的网络的连接信息,使用Promise方式作为异步方法。

3)getNetCapabilities(netHandle: NetHandle): Promise<NetCapabilities>

获取netHandle对应的网络的能力信息,使用Promise方式作为异步方法。

4)setAppNet(netHandle: NetHandle): Promise<void>;

绑定App到指定网络,绑定后的App只能通过指定网络访问外网,使用Promise方式作为异步方法。

3. 获取网络连接信息并选择一种绑定到应用

本示例会列出所有激活中的网络,然后可以选择其中一种绑定到当前APP,最后可以通过访问指定的网页验证是否绑定成功,示例运行后的初始界面如下所示:

下面详细介绍创建该应用的步骤。

步骤1:创建Empty Ability项目。

步骤2:在module.json5配置文件加上对权限的声明:

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

这里添加了获取WIFI信息以及访问互联网的权限。

步骤3:在Index.ets文件里添加如下的代码:

import connection from '@ohos.net.connection';
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  //连接、通讯历史记录
  @State msgHistory: string = ''
  scroller: Scroller = new Scroller()
  //网络类型列表
  @State netShowArray: Array<SelectOption> = new Array<SelectOption>()
  //网络句柄数组
  netHandleArray: Array<connection.NetHandle> = new Array<connection.NetHandle>()
  //选中的网络序号
  selectNetIndx: number = 0
  //要测试的网址
  @State webUrl: string = "http://192.168.100.100:8080/index"
  //显示网页的控制器
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Row() {
      Column() {
        Text("绑定应用使用的网络")
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding(10)

        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
          Button("查看网络信息")
            .width(120)
            .fontSize(14)
            .flexGrow(0)
            .onClick(() => {
              this.ShowNetInfo()
            })

          Select(this.netShowArray)
            .width(100)
            .value("选择网络")
            .flexGrow(1)
            .onSelect((index, value) => {
              this.selectNetIndx = index
            })

          Button("绑定")
            .width(120)
            .fontSize(14)
            .flexGrow(0)
            .onClick(() => {
              connection.setAppNet(this.netHandleArray[this.selectNetIndx])
                .then(() => {
                  this.msgHistory += "绑定成功\r\n"
                })
                .catch((error) => {
                  this.msgHistory += "绑定出错" + error.message + "\r\n"
                })
            })
        }
        .width('100%')
        .padding(10)

        Scroll(this.scroller) {
          Text(this.msgHistory)
            .textAlign(TextAlign.Start)
            .fontSize(10)
            .padding(10)
            .width('100%')
            .backgroundColor(0xeeeeee)
        }
        .align(Alignment.Top)
        .backgroundColor(0xeeeeee)
        .height(200)
        .flexGrow(1)
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.On)
        .scrollBarWidth(20)

        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Text("网址:")
            .fontSize(14)
            .width(50)
            .flexGrow(0)

          TextInput({ text: this.webUrl })
            .onChange((value) => {
              this.webUrl = value
            })
            .width(110)
            .fontSize(11)
            .flexGrow(1)

          Button("加载")
            .onClick(() => {
              this.controller.loadUrl(this.webUrl);
            })
            .width(60)
            .fontSize(14)
            .flexGrow(0)
        }
        .width('100%')
        .padding(5)

        Web({ src: this.webUrl, controller: this.controller })
          .padding(10)
          .width('100%')
          .backgroundColor(0xeeeeee)
          .height(200)
          .flexGrow(1)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .height('100%')
    }
    .height('100%')
  }

  showConnectionPropInfo(connProp: connection.ConnectionProperties) {
    this.msgHistory += `网卡名称:${connProp.interfaceName}\r\n`
    for (let i = 0; i < connProp.dnses.length; i++) {
      this.msgHistory += `DNS${i}:${connProp.dnses[i].address}\r\n`
    }

    for (let i = 0; i < connProp.linkAddresses.length; i++) {
      this.msgHistory += `IP${i}:${connProp.linkAddresses[i].address.address}\r\n`
    }

    this.msgHistory += `mtu:${connProp.mtu}\r\n`
  }

  showNetCapInfo(connCap: connection.NetCapabilities) {

    let netType = ""
    if (connCap.bearerTypes[0].valueOf() == 0) {
      netType = "蜂窝网络"
    } else if (connCap.bearerTypes[0].valueOf() == 1) {
      netType = "Wi-Fi网络"
    }
    else if (connCap.bearerTypes[0].valueOf() == 3) {
      netType = "以太网网络"
    }
    //添加网络类型到下拉列表
    this.netShowArray.push({ value: netType })
    this.msgHistory += `网络类型:${netType}\r\n`
    this.msgHistory += `网络能力(kbps):${connCap.linkUpBandwidthKbps}/${connCap.linkDownBandwidthKbps}\r\n`
  }

  //显示网络信息
  async ShowNetInfo() {
    this.netHandleArray = await connection.getAllNets();
    this.msgHistory += `激活网络数量:${this.netHandleArray.length}\r\n\r\n`

    //清空下拉列表元素
    this.netShowArray.splice(0, this.netShowArray.length);

    for (let i = 0; i < this.netHandleArray.length; i++) {
      let connProp = await connection.getConnectionProperties(this.netHandleArray[i])
      this.showConnectionPropInfo(connProp)

      let connCap = await connection.getNetCapabilities(this.netHandleArray[i])
      this.showNetCapInfo(connCap)
      this.msgHistory += "\r\n"
    }
  }
}

步骤4:编译运行,最好使用真机。

步骤5:单击“查看网络信息”按钮,列出当前网络信息,截图如下所示:

步骤6:在“选择网络”选择网络类型,比如“蜂窝网络”,然后单击“绑定”按钮,如图所示:

这样就就绑定到了指定的网络。

步骤7:输入特定的网址,然后单击“加载”按钮既可测试当前绑定的网络。

3. 注意事项

笔者手机默认情况下只有一个激活的网络,可以在开发人员选项下选择“始终开启移动数据”,这样就可以列出多个网络,如图所示:


最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。 

点击领取→纯血版全套鸿蒙HarmonyOS学习资料希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取~

鸿蒙(HarmonyOS NEXT)最新学习路线

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

HarmonyOS Next 最新全套视频教程

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

大厂面试必问面试题

鸿蒙南向开发技术

鸿蒙APP开发必备


请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说,对于大家来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

标签:Web,鸿蒙,width,绑定,网络,HarmonyOS,connection,网络连接,msgHistory
From: https://blog.csdn.net/m0_70749039/article/details/140183907

相关文章

  • HarmonyOS开发实战系列:移动设备获取Wifi信息规范
     1.Wifi信息简介对于移动设备来说,一般都提供了无线网卡,可以在需要时连接无线网络,这时候就可以获取相关的无线网络信息,比如热点名称、连接频段、链接速度、IP地址、MAC地址等,鸿蒙系统提供了丰富的无线网络管理API,可以轻松获取相关WIFI信息。2. Wifi信息获取常用方法鸿蒙封......
  • webapi发布centos stream 8设置自动运行
    发布文件放到home下然后依次输入第一步:创建服务文件 首先,需要创建一个systemd服务文件。我们一般将这种服务文件放在/etc/systemd/system/目录下,并且给它一个.service后缀。例如,你可以创建一个名为wecharwebapi.service的文件。sudovi/etc/systemd/system/wecharwebapi......
  • 怎么把webp格式转换成jpg?5个图片格式转换方法全面解析(2024最新)
    webp 图片常用于网站,可显著改善页面的浏览和加载体验。然而,许多设备(如苹果手机设备、安卓手机等)不支持webp文件。在这些设备上查看webp文件时,最佳做法是将其转换为其他常见格式,如jpg或png。Windows电脑上有多种转换工具可把webp格式转换成jpg。本文将分享5种webp图片格式转换......
  • web学习笔记(七十五)
    目录1.小程序修改响应式数据1.1修改基本数据类型的值1.2修改复合数据类型的值2.发送请求3.小程序解决跨域问题 1.小程序修改响应式数据1.1修改基本数据类型的值在小程序中需要先将data中的数据拿过来并结构,才可以在this.setdata中修改数据,在页面中可以多次编写this......
  • net6 WebAPI大文件上传
    最近由于客户需要上传大文件,所以研究了一下文件上传的问题net6上传文件分为两种情况:buffering和streaming(缓存和流)Buffering:我们平时采用的通过IFormFile上传文件的方式就是Buffering,此方式会将文件全部缓存起来。这种方式简单,但对内存和硬盘空间造成负担。关于缓存,这里有个误......
  • web.py框架下的application.py模块 —— Python
    本文主要分析的是web.py库的application.py这个模块中的代码。总的来说,这个模块主要实现了WSGI兼容的接口,以便应用程序能够被WSGI应用服务器调用。WSGI是WebServerGatewayInterface的缩写,具体细节可以查看WSGI的WIKI页面接口的使用使用web.py自带的HTTPServer下面这个例......
  • 【web APIs】快速上手Day03(Dom事件进阶)
    目录WebAPIs-第3天全选文本框案例事件流事件捕获事件冒泡阻止冒泡解绑事件on事件方式解绑addEventListener方式解绑注意事项-鼠标经过事件的区别两种注册事件的区别事件委托综合案例-tab栏切换改造其他事件页面加载事件元素滚动事件页面滚动事件-获取位置页面滚动......
  • HTML5 WebSocket技术使用详解
    HTML5WebSocketAPI提供了一种在单个连接上进行全双工通信的方式。这意味着客户端和服务器可以同时发送和接收数据,而不需要像传统的HTTP请求那样进行多次请求和响应的轮询。WebSocket允许更实时的交互,非常适合需要快速、连续数据交换的应用场景,如在线游戏、实时通讯和股票行......
  • Python之Web框架Django
    官网https://www.djangoproject.com/download/安装djangopip安装django#查看python版本,版本显示如下Python3.12.1python3-V#安装djangopython3-mpipinstallDjango==5.0.6#查看django版本python3-mdjango--version通过Django包离线安装下载Django项目并......
  • 详解Web应用安全系列(7)使用具有已知漏洞的组件
    使用具有已知漏洞的组件,这种安全漏洞普遍存在,基于组件开发的模式使得多数开发团队根本不了解其应用或API中使用的组件,更谈不上及时更新这些组件了。下面就分别以.NET和Java各分享一个案例。.NET案例:XmlSerializer反序列化漏洞案例描述在.NET框架中,XmlSerializer类是一个常......