HarmonyOS碰一碰赋能电商场景:订单信息无缝分享的落地实践

引言:从繁琐到便捷的订单分享进化

我们的应用属于B端应用,订单中会有很多很多的商品,如果老板想把订单数据转给门店,可能需要截图好几张,很容易会导致遗漏信息,这种就会很头疼,HarmonyOS 6.0的"碰一碰"功能可真是帮了大忙!只需要轻轻一碰,订单信息就能快速、安全地传递过去,简直太方便了!今天咱们就来详细聊聊这个功能的具体实现。

技术实现架构

系统架构概览

根据华为官方Harmony Share API文档,碰一碰订单分享的实现基于标准的Share Kit框架,而不是底层的WLAN技术。整个流程通过鸿蒙系统的统一分享服务实现,整个过程就像下面这样:

复制代码
发送端设备 → 鸿蒙Share Kit → 接收端设备
电商应用       数据传输        电商应用
订单管理       加密通道        数据解析
分享组件       设备发现        分享组件

核心组件分工

整个系统由四个关键组件协同工作,各司其职:

  1. 分享服务层:基于Harmony Share Kit API,处理设备间的分享连接和数据传输
  2. 数据传输层:构建安全的数据传输通道,对订单信息进行加密保护,符合Share API规范
  3. 业务逻辑层:处理订单数据的格式转换、序列化和解析逻辑
  4. 用户界面层:提供简洁直观的碰一碰交互界面,降低用户操作门槛

订单数据结构设计

基础订单信息结构

说到订单数据结构设计,这可是个技术活儿!我们需要设计一个既能满足分享需求,又能保护用户隐私的数据结构。毕竟,谁都不希望自己的个人信息被随意泄露,对吧?

基础订单信息包含以下关键字段,咱们一起来看看:

typescript 复制代码
// 电商订单基础信息
interface OrderBaseInfo {
  // 订单标识
  orderId: string;           // 订单唯一标识
  orderNumber: string;       // 订单编号
  createTime: number;        // 创建时间戳
  
  // 商品清单
  products: Array<{
    productId: string;       // 商品ID
    productName: string;     // 商品名称
    imageUrl: string;        // 商品图片
    price: number;          // 单价
    quantity: number;       // 数量
    specifications?: string; // 规格信息
  }>;
  
  // 金额明细
  totalAmount: number;       // 订单总金额
  discountAmount?: number;   // 优惠金额
  actualAmount: number;      // 实付金额
  
  // 状态信息
  orderStatus: OrderStatus;  // 订单状态
  paymentStatus: PaymentStatus; // 支付状态
}

// 订单状态定义
enum OrderStatus {
  PENDING = 'pending',      // 待付款
  PAID = 'paid',           // 已付款
  SHIPPED = 'shipped',     // 已发货
  DELIVERED = 'delivered', // 已送达
  COMPLETED = 'completed', // 已完成
  CANCELLED = 'cancelled'  // 已取消
}

// 支付状态定义
enum PaymentStatus {
  UNPAID = 'unpaid',       // 未支付
  PAYING = 'paying',       // 支付中
  PAID = 'paid',          // 已支付
  FAILED = 'failed'       // 支付失败
}
typescript 复制代码
// 电商订单基础信息
interface OrderBaseInfo {
  // 订单标识
  orderId: string;           // 订单唯一标识
  orderNumber: string;       // 订单编号
  createTime: number;        // 创建时间戳
  
  // 商品清单
  products: Array<{
    productId: string;       // 商品ID
    productName: string;     // 商品名称
    imageUrl: string;        // 商品图片
    price: number;          // 单价
    quantity: number;       // 数量
    specifications?: string; // 规格信息
  }>;
  
  // 金额明细
  totalAmount: number;       // 订单总金额
  discountAmount?: number;   // 优惠金额
  actualAmount: number;      // 实付金额
  
  // 状态信息
  orderStatus: OrderStatus;  // 订单状态
  paymentStatus: PaymentStatus; // 支付状态
}

