OpenHarmony实战开发-

最新推荐文章于 2024-06-13 13:55:32 发布
最新推荐文章于 2024-06-13 13:55:32 发布
阅读量968 收藏 10
点赞数 10
分类专栏： 鸿蒙 HarmonyOS 鸿蒙工程师 文章标签： harmonyos OpenHarmony 华为 鸿蒙 鸿蒙应用开发 鸿蒙系统 HarmonyOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82546228/article/details/139185228
版权
鸿蒙 同时被 3 个专栏收录
567 篇文章 1 订阅
订阅专栏
鸿蒙工程师
567 篇文章 4 订阅
订阅专栏
HarmonyOS
555 篇文章 0 订阅
订阅专栏

场景说明

对可用的WLAN列表进行扫描，连接、断开WLAN网络是设备常见的功能，本例将为大家介绍如何实现上述功能。

效果呈现

本例效果如下：

扫描WLAN 连接WLAN 断开WLAN contactlist contactlist contactlist

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发。

  • IDE：DevEco Studio 4.0.0.201 Beta1
  • SDK：Ohos_sdk_public 4.0.7.5 (APIVersion 10 Beta1)

实现思路
本例主要通过@ohos.wifiManager 相关API实现WLAN激活和关闭、扫描和连接WLAN等功能。

  • WLAN功能的激活和关闭：点击首页的切换按钮，如果是打开，使用wifi.enableWifi()开启WLAN功能；如果是关闭，则使用wifi.disconnect()断开WLAN功能，然后使用wifi.disableWifi()关闭WLAN。
  • WLAN的连接：点击WLAN列表中加密的WLAN，并在弹窗中输入密码后，会在AvailableWifi.ets中通过WifiModule.connectNetwork()调用wifi.connectToDevice()连接WLAN。
  • WLAN的扫描：进入Index.ets后就会间歇性的调用wifi.scan()开启扫描，然后通过WifiModel模块中的getScanInfos()调用wifi.getScanResults()来获取扫描的结果.

开发步骤

1.申请所需权限

在model.json5中添加以下配置：

"requestPermissions": [
  {
    "name": "ohos.permission.GET_WIFI_INFO"//允许应用获取WLAN信息
  },
  {
    "name": "ohos.permission.GET_WIFI_INFO_INTERNAL"//允许应用获取WLAN信息
  },
  {
    "name": "ohos.permission.SET_WIFI_INFO"//允许应用配置WLAN设备
  },
  {
    "name": "ohos.permission.GET_WIFI_PEERS_MAC"//允许应用获取对端WLAN或者蓝牙设备的MAC地址
  },
  {
    "name": "ohos.permission.GET_WIFI_LOCAL_MAC"//允许应用获取本机WLAN或者蓝牙设备的MAC地址
  },
  {
    "name": "ohos.permission.GET_WIFI_CONFIG"//允许应用获取WLAN配置信息
  },
  {
    "name": "ohos.permission.SET_WIFI_CONFIG"//允许应用配置WLAN信息
  },
  {
    "name": "ohos.permission.MANAGE_WIFI_CONNECTION"//允许应用管理WLAN连接
  },
  {
    "name": "ohos.permission.MANAGE_WIFI_HOTSPOT"//允许应用开启或者关闭WLAN热点
  },
  {
    "name": "ohos.permission.LOCATION"//允许应用获取设备位置信息
  },
  {
    "name": "ohos.permission.APPROXIMATELY_LOCATION"//允许应用获取设备模糊位置信息
  }
]

2.准备工作

定义boolean变量isSwitchOn作为WLAN开关是否打开的标志。

import wifi from '@ohos.wifiManager'
aboutToAppear() {
    // 如果WLAN是开的，就记录下状态，然后扫描WLAN，并获取连接信息
    if (wifi.isWifiActive()) {//查询WLAN是否已使能
      Logger.log(TAG, 'wifi is active')
      this.isSwitchOn = true//已使能说明WLAN开关已被打开，那么让isSwitchOn为true
      wifi.scan()//@ohos.wifiManager的接口，对WLAN进行扫描
      this.scan()//自定义的scan函数，确保扫描的持续性
      this.getLinkedInfo()
    }
    // 启动监听
    this.addListener()//监听连接状态的变化
  }

