鸿蒙系统开发【分布式协同框架-服务互通】网络

爱桥代码的程序媛

于 2024-08-01 20:53:24 发布

阅读量1.2k

点赞数 35

分类专栏：鸿蒙文章标签： harmonyos 分布式 openharmony 鸿蒙系统鸿蒙网络协同框架

本文链接：https://blog.csdn.net/2301_76813281/article/details/140856934

版权

鸿蒙专栏收录该内容

435 篇文章 7 订阅

订阅专栏

分布式协同框架-服务互通

介绍

本示例展示了使用分布式协同框架提供的服务互通的能力。

本示例模拟了在备忘录的应用里，唤起另一个设备的拍照应用，并将拍照的结果传回给备忘录。

同时您也可以使用服务互通中的文档扫描和图库能力，实现跨端操作。

需要使用协同框架服务互通接口@kit.ServiceCollaborationKit。

效果预览

使用说明

前置步骤：
- 准备一台2in1(或平板)和一台手机，2in1(或平板)安装此示例，手机安装具有跨端拍照能力的相机应用。
- 在设置里面，两台设备登录相同的huawei账号。
在2in1(或平板)的主屏幕，点击“备忘录Mock”，启动应用，在主界面可见“使用远端设备插入图片”按钮。
点击“使用远端设备插入图片”按钮，弹出菜单，在菜单里会列出可用的具有拍照能力的远端设备：手机。
点击相应设备的"拍照"按钮，就会唤起手机的相机应用。
在手机进行拍照，然后选择确认，照片就会回传到2in1类设备上并显示在应用的界面上。

具体实现

本示例展示的控件在@hms.collaboration.service.d.ets定义了跨端拍照生态API：

createCollaborationServiceMenuItems(businessFilter?: Array)
CollaborationServiceStateDialog(onState: (stateCode: number, bufferType: string, buffer: ArrayBuffer))

业务使用时，需要先进行import导入CollaborationServiceStateDialog, createCollaborationServiceMenuItems与CollaborationServiceFilter。在自定义的Menu控件内创建跨端拍照的菜单项，并在全局范围内声明对话框，并声明自己的照片接收处理回调。

    /*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {
  createCollaborationServiceMenuItems,
  CollaborationServiceStateDialog,
  CollaborationServiceFilter
} from '@kit.ServiceCollaborationKit';
import { image } from '@kit.ImageKit';
import { CommonConstants } from '../constants/CommonConstants';
import Logger from '../utils/Logger';

@Entry
@Component
struct Index {
  @State picture: PixelMap | undefined = undefined;

  @Builder
  myTestMenu() {
    Menu() {
      createCollaborationServiceMenuItems([CollaborationServiceFilter.ALL])
    }
  }

  build() {
    Column({ space: CommonConstants.COLUMN_SPACE }) {
      CollaborationServiceStateDialog({
        onState: (stateCode: number, bufferType: string, buffer: ArrayBuffer): void =>
          this.doInsertPicture(stateCode, bufferType, buffer)
      })
      Button($r('app.string.photo_with_remote_device'))
        .type(ButtonType.Normal)
        .borderRadius($r('app.float.button_border_radius'))
        .bindMenu(this.myTestMenu)

      if (this.picture) {
        Image(this.picture)
          .borderStyle(BorderStyle.Dotted)
          .borderWidth($r('app.float.image_border_width'))
          .objectFit(ImageFit.Contain)
          .height(CommonConstants.IMAGE_HEIGHT_PERCENT)
          .onComplete((event) => {
            if (event !== undefined) {
              Logger.info('MEMO MOCK', 'onComplete ' + event.loadingStatus);
            }
          })
      }
    }
    .padding($r('app.float.column_padding'))
    .width(CommonConstants.FULL_WIDTH_PERCENT)
    .alignItems(HorizontalAlign.Center)
  }

  doInsertPicture(stateCode: number, bufferType: string, buffer: ArrayBuffer): void {
    if (stateCode !== 0) {
      return;
    }
    if (bufferType === 'general.image') {
      let imageSource = image.createImageSource(buffer);
      imageSource.createPixelMap().then((pixelMap) => {
        this.picture = pixelMap;
      })
    }
  }
}

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：