鸿蒙原生开发手记：徒步迹 - 剪贴板与系统交互

鸿蒙原生开发手记：徒步迹 - 剪贴板与系统交互

使用系统剪贴板实现应用间数据交互

前言

剪贴板是应用间数据共享的基础工具。HarmonyOS 的 pasteboard 模块提供了系统剪贴板的读写能力，支持文本、图片、HTML 等多种数据类型。徒步迹利用剪贴板实现分享链接复制、路线数据导出等交互功能。

一、剪贴板基础

typescript 复制代码

import { pasteboard } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
import { BusinessError } from '@kit.BasicServicesKit';

class ClipboardManager {
  // 复制文本
  static copyText(text: string): void {
    const data = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
    const systemPasteboard = pasteboard.getSystemPasteboard();
    systemPasteboard.setData(data);
    console.log('文本已复制到剪贴板');
  }

  // 读取文本
  static pasteText(): string {
    const systemPasteboard = pasteboard.getSystemPasteboard();
    const data = systemPasteboard.getData();
    if (data && data.mimeType === pasteboard.MIMETYPE_TEXT_PLAIN) {
      return data.data as string;
    }
    return '';
  }

  // 复制图片
  static async copyImage(pixelMap: image.PixelMap): Promise<void> {
    try {
      const data = pasteboard.createData(pasteboard.MIMETYPE_IMAGE_PNG, pixelMap);
      const systemPasteboard = pasteboard.getSystemPasteboard();
      await systemPasteboard.setDataAsync(data);
      console.log('图片已复制到剪贴板');
    } catch (e) {
      console.error('复制图片失败', (e as BusinessError).message);
    }
  }

  // 清空剪贴板
  static clear(): void {
    const systemPasteboard = pasteboard.getSystemPasteboard();
    systemPasteboard.clearData();
  }

  // 检查剪贴板内容类型
  static getContentType(): string {
    const systemPasteboard = pasteboard.getSystemPasteboard();
    const data = systemPasteboard.getData();
    return data ? data.mimeType : 'empty';
  }
}

二、分享链接复制

typescript 复制代码

@Component
struct ShareLinkSheet {
  @Prop routeLink: string = '';

  build() {
    Column() {
      Text('分享链接').fontSize(18).fontWeight(FontWeight.Bold)
        .width('100%').textAlign(TextAlign.Center).padding(16);

      // 链接预览
      Row() {
        Text(this.routeLink).fontSize(13).fontColor('#666')
          .layoutWeight(1).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis });
        Button('复制').fontSize(13).fontColor('#4CAF50')
          .backgroundColor('#E8F5E9').borderRadius(12)
          .padding({ left: 12, right: 12 })
          .onClick(() => {
            ClipboardManager.copyText(this.routeLink);
          });
      }
      .width('100%').padding(16).backgroundColor('#F5F5F5').borderRadius(12);

      // 分享到
      Row() {
        this.ShareAction('微信', '#07C160');
        this.ShareAction('QQ', '#12B7F5');
        this.ShareAction('微博', '#FF6B35');
        this.ShareAction('系统', '#666');
      }
      .width('100%').padding(16).justifyContent(FlexAlign.SpaceAround);
    }
    .width('100%').backgroundColor(Color.White).borderRadius(16);
  }

  @Builder
  ShareAction(label: string, color: string) {
    Column() {
      Row() {
        Text(label).fontSize(12).fontColor(Color.White);
      }
      .width(48).height(48).backgroundColor(color).borderRadius(24)
      .justifyContent(FlexAlign.Center);
      Text(label).fontSize(12).fontColor('#666').margin({ top: 4 });
    }
    .alignItems(HorizontalAlign.Center);
  }
}

三、导出路线数据

typescript 复制代码

@Component
struct ExportRouteData {
  @Prop routeData: {
    name: string;
    distance: number;
    waypoints: Array<{ lat: number; lng: number }>;
  };

  build() {
    Column() {
      Text('导出路线数据').fontSize(18).fontWeight(FontWeight.Bold);
      Text('将路线数据导出为 GPX 格式，可在其他地图应用中使用')
        .fontSize(13).fontColor('#666').margin({ top: 8 });

      Button('导出 GPX 并复制')
        .width('100%').height(44).backgroundColor('#4CAF50')
        .fontColor(Color.White).borderRadius(22)
        .margin({ top: 16 })
        .onClick(() => this.exportAsGPX());
    }
    .padding(16).backgroundColor(Color.White).borderRadius(16);
  }

  exportAsGPX(): void {
    const gpx = this.generateGPX();
    ClipboardManager.copyText(gpx);
  }

  private generateGPX(): string {
    let gpx = `<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.1" creator="徒步迹">
  <trk>
    <name>${this.routeData.name}</name>
    <trkseg>`;

    for (const wp of this.routeData.waypoints) {
      gpx += `\n      <trkpt lat="${wp.lat}" lon="${wp.lng}"></trkpt>`;
    }

    gpx += `
    </trkseg>
  </trk>
</gpx>`;
    return gpx;
  }
}

数据类型	MIME 类型	复制方法	粘贴方法
纯文本	text/plain	`createData` + `setData`	`getData`
HTML	text/html	`createHtmlData`	`getData`
图片	image/png	`createData` + `setDataAsync`	`getDataAsync`
自定义	custom/*	自定义序列化	自定义解析

四、总结

系统剪贴板是应用间数据共享的轻量级方案，适合文本、链接、简单数据的快速传递。徒步迹利用剪贴板实现了路线分享链接复制、GPX 数据导出等功能，提升了用户的数据流通体验。

总结

本文围绕"徒步迹"应用的实际开发场景，系统讲解了相关技术的实现要点。通过代码实战 +原理剖析的方式，帮助开发者快速掌握 HarmonyOS NEXT 的核心开发能力。

总结要点

理解 HarmonyOS NEXT 应用架构与 Ability 生命周期
掌握 ArkUI 声明式 UI 的状态管理与组件化开发
熟悉常用 Kit 能力（Map Kit、Location Kit、Camera Kit 等）的接入方式
学会性能优化、内存管理、并发编程等进阶技巧
具备从 0 到 1 构建完整 HarmonyOS 应用工程的能力

核心特性回顾

声明式 UI：ArkUI 提供简洁高效的声明式开发范式
状态管理：@State、@Prop、@Link、@Provide、@Consume 等装饰器
跨组件通信：通过 Provide/Consume 实现跨层级数据传递
原生能力：通过 Kit 接入系统能力（地图、定位、相机等）
性能优化：LazyForEach、虚拟列表、Skeleton 骨架屏等

学习建议 ：技术学习重在实践，建议结合项目源码同步动手操作，遇到问题多查阅HarmonyOS 官方文档。

下一篇预告：鸿蒙原生开发手记：徒步迹 - 持续更新中

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

开源鸿蒙跨平台社区 ：https://openharmonycrossplatform.csdn.net
HarmonyOS 官方文档 ：https://developer.huawei.com/consumer/cn//
OpenHarmony 开源项目 ：https://www.openharmony.cn/
ArkUI 组件参考 ：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development
徒步迹项目源码 ：GitHub - hiking-trail-harmonyos
DevEco Studio 下载 ：https://developer.huawei.com/consumer/cn/deveco-studio/
ArkTS 语言指南 ：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-overview
系列文章导航 ：CSDN 博客 - 鸿蒙原生开发手记