// 订单状态定义
enum OrderStatus {
  PENDING = 'pending',      // 待付款
  PAID = 'paid',           // 已付款
  SHIPPED = 'shipped',     // 已发货
  DELIVERED = 'delivered', // 已送达
  COMPLETED = 'completed', // 已完成
  CANCELLED = 'cancelled'  // 已取消
}

// 支付状态定义
enum PaymentStatus {
  UNPAID = 'unpaid',       // 未支付
  PAYING = 'paying',       // 支付中
  PAID = 'paid',          // 已支付
  FAILED = 'failed'       // 支付失败
}

分享专用数据结构

说到隐私保护,这可是个大问题!分享的时候可不能把用户的敏感信息都传过去,比如收货地址、手机号码这些。所以呢,我们需要设计一个专门的分享数据结构,只保留必要的展示内容。特别重要的是,这个数据结构要兼容鸿蒙系统的数据类型规范,确保碰一碰分享功能能够正常处理。你看,这个设计思路是不是很贴心?

typescript 复制代码
// 碰一碰分享专用订单数据(兼容鸿蒙数据类型规范)
interface ShareableOrderInfo {
  // 分享会话信息
  shareId: string;         // 分享会话ID(字符串类型,鸿蒙支持)
  shareTime: number;       // 分享时间戳(数字类型,鸿蒙支持)
  shareType: ShareType;    // 分享类型(枚举类型,序列化为字符串)
  
  // 订单核心信息(脱敏处理,使用标准数据类型)
  orderNumber: string;     // 订单编号
  productCount: number;    // 商品数量
  totalAmount: number;     // 订单总金额
  
  // 商品展示信息(数组和对象类型,鸿蒙JSON支持)
  products: Array<{
    productName: string;   // 商品名称
    imageUrl: string;      // 商品图片(支持标准URL格式)
    price: number;        // 单价
    specifications?: string; // 规格(可选字段)
  }>;
  
  // 分享上下文(嵌套对象,鸿蒙JSON支持)
  shareContext: {
    purpose: SharePurpose; // 分享目的
    message?: string;      // 附加消息(可选字段)
    expiration: number;    // 过期时间
  };
}

// 分享类型定义
enum ShareType {
  ORDER_DETAIL = 'order_detail',     // 订单详情分享
  PRODUCT_RECOMMEND = 'product_recommend', // 商品推荐
  SHOPPING_CART = 'shopping_cart'   // 购物车分享
}

// 分享目的定义
enum SharePurpose {
  RECOMMENDATION = 'recommendation', // 推荐商品
  CONSULTATION = 'consultation',     // 咨询建议
  GROUP_BUYING = 'group_buying',     // 团购组织
  AFTER_SALES = 'after_sales'        // 售后服务
}

核心代码实现

碰一碰分享服务实现

好了,聊完数据结构,咱们来看看具体的代码实现!根据华为官方Harmony Share API文档,碰一碰分享需要使用标准的Share Kit API,而不是自己实现底层的WLAN连接。这个实现思路更加简洁高效,咱们一步步来看:

typescript 复制代码
import { harmonyShare } from '@kit.CollaborationKit';

/**
 * 鸿蒙碰一碰分享服务类
 * 基于Harmony Share Kit API实现
 */
class HarmonyKnockShareService {
  private isSharing: boolean = false;
  
  /**
   * 开始订单碰一碰分享
   * 使用Harmony Share Kit的标准API
   */
  public async startOrderSharing(orderInfo: ShareableOrderInfo): Promise<void> {
    if (this.isSharing) {
      throw new Error('分享会话正在进行中');
    }
    
    this.isSharing = true;
    
    try {
      // 准备分享数据
      const shareData = this.prepareShareData(orderInfo);
      
      // 使用Harmony Share Kit进行分享
      await harmonyShare.share(shareData);
      
      console.log('碰一碰分享已启动,等待设备触碰...');
      
    } catch (error) {
      this.isSharing = false;
      console.error('碰一碰分享启动失败:', error);
      throw error;
    }
  }
  