3.持续地扫描可用WLAN

scan方法不断地自我调用以实现对WLAN的不停扫描。

async getLinkedInfo() {
    try {
      //调用getLinkedInfo接口得到是否已连接WLAN的信息 
      let wifiLinkedInfo = await wifi.getLinkedInfo()
      if (wifiLinkedInfo === null || wifiLinkedInfo.bssid === '') {
          //如果结果为空，则说明未连接
        this.isLinked = false
        this.linkedInfo = null
        return
      }
      this.isLinked = true
      this.linkedInfo = wifiLinkedInfo
    } catch (err) {
      Logger.info(`getLinkedInfo failed err is ${JSON.stringify(err)}`)
    }
  }
async scan() {
    // 获取有关WLAN连接的信息,存入linkedInfo
    await this.getLinkedInfo()
    // 不停地扫描WLAN
    let result: Array<WifiType> = await this.wifiModel.getScanInfos()//调用model/WifiModel.ets中的getScanInfos得到扫描结果
    if (this.isSwitchOn) {
        //如果WLAN功能已打开，则要进行不停地扫描
      AppStorage.SetOrCreate('wifiList', result)//将扫描结果存至全局
        //每3000毫秒调用一次scan()，实现不停扫描可用WLAN
      setTimeout(async () => {
        await this.scan()
      }, 3000)
    }
  }
addListener() {
    // WLAN连接状态改变事件发生时，修改连接信息
    wifi.on('wifiConnectionChange', async state => {
      Logger.log(TAG, `wifiConnectionChange: ${state}`)
      await this.getLinkedInfo()//WLAN连接状态改变，重新获取WLAN连接信息
    })
    // WLAN状态改变时，先清空WLAN列表，然后判断是否是开启状态，如果是就扫描
    wifi.on('wifiStateChange', state => {
      Logger.log(TAG, `wifiStateLisener state: ${state}`)
      AppStorage.SetOrCreate('wifiList', [])
      if (state === 1) { // 1: wifi is enable, 0:wifi is disable
        this.scan()
      }
    })
  }
...
//model/WifiModel.ets
async getScanInfos(): Promise<Array<WifiType>> {
    Logger.log(TAG, 'scanWifi begin')
    let wifiList: Array<WifiType> = []
    let result: Array<wifi.WifiScanInfo> = []
    try {
      result = await wifi.getScanResults()//因为在abouttoappear()中执行了wifi.scan()，所以这里直接调用getScanResults接口得到扫描结果
    } catch (err) {
      Logger.log(TAG, `scan info err: ${JSON.stringify(err)}`)
      return wifiList
    }
    Logger.log(TAG, `scan info call back: ${result.length}`)
    for (var i = 0; i < result.length; ++i) {
      wifiList.push({
        ssid: result[i].ssid,
        bssid: result[i].bssid,
        securityType: result[i].securityType,
        rssi: result[i].rssi,
        band: result[i].band,
        frequency: result[i].frequency,
        timestamp: result[i].timestamp
      })
    }
    return wifiList
  }

4.构建UI框架、通过关闭按钮实现断开WLAN连接。

TitleBar组件呈现了标题框。WLAN开关按钮由一个Toggle组件呈现，其绑定的onChange事件在按钮被打开时开始扫描可用WLAN，在被关闭时断开当前连接WLAN并且关闭WLAN功能。当前已连接的WLAN由两个Text组件分别显示其ssid与连接状态。

