OpenHarmony-ArkUI（ETS）简单的WiFi连接操作

了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言WIFI是每个人的日常必需品。在OpenHarmony的开发过程中，系统提供了一系列完整的API。在万物互联的理念下，相信与wifi功能运行相关的需求会越来越多。今天要分享的是使用ets实现简单的wifi连接操作，可以扫描设备附近的wifi并连接，结合一些简单的按钮动画，让体验更流畅。项目描述本组件接口基于ArkUI中基于TS扩展的声明式开发范式构建。官网文档地址：DeclarativedevelopmentparadigmbasedonTSextension1,DeclarativedevelopmentparadigmbasedonTSextension2。工具版本：DevEcoStudio3.0Beta4SDK版本：3.2.2.5(APIVersion9Beta1)WiFi和WLAN简介Wi-Fi是指Wi-Fi联盟的商标，也是一种基于IEEE的无线网络通信技术802.11标准。提高基于IEEE802.11标准的无线网络产品之间的互操作性。WLAN的全称是WirelessLocalAreaNetwork。中文意思是无线局域网。如激光、红外线等），部分或全部替代有线局域网中传输介质所组成的网络；WLAN的狭义定义是基于IEEE802.11系列标准，使用高频无线射频（如2.4GHz或5GHz频段的无线电磁波）作为传输介质的无线局域网。简单来说，WLAN就是一个网络系统，而Wi-Fi就是这个网络系统中的一项技术。因此，WLAN与Wi-Fi存在包含关系，WLAN包含Wi-Fi。Wi-Fi的历史在了解Wi-Fi之前，我们先了解两个组织：电气电子工程师协会（InstituteofElectricalandElectronicsEngineers，简称IEEE）和Wi-Fi联盟（Wi-FiAlliance，缩写作为WFA）。作为标准组织，IEEE早在1990年就成立了802.11工作组，制定无线局域网的相关标准，并于1997年发布了第一个标准802.11-1997，之后每隔几年，802.11标准就会升级一次，至今已有6代。而另一个组织Wi-Fi联盟，其实是一个商业组织。该联盟成立的初衷是为了推动802.11b标准的制定，促进全球范围内符合IEEE802.11标准的产品的兼容性认证；到2000年，该组织采用“Wi-Fi”一词作为其技术工作的术语。专有名称，同时宣布使用Wi-FiAlliance作为正式名称，Wi-FiAlliance，“Wi-Fi”实际上是这个联盟的商标。那么“Wi-Fi”到底是什么意思呢？目前有两种说法：第一种认为Wi-Fi是指WirelessFidelity，类似于音频设备的分类：长期高保真或Hi-Fi（高保真）；另一种说法是，Wi-Fi没有特殊含义，也没有全名。目前还没有官方机构明确表示Wi-Fi是指WirelessFidelity。另外，很多时候“Wi-Fi”会被写成“WiFi”或“wifi”，这些实际上是不被Wi-Fi联盟认可的。主要功能点击扫描可用的wifi。输入密码以连接到所选的wifi。点击按钮生成连接的wifi密码二维码进行分享。效果展示wifiScan-example目录结构|----wifiScan-example|----src||----主要||--------ets|||----组件#组件||||----ImgDialog.ets#二维码弹窗组件||||----ItemView.ets#ListItem组件||||----PwdDialog.ets#密码输入弹出组件|||----pages#图书馆文件夹||||----index.ets#主界面|||----utils#工具类||||----Logger.ts#日志打印封装类相关权限获取WLAN信息权限：ohos.permission.GET_WIFI_INFO。获取WLAN网络信息权限：ohos.permission.GET_WIFI_INFO_INTERNAL。允许配置WLAN设备权限：ohos.permission.SET_WIFI_INFO。获取WLAN配置信息的权限：ohos.permission.GET_WIFI_CONFIG。允许配置WLAN配置权限：ohos.permission.SET_WIFI_CONFIG。控制WLAN连接状态的权限：ohos.permission.MANAGE_WIFI_CONNECTION。系统权限配置由于WIFI相关操作属于OpenHarmony系统的核心操作，因此相应的API不对普通权限的应用开放。因此，我们在使用这些API时，需要分别进行配置。如果没有配置，安装时会报权限错误。由于授予请求权限失败而失败。在config.json中添加相应的权限。这里是所有使用的权限。我这里列出了所有的权限，方便直接复制。未使用实际权限。大家可以根据自己的项目需求来选择。."reqPermissions":[{"name":"ohos.permission.GET_WIFI_INFO","reason":"请求权限"},{"name":"ohos.permission.GET_WIFI_INFO_INTERNAL","reason":"请求权限"},{"name":"ohos.permission.SET_WIFI_INFO","reason":"请求权限"},{"name":"ohos.permission.GET_WIFI_PEERS_MAC","reason":"请求权限"},{"name":"ohos.permission.GET_WIFI_LOCAL_MAC","reason":"请求权限"},{"name":"ohos.permission.GET_WIFI_CONFIG","reason":"请求权限"},{"name":"ohos.permission.SET_WIFI_CONFIG","reason":"请求权限"},{"name":"ohos.permission.MANAGE_WIFI_CONNECTION","reason":"请求权限"},{"name":"ohos.permission.MANAGE_WIFI_HOTSPOT","原因":"请求许可"},{"name":"ohos.permission.LOCATION","reason":"requestpermission"}]在SDK目录下toolchains\x.x.x.x\lib下找到UnsgnedReleasedProfileTemplate.json文件，用记事本打开，添加在里面Permissions（主要是添加权限级别为system_core的相关权限）,"ohos.permission.MANAGE_WIFI_CONNECTION","ohos.permission.MANAGE_WIFI_HOTSPOT"]保存修改后，使用DevEcoStudio的自动签名功能对应用重新签名即可正常安装。更多详细信息，请参考权限定义列表、访问控制开发概述。WiFi相关接口接口说明getScanInfos(callback:AsyncCallback>):void;扫描wificconnectToDevice（配置：WifiDeviceConfig）：布尔值；connectdeviceenableWifi():booleanturnonWLANdisableWifi():booleanturnoffWLANisWifiActive():booleanqueryWIFI能否使用getScanInfosSync():Array<[WifiScanInfo]获取扫描结果并同步返回结果addDeviceConfig(config:WifiDeviceConfig,callback:AsyncCallback):void添加网络配置，使用callback异步回调实现步骤1，首页使用Column+Scroll+List布局build(){Column(){Scroll(){List(){ForEach(this.wifiList,(item,index)=>{ListItem(){ItemView({wifi:item})}.onClick(()=>{Logger.info(TAG,'wificlick')this.selectIndex=indexthis.pswDialogController.open()})},item=>JSON.stringify(item))}.layoutWeight(1).divider({strokeWidth:1,color:Color.Gray,startMargin:10,endMargin:10}).margin(10)}}.height(600).width('90%').margin({top:30}).backgroundColor(Color.White).borderRadius(15)}.height('100%').margin({top:15,bottom:100}).backgroundColor("#A8A8A8")}2、扫描可用的WiFi.getScanInfos((err,result)=>{letwifiList=[]if(err){Logger.log(TAG,`scanerr:${JSON.stringify(err)}`)callback(wifiList)return}Logger.log(TAG,`scancallback:${result.length}}`)for(vari=0;i{this.passwd=value})Row(){Button(){Text($r('app.string.sure')).fontColor(Color.Blue).fontSize(17)}.layoutWeight(7).backgroundColor(Color.White).margin(5).onClick(()=>{this.controller.close()this.action(this.scanInfo,this.passwd)})Text().width(1).height(36).backgroundColor('#8F8F8F')Button(){Text($r('app.string.cancel')).fontColor(Color.Red).fontSize(18)}.layoutWeight(8).backgroundColor(Color.White).margin(5).onClick(()=>{这个.controller.close()})}.width('70%').margin({top:'2%'})}.padding(15)}4、连接选择中的WiFiconnectNetwork(scanInfo,psw){letdeviceConfig:any={ssid:scanInfo.ssid,bssid:scanInfo.bssid,preSharedKey:psw,isHiddenSsid:false,securityType:scanInfo.securityType}if(wifi.connectToDevice(deviceConfig)){prompt.showToast({message:'连接成功'})wifi.addDeviceConfig(deviceConfig)}else{prompt.showToast({message:'connectfail'})}}5、分享二维码弹窗build(){Column(){QRCode(this.passwd).width(150).height(this.height).margin({top:50}).color(Color.Green)Button(){Text($r('app.string.cancel')).fontColor(Color.红色).fontSize(18)}.backgroundColor(Color.White).margin(20).onClick(()=>{this.controller.close()})}.width('80%').alignItems(HorizontalAlign.Center)}附：按钮动画代码和二维码privateanimateStart(){animateTo({duration:110,tempo:1,curve:Curve.Sharp,delay:50,iterations:1,playMode:PlayMode.Normal,onFinish:()=>{}},()=>{this.height=150;});}privateanimateEnd(){animateTo({duration:300,tempo:1,curve:Curve.Linear,delay:200,iterations:1,playMode:PlayMode.Normal,onFinish:()=>{this.wifiModel.getScanInfos((result)=>{this.wifiList=result})this.scanWifi='扫描WIFI';}},()=>{this.btnWidth=120;this.btnHeight=120;this.borderRadius=15;});}项目源码OpenHarmony-ArkUI(ETS)WiFi简单连接操作总结以上就是本次的全部内容，最终效果如动画所示。整个布局界面非常简单，但是可以实现WIFI连接的基本功能。其实WIFI功能提供的API还有很多可以扩展的地方。以后会继续研究，希望能进一步完善这个功能。写一个更漂亮流畅的例子。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。