  /**
   * 准备分享数据
   * 根据Harmony Share API规范格式化数据
   */
  private prepareShareData(orderInfo: ShareableOrderInfo): systemShare.SharedData {
    // 将订单数据序列化为JSON字符串
    const orderJson = JSON.stringify({
      version: '1.0',
      type: 'order_share',
      timestamp: Date.now(),
      data: orderInfo
    });
    
    // 创建分享数据对象
    const shareData: systemShare.SharedData = {
      uri: `data:text/plain;base64,${btoa(orderJson)}`,
      type: 'text/plain',
      title: `订单分享 - ${orderInfo.orderNumber}`,
      description: `包含${orderInfo.productCount}件商品,总金额¥${orderInfo.totalAmount}`
    };
    
    return shareData;
  }
  
  /**
   * 注册碰一碰分享回调
   * 处理分享过程中的各种事件
   */
  public registerShareCallbacks(): void {
    harmonyShare.setOnSharableTargetListener({
      onSharableTarget: (target: harmonyShare.SharableTarget) => {
        console.log('碰一碰分享事件触发');
        this.handleShareEvent(target);
      }
    });
  }
  
  /**
   * 处理分享事件
   */
  private async handleShareEvent(target: harmonyShare.SharableTarget): Promise<void> {
    try {
      // 接受分享请求
      await target.share(this.prepareShareData(this.currentOrderInfo));
      console.log('分享请求已接受');
      
    } catch (error) {
      // 拒绝分享请求
      await target.reject(harmonyShare.SharableErrorCode.NO_CONTENT_ERROR);
      console.error('分享请求被拒绝:', error);
    }
  }
  
  /**
   * 停止分享
   */
  public stopSharing(): void {
    this.isSharing = false;
    console.log('碰一碰分享已停止');
  }
}

2. 订单数据管理器

接下来是订单数据管理器,这个类的作用可重要了!它负责把完整的订单信息转换成适合分享的格式,同时还要做好数据脱敏处理,保护用户隐私,并符合Harmony Share API规范。

typescript 复制代码
import { systemShare } from '@kit.CollaborationKit';

/**
 * 订单数据管理器
 * 负责订单数据的处理、转换和安全控制,适配Harmony Share API
 */
class OrderDataManager {
  private encryptionService: EncryptionService;
  
  constructor() {
    this.encryptionService = new EncryptionService();
  }
  
  /**
   * 将完整订单转换为可分享格式
   */
  public convertToShareable(order: OrderBaseInfo, purpose: SharePurpose): ShareableOrderInfo {
    // 数据脱敏处理 - 这一步很关键哦!
    const shareableOrder: ShareableOrderInfo = {
      shareId: this.generateShareId(),
      shareTime: Date.now(),
      shareType: ShareType.ORDER_DETAIL,
      orderNumber: this.maskOrderNumber(order.orderNumber),
      productCount: order.products.length,
      totalAmount: order.totalAmount,
      products: order.products.map(product => ({
        productName: product.productName,
        imageUrl: product.imageUrl,
        price: product.price,
        specifications: product.specifications
      })),
      shareContext: {
        purpose: purpose,
        expiration: Date.now() + 24 * 60 * 60 * 1000 // 24小时过期,安全第一!
      }
    };
    
    return shareableOrder;
  }

  /**
   * 将订单数据转换为Harmony Share API要求的格式
   * 创建标准的SharedData对象
   */
  public createShareData(orderInfo: ShareableOrderInfo): systemShare.SharedData {
    // 序列化订单数据
    const orderJson = JSON.stringify({
      version: '1.0',
      type: 'order_share',
      timestamp: Date.now(),
      data: orderInfo
    });
    
    // 创建符合Harmony Share API的数据对象
    const shareData: systemShare.SharedData = {
      uri: `data:text/plain;base64,${btoa(orderJson)}`,
      type: 'text/plain',
      title: `订单分享 - ${orderInfo.orderNumber}`,
      description: `包含${orderInfo.productCount}件商品,总金额¥${orderInfo.totalAmount}`,
      // 可选:添加额外的元数据
      extraData: {
        shareType: orderInfo.shareType,
        sharePurpose: orderInfo.shareContext.purpose,
        sessionId: orderInfo.shareId
      }
    };
    
    return shareData;
  }
  
