【入门到精通】鸿蒙next应用开发：分享二维码按钮实现案例

最新推荐文章于 2025-05-08 18:22:02 发布

炫酷盖茨猫先生

最新推荐文章于 2025-05-08 18:22:02 发布

阅读量809

点赞数 10

分类专栏： ArkTS组件鸿蒙5.0开发 ArkUI框架文章标签： harmonyos 华为 ArkTS ArkUI android 鸿蒙系统前端

本文链接：https://blog.csdn.net/m0_73088370/article/details/147759498

版权

鸿蒙5.0开发同时被 3 个专栏收录

850 篇文章

订阅专栏

ArkTS组件

631 篇文章

订阅专栏

ArkUI框架

478 篇文章

订阅专栏

往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

介绍

本示例介绍如何在应用中，通过url自动生成二维码，并通过Share Kit的接口拉起系统分享。

效果图预览

使用说明

点击任意案例。
点击按钮"源码网页"。
点击分享按钮，可以拉起系统的分享框。

实现思路

通过url生成二维码。

// TODO: 知识点:通过调用systemShare的接口指定号码并跳转到发送短信页面
async function createBarcode(content: string, size: number): Promise<image.PixelMap | null> {
  if (canIUse("SystemCapability.Multimedia.Scan.Core") && canIUse("SystemCapability.Multimedia.Scan.GenerateBarcode")) {
    try {
      // 以QR码为例，码图生成参数
      let options: generateBarcode.CreateOptions = {
        scanType: scanCore.ScanType.QR_CODE,
        height: size,
        width: size
      };
      let pixelMap: image.PixelMap = await generateBarcode.createBarcode(content, options);
      console.debug("生成码图成功");
      return pixelMap;
    } catch (error) {
      hilog.error(0x0001, '[generateBarcode]',
        `Failed to createBarcode by promise with options. Code: ${error.code}, message: ${error.message}`);
      return null;
    }
  } else {
    console.error("该设备暂不支持生成二维码");
    return null;
  }
}

将图片落盘成jpg格式图片，并包装成SharedData对象，作为分享的，供源数据分享使用

const file = fileIo.openSync(this.path,
  fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
// 创建ImagePacker实例
const imagePackerApi = image.createImagePacker();
let picture = image.createPicture(this.generatedImage);
// 设置打包参数
let fullBuffer: ArrayBuffer = await imagePackerApi.packing(picture, {
  format: 'image/jpeg',
  quality: 98
});
let thumbnailBuffer: ArrayBuffer = await imagePackerApi.packing(picture, {
  format: 'image/jpeg',
  quality: 10
});
fileIo.writeSync(file.fd, fullBuffer);
fileIo.close(file.fd);
// 构造ShareData，需配置一条有效数据信息
this.shareData = new systemShare.SharedData({
  utd: utd.UniformDataType.JPEG,
  uri: fileUri.getUriFromPath(this.path),
});

this.shareData.addRecord({
  utd: utd.UniformDataType.HYPERLINK,
  content: this.url, // 仅为示例 使用时请替换为自己的链接
  thumbnail: new Uint8Array(thumbnailBuffer),
});

通过controller拉起分享页面

this.sharedController?.show(this.ctx as common.UIAbilityContext, {
   anchor: "ShareButton",
   selectionMode: systemShare.SelectionMode.SINGLE,
   previewMode: systemShare.SharePreviewMode.DETAIL
}).then(() => {
   console.info('ShareController show success.');
}).catch((error: BusinessError) => {
   console.error(`ShareController show error. code: ${error.code}, message: ${error.message}`);
});

高性能知识点

不涉及

工程结构&模块类型

sharedbutton                                     // har类型
|---src/main/ets/components/components
|   |---ShareButton.ets                         // 分享按钮组件