鸿蒙（OpenHarmony）开发实战：WiFi扫码自动配网

背景

随着移动互联网的发展,WiFi已成为人们生活中不可或缺的网络接入方式。但在连接WiFi时,用户常需要手动输入一个复杂的密钥,这带来了一定的不便。针对这一痛点,利用QR码连接WiFi的方案应运而生。QR码连接WiFi的工作流程是:商家或公共场所提供含有WiFi密钥的QR码,用户只需使用手机扫一扫即可读取密钥信息并连接WiFi,无需手动输入，这种连接方式大大简化了用户的操作。随着智能手机摄像头识别能力的提升,以及用户需求的引领,利用QR码连接WiFi的方式未来还将得到更广泛的应用,为用户提供更稳定便捷的上网体验。它利用了移动互联网时代的技术优势,解决了传统WiFi连接中的痛点,是一种值得推广的网络连接方式。

效果

页面截图

配网连接中	配网连接成功	配网连接失败

优势

使用QR码连接WiFi具有以下优势:

1. 提高了连接成功率,避免因手动输入密钥错误导致的连接失败问题。

2. 加快了连接速度,扫码相对于手动输入更高效方便。

3. 提升了用户体验,无需记忆和输入复杂密钥,操作更人性化。

4. 方便密钥分享和更改,通过更新QR码即可实现。

5. 在一些需要频繁连接不同WiFi的场景下尤其便利,如酒店、餐厅、机场等。

6. 一些App可以自动识别WiFi二维码,实现零点击连接。

开发与实现

开发环境

开发平台：windows10、DevEco Studio 3.1 Release 

系统：OpenHarmony 3.2 Release，API9(Full SDK 3.2.11.9) 

设备：SD100（工业平板设备、平台：RK3568、屏幕像素：1920 * 1200）

项目开发

▍需求分析

1、支持相机扫码，并可以解析二维码信息；

2、获取二维码中的wifi连接信息，自动完成网络连接；

3、网络连接成功，则提示用户成功；

4、网络连接失败，则提示用户失败，可以重新连接；

5、UI界面符合OpenHarmony设计原则，应用界面简洁高效、自然流畅。

▍项目流程图

▍界面

说明：从需求上分析，可以有两个界面，一是扫码界面、二是wifi连接等待和显示结果界面。

▍详细开发

一、创建项目

说明：通过DevEco Studio创建一个OpenHarmony的项目。

二、申请权限

说明：在应用中涉及到使用相机和wifi的操作，需要动态申请一些必要的权限，我们可以在 EntryAbility.ts中实现，EntryAbility.ts继承UIAbility，用于管理应用的生面周期，在OnCreate是实例冷启动时触发，在此函数中实现权限申请。具体代码如下：

let permissionList: Array<Permissions> = [
  "ohos.permission.GET_WIFI_INFO",
  "ohos.permission.INTERNET",
  'ohos.permission.CAMERA',
  'ohos.permission.READ_MEDIA',
  'ohos.permission.WRITE_MEDIA',
  'ohos.permission.MEDIA_LOCATION',
  'ohos.permission.LOCATION',
  'ohos.permission.APPROXIMATELY_LOCATION'
]

onCreate(want, launchParam) {
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  this.requestPermissions()
}

private requestPermissions() {
  let AtManager = abilityAccessCtrl.createAtManager()
  AtManager.requestPermissionsFromUser(this.context, permissionList).then(async (data) => {
    Logger.info(`${TAG} data permissions: ${JSON.stringify(data.permissions)}`)
    Logger.info(`${TAG} data authResult: ${JSON.stringify(data.authResults)}`)
    // 判断授权是否完成
    let resultCount: number = 0
    for (let result of data.authResults) {
      if (result === 0) {
        resultCount += 1
      }
    }
    let permissionResult : boolean = false
    if (resultCount === permissionList.length) {
      permissionResult = true
    }
    AppStorage.SetOrCreate(KEY_IS_PERMISSION, true)
    this.sendPermissionResult(permissionResult)
  })
}

sendPermissionResult(result : boolean) {
  let eventData: emitter.EventData = {
    data: {
      "result": result
    }
  };

  let innerEvent: emitter.InnerEvent = {
    eventId: EVENT_PERMISSION_ID,
    priority: emitter.EventPriority.HIGH
  };

  emitter.emit(innerEvent, eventData);
  Logger.info(`${TAG} sendPermissionResult`)
}

onDestroy() {
  Logger.info(`${TAG} onDestroy`)
  emitter.off(EVENT_PERMISSION_ID)
}

代码解析

1、在应用中使用到相机和操作wifi需要根据需要动态申请相关权限，具体的权限用途可以查看：应用权限列表