  /**
   * 订单编号脱敏处理
   */
  private maskOrderNumber(orderNumber: string): string {
    // 保留前3位和后4位,中间用*代替
    if (orderNumber.length <= 7) {
      return orderNumber;
    }
    
    const prefix = orderNumber.substring(0, 3);
    const suffix = orderNumber.substring(orderNumber.length - 4);
    const masked = '*'.repeat(orderNumber.length - 7);
    
    return `${prefix}${masked}${suffix}`;
  }
  
  /**
   * 生成分享ID
   */
  private generateShareId(): string {
    return `share_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`;
  }
  
  /**
   * 验证接收到的订单数据
   */
  public validateReceivedOrder(data: any): boolean {
    try {
      // 检查数据完整性
      if (!data.version || !data.sessionId || !data.timestamp || !data.data) {
        return false;
      }
      
      // 检查过期时间
      if (data.data.shareContext && data.data.shareContext.expiration < Date.now()) {
        return false;
      }
      
      // 检查必要字段
      const orderData = data.data;
      if (!orderData.orderNumber || !orderData.products || !orderData.totalAmount) {
        return false;
      }
      
      return true;
    } catch (error) {
      console.error('订单数据验证失败:', error);
      return false;
    }
  }
}

3. 用户界面组件

最后,咱们来看看用户界面组件!这个组件负责展示分享界面,处理用户交互,并使用标准的Harmony Share API进行分享。

typescript 复制代码
import { harmonyShare } from '@kit.CollaborationKit';

/**
 * 碰一碰分享界面组件
 * 使用Harmony Share API实现分享功能
 */
@Component
struct KnockShareComponent {
  @State private orderInfo: ShareableOrderInfo | null = null;
  @State private isSharing: boolean = false;
  @State private shareStatus: string = '准备分享';
  
  private orderDataManager: OrderDataManager = new OrderDataManager();
  
  aboutToAppear() {
    // 注册分享回调
    this.registerShareCallbacks();
  }
  
