【HarmonyOS应用开发】鸿蒙碰一碰分享开发源码和流程讲解

一、概述

鸿蒙中的碰一碰分享是系统的特色操作。很多开发者都对这个酷炫的效果非常感兴趣。不过在接入该功能之前，下意识的就会觉得很复杂。其实HarmonyOS已经对碰一碰分享的接口做了非常高的封装，开发者在调用实现该效果时，工作量很小。

并且就算没接入碰一碰分享，将两台手机顶部进行靠近，也会触发碰一碰分享功能，只不过会提示无分享内容。前提是都开启了NFC，其实底层是通过NFC进行通信。

碰一碰的接口整体就分为三个： （1）监听碰一碰harmonyShare.on('knockShare', this.onKnockShare) （2）取消监听碰一碰harmonyShare.off('knockShare', this.onKnockShare) （3）最后最重要的是，收到碰一碰回调后，处理要分享的信息，调用碰一碰分享发送接口。onKnockShare回调函数中的shareData分享包和调用share接口。

当监听了碰一碰分享，两个手机进行碰一碰操作时，就可以收到该操作的时机，此时在分享回调中，可以根据分享宝shareData的参数信息，进行配置，比如分享图片，还是视频，还是链接等等。shareData中的参数非常多，可以实现不同的分享效果和展示样式，具体参考文末的链接。

当不需要处理分享时，关闭监听即可。整体逻辑非常简单。

二、代码实现和详细解释

核心工具类HarmonyShareMgr，碰一碰图片分享举例：

typescript 复制代码

import { harmonyShare, systemShare } from "@kit.ShareKit";
import { uniformTypeDescriptor as utd } from '@kit.ArkData';
/**
 * 鸿蒙系统分享工具类
 */
export class HarmonyShareMgr{

  private TAG: string = "HarmonyShareMgr";

  private static mHarmonyShareMgr: HarmonyShareMgr | null = null;

  public static Ins(){
    if(!HarmonyShareMgr.mHarmonyShareMgr){
      HarmonyShareMgr.mHarmonyShareMgr = new HarmonyShareMgr();
    }
    return HarmonyShareMgr.mHarmonyShareMgr;
  }

  // 分享图片Uri
  private mImageUri: string = "";
  // 分享类型
  private mShareType: string = "";

  /**
   * 设置图片分享信息包
   */
  private setImageShareData(imageUri: string){
    this.mImageUri = imageUri;
    this.mShareType = utd.UniformDataType.JPEG;
  }

  /**
   * 收到碰一碰分享回调
   */
  private onKnockShare = (shareTarget: harmonyShare.SharableTarget)=>{
    // 打包
    const shareData = new systemShare.SharedData({
      utd: this.mShareType,
      uri: this.mImageUri,
    });

    // 发送分享包
    shareTarget.share(shareData);
  }

  public registerKnock(){
    console.log(this.TAG, " registerKnock");
    harmonyShare.on('knockShare', this.onKnockShare);
  }

  public unRegisterKnock(){
    console.log(this.TAG, " unRegisterKnock");
    harmonyShare.off('knockShare', this.onKnockShare);
  }
}

测试页面内调用：

typescript 复制代码

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { HarmonyShareMgr } from '../mgr/HarmonyShareMgr';

/**
 * 鸿蒙分享测试页面
 */
@Entry
@Component
struct HarmonyShareTestPage {
  private TAG: string = "AlbumSelectPage";

  onPageShow(): void {
    // 当前界面显示时，进行碰一碰监听
    HarmonyShareMgr.Ins().registerKnock();
  }

  onPageHide(): void {
    HarmonyShareMgr.Ins().unRegisterKnock();
  }

  onClickSelectPhoto = ()=>{
    try {
      let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
      // 设置筛选过滤条件
      PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
      // 选择用户选择数量
      PhotoSelectOptions.maxSelectNumber = 1;
      // 实例化图片选择器
      let photoPicker = new photoAccessHelper.PhotoViewPicker();
      // 唤起安全相册组件
      photoPicker.select(PhotoSelectOptions, (err: BusinessError, PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        if (err) {
          console.error(this.TAG, "onClickSelectPhoto photoPicker.select error:" + JSON.stringify(err));
          return;
        }
        // 用户选择确认后，会回调到这里。
        console.info(this.TAG, "onClickSelectPhoto photoPicker.select successfully:" + JSON.stringify(PhotoSelectResult));
        // 调用碰一碰分享的图片分享赋值
        HarmonyShareMgr.Ins().setImageShareData(PhotoSelectResult.photoUris[0]);
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.error(this.TAG, "onClickSelectPhoto photoPicker.select catch failed:" + JSON.stringify(err));
    }
  }

  build() {
    Row(){
      Button('点击唤起相册选择')
        .onClick(this.onClickSelectPhoto)
    }
    .justifyContent(FlexAlign.Center)
    .size({
      width: "100%",
      height: "100%"
    })
  }

}

三、引用资料地址

ShareKit官方文档：developer.huawei.com/consumer/cn...

内容分享： developer.huawei.com/consumer/cn...

分享信息包：developer.huawei.com/consumer/cn...