2、应用动态授权需要使用到@ohos.abilityAccessCtrl (程序访问控制管理)，通过abilityAccessCtrl.createAtManager()获取到访问控制对象 AtManager。

3、通过AtManager.requestPermissionsFromUser() 拉起请求用户授权弹窗，由用户动态授权。

4、授权成功后通过Emitter（@ohos.events.emitter）向主界面发送授权结果。

5、在onDestroy()应用退出函数中取消Emitter事件订阅。

三、首页

说明：首页即为扫码页面，用于识别二维码获取二维码信息，为网络连接准备。所以此页面有有个功能，加载相机和识别二维码。

媒体相机

相机的启动借鉴社区提供的代码案例：二维码扫码

• 相机功能在CameraServices中，源码参考CameraServices.ets

• 获取相机实例使用到媒体相机接口@ohos.multimedia.camera (相机管理)。

• 首先使用camera.getCameraManager方法获取相机管理器，然后使用cameraManager.getSupportedCameras方法得到设备列表, 这里默认点亮列表中的首个相机；

• 打开相机：使用 cameraManager.createCameraInput方法创建CameraInput实例，调用open方法打开相机；

• 获取相机输出流：使用getSupportedOutputCapability查询相机设备在模式下支持的输出能力，然后使用createPreviewOutput创建相机输出流。

• 获取拍照输出流，使用@ohos.multimedia.image接口的 createImageReceiver 方法创建ImageReceiver实例，并通过其getReceivingS_urfaceId()获取S_urfaceId，通过CameraManager.createPhotoOutput()函数构建拍照输出流，并将imageReceive 的 S_urfaceId与其建立绑定关系。

• 获取相片输出：首先使用createCaptureSession方法创建捕获会话的实例，然后使用beginConfig方法配置会话，接下来使用addInput方法添加一个摄像头输入流，使用addOutput添加一个摄像头和相机照片的输出流，使用commitConfig方法提交会话配置后，调用会话的start方法开始捕获相片输出。

• 这里也可以使用相机预览流获取图像数据，但在界面上需要预览，所以这里需要构建两条预览流，一条预览流用于显示，在XComponent组件中渲染，另外一条预览流用于获取头像数据用于解析，根据实践发现，开启两条预览流后，相机帧率为：7fsp，表现为预览卡顿，所以为提升预览效果，使用定时拍照的方式获取图像数据。

• 获取图像的在SaveCameraAsset.ets中实现，扫码页面启动后每间隔1.5s调用PhotoOutput.capture()实现拍照，通过imageReceiver.on('imageArrival')接收图片，使用imageReceiver.readNextImage()获取图像对象，通过Image.getComponent()获取图像缓存数据。

具体实现代码：

CameraService

import camera from '@ohos.multimedia.camera';
import image from '@ohos.multimedia.image';
import SaveCameraAsset from './SaveCameraAsset'
import { QRCodeScanConst, SCAN_TYPE } from './QRCodeScanConst'
import { Logger } from '@ohos/common'
import common from '@ohos.app.ability.common'
let TAG: string = 'CameraService'
/**
 * 拍照保存图片回调
 */
export interface FunctionCallBack {
  onCaptureSuccess(thumbnail: image.PixelMap, resourceUri: string): void
  onCaptureFailure(): void
  onRecordSuccess(thumbnail: image.PixelMap): void
  onRecordFailure(): void
  /**
   * 缩略图
   */
  thumbnail(thumbnail: image.PixelMap): void
  /**
   * AI 识别结果
   * @param result 识别结果
   */
  aiResult(result: string): void
}
export interface PreviewCallBack {
  onFrameStart()
  onFrameEnd()
}
export interface MetaDataCallBack {
  onRect(rect: camera.Rect)
}
export default class CameraService {
  private static instance: CameraService = null
  private mCameraManager: camera.CameraManager = null
  private mCameraCount: number = 0 // 相机总数
  private mCameraMap: Map<string, Array<camera.CameraDevice>> = new Map()
  private mCurCameraDevice: camera.CameraDevice = null
  private mCameraInput: camera.CameraInput = null
  private mPreviewOutput: camera.PreviewOutput = null
  private mPreviewOutputByImage: camera.PreviewOutput = null
  private mPhotoOutput: camera.PhotoOutput = null
  private mSaveCameraAsset: SaveCameraAsset = new SaveCameraAsset()
  private mCaptureSession: camera.CaptureSession
  private mMetadataOutput: camera.MetadataOutput
  private constructor() {
  }
  /**
   * 单例
   */
  public static getInstance(): CameraServic