  build() {
    Column({ space: 20 }) {
      // 分享状态显示
      Text(this.shareStatus)
        .fontSize(18)
        .fontColor(this.isSharing ? Color.Green : Color.Gray)
      
      // 订单信息预览
      if (this.orderInfo) {
        this.buildOrderPreview()
      }
      
      // 分享控制按钮
      Button(this.isSharing ? '停止分享' : '开始碰一碰分享')
        .width('80%')
        .height(50)
        .backgroundColor(this.isSharing ? Color.Red : Color.Blue)
        .onClick(() => {
          if (this.isSharing) {
            this.stopSharing();
          } else {
            this.startSharing();
          }
        })
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
  
  // 构建订单预览界面
  @Builder
  buildOrderPreview() {
    if (!this.orderInfo) return;
    
    Column({ space: 10 }) {
      Text(`订单号: ${this.orderInfo.orderNumber}`)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
      
      Text(`商品数量: ${this.orderInfo.productCount}件`)
        .fontSize(14)
      
      Text(`总金额: ¥${this.orderInfo.totalAmount}`)
        .fontSize(14)
        .fontColor(Color.Orange)
      
      Text(`分享目的: ${this.getSharePurposeText(this.orderInfo.shareContext.purpose)}`)
        .fontSize(12)
        .fontColor(Color.Gray)
    }
    .padding(10)
    .border({ width: 1, color: Color.Gray })
    .borderRadius(8)
    .width('90%')
  }
  
  // 注册分享回调
  private registerShareCallbacks(): void {
    harmonyShare.setOnSharableTargetListener({
      onSharableTarget: (target: harmonyShare.SharableTarget) => {
        console.log('碰一碰分享事件触发');
        this.handleShareEvent(target);
      }
    });
  }
  
  // 处理分享事件
  private async handleShareEvent(target: harmonyShare.SharableTarget): Promise<void> {
    if (!this.orderInfo) {
      await target.reject(harmonyShare.SharableErrorCode.NO_CONTENT_ERROR);
      return;
    }
    
    try {
      // 准备分享数据
      const shareData = this.orderDataManager.createShareData(this.orderInfo);
      
      // 接受分享请求
      await target.share(shareData);
      
      this.shareStatus = '分享成功';
      console.log('订单分享成功');
      
    } catch (error) {
      // 拒绝分享请求
      await target.reject(harmonyShare.SharableErrorCode.SHARE_FAILED);
      
      this.shareStatus = '分享失败';
      console.error('订单分享失败:', error);
    } finally {
      this.isSharing = false;
    }
  }
  
  // 开始分享
  private async startSharing() {
    if (!this.orderInfo) {
      this.shareStatus = '请先选择要分享的订单';
      return;
    }
    
    this.isSharing = true;
    this.shareStatus = '正在启动碰一碰分享...';
    
    try {
      // 准备分享数据
      const shareData = this.orderDataManager.createShareData(this.orderInfo);
      
      // 使用Harmony Share API进行分享
      await harmonyShare.share(shareData);
      
      this.shareStatus = '碰一碰分享已启动,请将设备靠近接收设备';
      
    } catch (error) {
      this.isSharing = false;
      this.shareStatus = `分享失败: ${error.message}`;
    }
  }
  
  // 停止分享
  private stopSharing() {
    this.isSharing = false;
    this.shareStatus = '分享已停止';
  }
  
  // 设置要分享的订单
  public setOrder(order: ShareableOrderInfo) {
    this.orderInfo = order;
  }
  
  // 获取分享目的文本
  private getSharePurposeText(purpose: SharePurpose): string {
    switch (purpose) {
      case SharePurpose.CONSULTATION:
        return '咨询建议';
      case SharePurpose.RECOMMENDATION:
        return '商品推荐';
      case SharePurpose.GROUP_BUYING:
        return '团购组织';
      case SharePurpose.AFTER_SALES:
        return '售后服务';
      default:
        return '其他';
    }
  }
}

实战案例分析

案例一:家庭购物协同场景

场景描述:夫妻两人一起购物,妻子将购物车碰一碰分享给丈夫,共同完善购物清单。

技术实现要点

  1. 数据同步:实时同步购物车变更,避免冲突
  2. 权限控制:区分查看权限和编辑权限
  3. 离线支持:在网络不稳定时仍能完成基础分享

用户体验流程

复制代码
妻子操作:
1. 在电商App中选择"碰一碰分享购物车"
2. 将手机顶部靠近丈夫的手机
3. 选择分享权限(可编辑/仅查看)
4. 确认分享

丈夫操作:
1. 手机收到分享请求,显示确认界面
2. 查看购物车内容
3. 根据权限进行商品添加/删除
4. 变更实时同步到妻子手机

案例二:商品推荐社交场景

场景描述:用户在实体店看到心仪商品,碰一碰分享给朋友征求意见。

技术实现要点

  1. 商品信息提取:从订单中提取关键推荐信息
  2. 个性化消息:支持附加推荐理由和评价
  3. 一键跳转:接收方可直接跳转到商品页面

数据流转示意图

复制代码
用户A手机 → 碰一碰连接 → 用户B手机
    ↓                       ↓
商品信息 + 推荐理由 → 解析展示 → 商品详情页
    ↓                       ↓
  加密传输                安全接收

案例三:团购组织管理场景

场景描述:组织者将团购订单碰一碰分享给参与者,统一管理和统计。

技术实现要点

  1. 批量处理:支持一次性分享给多个参与者
  2. 数据聚合:自动统计参与者的反馈信息
  3. 状态跟踪:实时更新团购进度和参与情况

架构设计

typescript 复制代码
interface GroupBuyingShare {
  groupId: string;
  organizer: UserInfo;
  participants: Array<{
    user: UserInfo;
    status: ParticipationStatus;
    orderInfo?: ShareableOrderInfo;
  }>;
  productInfo: ProductDetail;
  deadline: number;
  targetQuantity: number;
  currentQuantity: number;
}

安全与隐私保护

数据安全策略

  1. 端到端加密:使用AES-256加密传输数据
  2. 会话隔离:每次分享生成独立的加密会话
  3. 数据脱敏:去除个人敏感信息,保留分享价值
  4. 时间限制:设置分享数据的有效期

隐私保护机制

typescript 复制代码
class PrivacyProtectionManager {
  /**
   * 数据脱敏处理
   */
  public maskSensitiveData(data: any): any {
    return {
      ...data,
      // 移除敏感信息
      userId: undefined,
      phoneNumber: undefined,
      address: undefined,
      paymentInfo: undefined,
      
      // 保留分享所需信息
      orderNumber: this.maskOrderNumber(data.orderNumber),
      products: data.products.map(p => ({
        ...p,
        // 商品信息脱敏
        productId: undefined
      }))
    };
  }
  
  /**
   * 验证分享权限
   */
  public validateSharePermission(
    sender: UserInfo, 
    receiver: UserInfo, 
    dataType: ShareDataType
  ): boolean {
    // 检查用户关系
    const relationship = this.getUserRelationship(sender, receiver);
    
    // 根据关系类型和数据敏感性确定权限
    switch (relationship) {
      case RelationshipType.FAMILY:
        return true; // 家人关系允许分享所有数据
      case RelationshipType.FRIEND:
        return dataType !== ShareDataType.SENSITIVE; // 朋友关系限制敏感数据
      case RelationshipType.STRANGER:
        return dataType === ShareDataType.PUBLIC; // 陌生人仅允许公开数据
      default:
        return false;
    }
  }
}

性能优化策略

1. 连接建立优化

  • 预连接机制:利用Harmony Share Kit的连接池管理,减少连接建立时间
  • 连接复用:复用已建立的分享连接,避免重复握手过程
  • 超时控制:设置合理的连接超时时间

2. 数据传输优化

  • 数据压缩:使用GZIP压缩订单数据
  • 分片传输:大数据量时分片传输,支持断点续传
  • 缓存策略:常用商品信息本地缓存

总结

鸿蒙碰一碰分享功能为电商订单信息分享带来了革命性的用户体验提升。通过精心的技术架构设计、安全的数据处理机制和人性化的交互设计,实现了订单信息的快速、安全、便捷分享。

这种技术不仅提升了电商应用的社交属性,还为线下购物、家庭协同、团购组织等场景提供了创新的解决方案。随着技术的不断发展和生态的完善,碰一碰分享将在电商领域发挥越来越重要的作用,成为连接线上线下购物体验的重要桥梁。

未来,我们可以期待更多基于碰一碰技术的创新应用,为数字生活带来更多便利和乐趣。

相关推荐
n***i951 小时前
HarmonyOS在智能穿戴中的可穿戴设备
华为·harmonyos
SuperHeroWu72 小时前
【HarmonyOS 6】UIAbility跨设备连接详解(分布式软总线运用)
分布式·华为·harmonyos·鸿蒙·连接·分布式协同·跨设备链接
lqj_本人3 小时前
鸿蒙Cordova开发踩坑记录:音频焦点的“独占欲“
华为·harmonyos
柒儿吖3 小时前
Electron for 鸿蒙PC - Native模块Mock与降级策略
javascript·electron·harmonyos
用户463989754324 小时前
Harmony os——AbilityStage 组件管理器:我理解的 Module 级「总控台」
harmonyos
用户463989754325 小时前
Harmony os——UIAbility 组件基本用法:启动页、Context、终止与拉起方信息全流程
harmonyos
用户463989754325 小时前
Harmony os——启动应用内的 UIAbility:跨 Ability 跳转、回传结果 & 指定页面全流程
harmonyos
用户463989754325 小时前
Harmony os——UIAbility 组件生命周期|我按自己的理解梳了一遍
harmonyos
汉堡黄6 小时前
鸿蒙开发:案例集合Tabs:自定义tabs突出(凸出)球体左右跟随滑动动画
harmonyos