build() {
    Column() {
      TitleBar()//引入自component/TitleBar.ets，负责标题框的具体呈现
      Row() {
        Text($r('app.string.wlan'))
          .fontSize(22)
          .fontWeight(FontWeight.Bold)
          .height(40)
        Column() {
          Toggle({ type: ToggleType.Switch, isOn: this.isSwitchOn })//切换按钮
            .id('switch')
            .onChange((isOn: boolean) => {
              Logger.log(`LSQ: wifi swtich is: ${isOn}`)
              AppStorage.SetOrCreate('wifiList', [])
              try {
                // 如果按钮被打开了，记录状态，打开网络，开始扫描可用WLAN
                if (isOn) {
                  this.isSwitchOn = true
                  wifi.enableWifi()//使WLAN功能可用
                  return
                } else {
                  // 如果按钮被关闭了记录状态，断开网络禁用网络
                  this.isSwitchOn = false
                  this.isLinked = false
                  wifi.disconnect()//断开当前WLAN连接
                  wifi.disableWifi()//使WLAN功能不可用
                }
              } catch (error) {
                Logger.error(TAG, `failed,code:${JSON.stringify(error.code)},message:${JSON.stringify(error.message)}`)
              }
            })
        }
      }
      .width('100%')
      .padding({ left: 16, right: 16 })
      if (this.isLinked && this.isSwitchOn) {
          //如果当前按钮处于打开状态，且WLAN是已连接状态
        Column() {
          Text($r('app.string.connected'))
            .fontSize(22)
            .width('100%')
          Row() {
            Text(this.linkedInfo.ssid)//展示当前已连接的WLAN
              .fontSize(20)
              .fontColor(Color.Black)
              .layoutWeight(1)
            Text($r('app.string.connected'))
              .fontSize(18)
              .fontColor(Color.Black)
          }
          .width('100%')
          .padding(10)
          .margin({ left: 16, right: 16 })
          .border({ radius: 15, color: Color.Gray, width: 1 })
          .backgroundColor(Color.White)
        }
        .width('100%')
        .padding({ left: 16, right: 16 })
      }
      if (this.isSwitchOn) {
          //如果按钮处于打开状态，展示所有可用WLAN
        AvailableWifi({ linkedInfo: this.linkedInfo })//AvailableWifi引入自component/AvailableWifi.ets
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_bg'))
  }

5.展示可用WLAN列表及WLAN的连接。

使用List组件呈现可用WLAN列表，ListItem由一个呈现WLANssid的Text组件，一个表示其是否被加密的Text组件和一个展示其加密与否图像的Image组件组成。

//component/AvailableWifi.ets
build() {
    List() {
      ListItem() {
        Row() {
          Text($r('app.string.available_wlan'))
            .fontSize(22)
            .layoutWeight(1)
        }
        .id('validWlan')
        .width('100%')
      }
		//通过数据懒加载的方式从数据源中每次迭代一个可用WLAN进行展示，可用列表被放置在滚动容器中，被划出可视区域外的资源会被回收
      LazyForEach(this.wifiDataResource, (item, index) => {
        ListItem() {
          WifiView({ wifi: item })//WifiView引入自Component/WifiView.ets，负责可用WLAN信息展示的具体实现
        }
        .id(`Wifi${index}`)
        //对可用WLAN点击时触发事件
        .onClick(() => {
          Logger.info(TAG, 'wifi click')
          this.scanInfo = item
          if (this.linkedInfo !== null && item.ssid === this.linkedInfo.ssid) {
            prompt.showToast({ message: 'this wifi is connected' })//如果当前已连接WLAN并且点击的就是这个WLAN，创建并显示文本提示框
            return
          }
          if (item.securityType === 0 || item.securityType === 1) {
            //如果点击的这个WLAN的加密类型是无效加密类型或者开放加密类型，调用model/Wifimodel.ets中的connectNetwork方法连接此WLAN
            this.wifiModel.connectNetwork(item, '')
            return
          }
          //如果点击的这个WLAN的加密类型是其他加密类型，则需要输入密码，调用component/PswDialog.ets中的方法进行弹窗的生成
          this.pswDialogController.open()
        })
      }, item => JSON.stringify(item))
    }
    .width('100%')
    .height('100%')
    .padding({ left: 16, right: 16 })
    .layoutWeight(1)
    .divider({ strokeWidth: 1, color: Color.Gray, startMargin: 10, endMargin: 10 })
    .margin({ top: 10 })
  }
//pswDialogController回调的action函数，将传回的WLAN信息与密码传入model/Wifimodel.ets中的connectNetwork方法中
onAccept(scanInfo, psw) {
    Logger.info(TAG, 'connect wifi')
    self.wifiModel.connectNetwork(scanInfo, psw)
  }
...
//Component/WifiView.ets
aboutToAppear() {
    Logger.debug(TAG, `aboutToAppear ${JSON.stringify(this.wifi)}`)
    if (this.wifi) {
      if (this.wifi.securityType) {
        if (this.wifi.securityType === 0 || this.wifi.securityType === 1) {
            //WLAN的加密类型是无效加密类型或者开放加密类型
          this.securityString = $r('app.string.open')
          this.isLock = false
        }
      }
    }
  }
build() {
    Row() {
      Column() {
        if (this.wifi) {
          if (this.wifi.ssid) {
            Text(this.wifi.ssid)
              .fontSize(20)
              .width('100%')
          }
        }
          //如果WLAN的加密类型是无效加密类型或者开放加密类型，显示“开放”，反之显示“加密”
        Text(this.securityString)
          .fontSize(18)
          .fontColor(Color.Gray)
          .width('100%')
      }
      .layoutWeight(1)

      Stack({ alignContent: Alignment.BottomEnd }) {
          //如果WLAN的加密类型是无效加密类型或者开放加密类型，显示不带锁的图标，反之显示带锁的图标
        Image($r('app.media.wifi'))
          .height(30)
          .width(30)
          .objectFit(ImageFit.Contain)
        if (this.isLock) {
          Image($r('app.media.lock'))
            .objectFit(ImageFit.Contain)
            .width(15)
            .height(15)
        }
      }
      .width(40)
      .height(40)
      .margin({ right: 10 })
    }
    .backgroundColor(Color.White)
    .width('100%')
    .padding(10)
  }
}
...
//model/Wifimodel.ets
connectNetwork(scanInfo: wifi.WifiScanInfo, psw) {
    prompt.showToast({ message: 'connecting', duration: 5000 })
    Logger.debug(TAG, `connectNetwork bssid=${scanInfo.bssid}`)
    // 这里因为api问题，需要声明为any，已提单
    let deviceConfig: any = {
      ssid: scanInfo.ssid,
      bssid: scanInfo.bssid,
      preSharedKey: psw,
      isHiddenSsid: false,
      securityType: scanInfo.securityType
    }
    try {
      wifi.connectToDevice(deviceConfig)//连接到指定网络
      Logger.debug(TAG, `connectToDevice success`)
    } catch (err) {
      Logger.debug(TAG, `connectToDevice fail err is ${JSON.stringify(err)}`)
    }
    try {
      wifi.addDeviceConfig(deviceConfig)//添加网络配置
    } catch (err) {
      Logger.debug(TAG, `addDeviceConfig fail err is ${JSON.stringify(err)}`)
    }
  }
...
//component/PswDialog.ets
 build() {
    Column() {
      Text(this.scanInfo.ssid)
        .fontSize(20)
        .width('95%')

      TextInput({ placeholder: 'input password' })//密码的输入框
        .id('input')
        .type(InputType.Password)
        .placeholderColor(Color.Gray)
        .fontSize(19)
        .margin({ top: 15 })
        .width('95%')
        .height(36)
        //每当输入框中的内容变化，它就赋值给psw
        .onChange((value: string) => {
          this.psw = value
        })

      Row() {
         //确认按钮
        Button() {
          Text($r('app.string.sure'))
            .fontColor(Color.Blue)
            .fontSize(17)
        }
        .id('sure')
        .layoutWeight(7)
        .backgroundColor(Color.White)
        .margin(5)
        .onClick(() => {
          this.controller.close()
          this.action(this.scanInfo, this.psw)
        })

        Text()
          .width(1)
          .height(35)
          .backgroundColor($r('app.color.text_color'))
		//取消按钮
        Button() {
          Text($r('app.string.cancel'))
            .fontColor(Color.Red)
            .fontSize(17)
        }
        .layoutWeight(7)
        .backgroundColor(Color.White)
        .margin(5)
        .onClick(() => {
          this.controller.close()
        })
      }
      .width('100%')
      .margin({ top: '3%' })
    }
    .padding(15)
  }

全部代码

本例完整代码sample示例链接：WLAN

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

码牛程序猿
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本...
openharmony-docker-master.zip
03-23
OpenHarmony_Docker 则是针对 OpenHarmony 项目在编译时面临的环境不统一的情况而使用 Docker 来对其进行容器化编译的一个项目
Unity 工具 之 获取 OpenWeatherMap 的天气（可以获取国内外的天气）的简单封装
仙魁XAN
09-16 7459
Unity 工具 之 获取 OpenWeatherMap 的天气（可以获取国内外的天气）的简单封装 目录 Unity 工具 之 获取 OpenWeatherMap 的天气（可以获取国内外的天气）的简单封装 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、申请 OpenWeatherMap 账号，获得 API Key 六、实现步骤 七、关键代码 一、简单介绍 Unity中的一些基础知识点。 本节介绍，在 Unity 中，简单实现使用 OpenWe...
OpenHarmony实战开发-list开发指导
m0_70749039的博客
04-29 553
list是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。
OpenHarmony实战开发-分布式数据管理
2401_82546228的博客
04-02 1012
本示例展示了在eTS中分布式数据管理的使用，包括KVManager对象实例的创建和KVStore数据流转的使用。
OpenHarmony实战开发-窗口开发概述
m0_70749039的博客
05-06 774
窗口模块用于在同一块物理屏幕上，提供多个应用界面显示、交互的机制。
OpenHarmony实战开发-NDK开发导读
m0_70749039的博客
05-20 999
NDK（Native Development Kit）是OpenHarmony SDK提供的Native API、相应编译脚本和编译工具链的集合，方便开发者使用C或C++语言实现应用的关键功能。NDK只覆盖了OpenHarmony一些基础的底层能力，如C运行时基础库libc、图形库、窗口系统、多媒体、压缩库、面向ArkTS/JS与C跨语言的Node-API等，并没有提供ArkTS/JS API的完整能力。
OpenHarmony实战开发-手势事件
m0_70749039的博客
04-29 746
手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。支持的事件有：
OpenHarmony实战开发-合理处理高负载组件的渲染。
2401_82546228的博客
04-22 812
在应用开发中，有的页面需要加载大量的数据，就会导致组件数量较多或者嵌套层级较深，从而引起组件负载加重，绘制耗时增长，如果不进行合理的处理，可能引起卡顿掉帧等性能问题。
OpenHarmony实战开发-如何实现出现/消失转场
2401_82546228的博客
04-27 324
transition是基础的组件转场接口，用于实现一个组件出现或者消失时的动画效果。可以通过TransitionEffect的组合使用，定义出各式效果。
OpenHarmony实战开发-一次开发，多端部署、简介
m0_70749039的博客
05-17 790
随着终端设备形态日益多样化，分布式技术逐渐打破单一硬件边界，一个应用或服务，可以在不同的硬件设备之间随意调用、互助共享，让用户享受无缝的全场景体验。而作为应用开发者，广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容，则需要适配不同的屏幕尺寸和硬件，开发成本较高。OpenHarmony系统面向多终端提供了“一次开发，多端部署”（后文中简称为“一多”）的能力，让开发者可以基于一种设计，高效构建多端可运行的应用。
OpenHarmony（ohcommandline-tools-windows-2.0.0.2.zip）
11-08
Command Line Tools for OpenHarmony（ohcommandline-tools-windows-2.0.0.2.zip）
OpenHarmony（ohcommandline-tools-mac-2.0.0.2.zip）
11-08
Command Line Tools for OpenHarmony（ohcommandline-tools-mac-2.0.0.2.zip）
OpenHarmony（ohcommandline-tools-linux-2.0.0.2.zip）
11-08
Command Line Tools for OpenHarmony（ohcommandline-tools-linux-2.0.0.2.zip）
【HarmonyOS】鸿蒙应用模块化实现
我的小窝
06-10 924
鸿蒙应用模块化实现
HarmonyOS(33) @LocalStorageProp使用指南
菜鸟博客
06-12 366
HarmonyOS @LocalStorageProp使用指南
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现（五）
pixle的博客
06-11 646
HarmonyOS Next（基于API11）实现从手机选择图片或拍照上传功能，常用于头像上传等操作
HarmonyOS(35) @State使用注意事项
最新发布
菜鸟博客
06-13 293
HarmonyOS @State使用注意事项
OpenHarmony-3.2-Beta2官方文档地址
06-09
OpenHarmony-3.2-Beta2的官方文档地址是https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start.md，你可以在这里查找和获取OpenHarmony-3.2-Beta2的相关文档和资料。希望这个信息对你有所...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值