【HarmonyOS 5】Integrating WeChat Sharing into HarmonyOS Applications

简介: 【HarmonyOS 5】Integrating WeChat Sharing into HarmonyOS Applications


1. Download HarmonyOS WeChat Open SDK and Demo

1.1 WeChat_Open_SDK

Insert image description here
Click to download @tencent/wechat_open_sdk(V1.0.7).

1.2 Official Demo Download

Insert image description here
Click to download OpenSDK-1.0.0.zip.
Insert image description here


2. Run the Demo Project

After syncing the configuration of the WeChat demo project and enabling automatic signing, it runs successfully with the following effect:
Insert image description here

The WeChat sharing page (triggered by the "Send Message" button) supports two sharing types: text and images. Image sharing includes three methods: network image URI, album selection, and local image data:
Insert image description here

The sharing logic is implemented in SendMessage.ets. Without configuring the APPID, clicking "Send XX Message" redirects to WeChat but shows an error:
Insert image description here

Configuration Steps:

  1. Update Constants.ets with your app's information.
  2. Register your HarmonyOS app on the WeChat Open Platform, configuring the package name and other details.
    (Note: WeChat requires a registered app ID; no test ID is provided for preview.)
    Insert image description here


3. Integrate Sharing Functionality

3.1 Install SDK Dependencies

Use the latest SDK version in your project:
Insert image description here

"dependencies": {
  "@tencent/wechat_open_sdk": "1.0.3"
}

Insert image description here

Current Limitations:

  • Only sharing to chat sessions is supported; sharing to Moments is under development.


3.2 Text Sharing (Refer to SendMessage.ets)
import * as wxopensdk from '@tencent/wechat_open_sdk';
onClickSendText = async () => {
  // Create text object
  const textObject = new wxopensdk.WXTextObject();
  textObject.text = kTextMessage;
  
  // Wrap in media message
  const mediaMessage = new wxopensdk.WXMediaMessage();
  mediaMessage.mediaObject = textObject;
  
  // Send request
  const req = new wxopensdk.SendMessageToWXReq();
  req.scene = wxopensdk.SendMessageToWXReq.WXSceneSession;
  req.message = mediaMessage;
  const finished = await this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req);
  console.log("send request finished: ", finished);
}


3.3 Image Sharing (Refer to SendMessage.ets)
(1) Share Image by Network URL
import * as wxopensdk from '@tencent/wechat_open_sdk';
onClickSendImageByUrl = () => {
  const imageUrl = "https://img.tukuppt.com/photo-big/00/10/77/619619681755c5463.jpg";
  
  // Download image to app sandbox
  this.downloadImageWithUrl(imageUrl, async (imageData) => {
    let file: fileIo.File | undefined;
    const filePath = getContext(this).filesDir + `/original-${Date.now()}.jpg`;
    file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
    fileIo.writeSync(file.fd, imageData);
    fileIo.closeSync(file);
    
    // Create image object with local path
    const imageObject = new wxopensdk.WXImageObject();
    imageObject.uri = fileUri.getUriFromPath(filePath);
    
    // Wrap and send
    const mediaMessage = new wxopensdk.WXMediaMessage();
    mediaMessage.mediaObject = imageObject;
    
    const req = new wxopensdk.SendMessageToWXReq();
    req.scene = wxopensdk.SendMessageToWXReq.WXSceneSession;
    req.message = mediaMessage;
    this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req);
  });
}
downloadImageWithUrl(url: string, completion: (imageData: ArrayBuffer) => void) {
  http.createHttp().request(url, (error: BusinessError, data: http.HttpResponse) => {
    if (error || data.responseCode !== 200) return;
    completion(data.result as ArrayBuffer);
  });
}
(2) Share Image from Album
onClickSendImageByAlbum = async () => {
  const imageObject = new wxopensdk.WXImageObject();
  imageObject.uri = await this.getPictureUriFromAlbum();
  
  const mediaMessage = new wxopensdk.WXMediaMessage();
  mediaMessage.mediaObject = imageObject;
  
  const req = new wxopensdk.SendMessageToWXReq();
  req.scene = this.currentScene;
  req.message = mediaMessage;
  this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req);
}
async getPictureUriFromAlbum(): Promise<string> {
  const options = new photoAccessHelper.PhotoSelectOptions();
  options.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
  options.maxSelectNumber = 1;
  
  const picker = new photoAccessHelper.PhotoViewPicker();
  const result = await picker.select(options);
  const albumPath = result.photoUris[0];
  
  const context = getContext(this) as common.UIAbilityContext;
  let file: fileIo.File | undefined;
  file = fileIo.openSync(albumPath, fileIo.OpenMode.READ_ONLY);
  
  const timeStamp = Date.now();
  fileIo.copyFileSync(file.fd, context.filesDir + `/original-${timeStamp}.jpg`);
  fileIo.closeSync(file);
  
  const filePath = context.filesDir + `/original-${timeStamp}.jpg`;
  return fileUri.getUriFromPath(filePath);
}
(3) Share Image from App Resources
onClickSendImageByData = async () => {
  // Get image from resources and convert to PixelMap
  const resourceManager = getContext(this).resourceManager;
  const imageArray = await resourceManager.getMediaContent($r('app.media.test0'));
  const pixelBuffer = imageArray.buffer as ArrayBuffer;
  const imageResource = image.createImageSource(pixelBuffer);
  const opts: image.DecodingOptions = { editable: true };
  const pixelMap = await imageResource.createPixelMap(opts);
  
  // Compress and convert to ArrayBuffer
  const packer = image.createImagePacker();
  const packOpts: image.PackingOption = { format: 'image/jpeg', quality: 30 };
  await packer.packing(pixelMap, packOpts).then((data: ArrayBuffer) => {
    // Create image object with base64 data
    const imageObject = new wxopensdk.WXImageObject();
    const buf = buffer.from(data);
    imageObject.imageData = buf.toString('base64', 0, buf.length);
    
    // Wrap and send
    const mediaMessage = new wxopensdk.WXMediaMessage();
    mediaMessage.mediaObject = imageObject;
    
    const req = new wxopensdk.SendMessageToWXReq();
    req.scene = this.currentScene;
    req.message = mediaMessage;
    this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req);
  });
}

Note:
WeChat has a 100KB limit for image sharing. Using URI-based sharing is recommended to avoid manual compression.


3.4 New Features in Version 1.0.7
(1) Share Webpage
// Create webpage object
const webpageObject = new wxopensdk.WXWebpageObject();
webpageObject.webpageUrl = "http://www.qq.com";
// Wrap in media message
const mediaMessage = new wxopensdk.WXMediaMessage();
mediaMessage.mediaObject = webpageObject;
mediaMessage.title = "Test Webpage Link";
mediaMessage.description = "Test webpage summary";
// Set thumbnail
const thumbData = await getContext(this).resourceManager.getMediaContent($r("app.media.thumb_img"));
const thumbPixel = image.createImageSource(thumbData.buffer).createPixelMapSync();
const thumbBuffer = await image.createImagePacker().packToData(thumbPixel, { format: "image/png", quality: 100 });
mediaMessage.thumbData = new Uint8Array(thumbBuffer);
// Send request
const req = new wxopensdk.SendMessageToWXReq();
req.callbackAbility = kDemoEntryAbility;
req.scene = wxopensdk.SendMessageToWXReq.WXSceneSession;
req.message = mediaMessage;
this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req);
(2) Share Mini Program
// Create mini program object
const miniProgramObject = new wxopensdk.WXMiniProgramObject();
miniProgramObject.userName = "gh_ac032d0848a9"; // Replace with your mini program's username
miniProgramObject.path = "pages/Home/Home";
miniProgramObject.miniprogramType = wxopensdk.WXMiniProgramType.RELEASE;
// Wrap in media message
const mediaMessage = new wxopensdk.WXMediaMessage();
mediaMessage.mediaObject = miniProgramObject;
mediaMessage.title = "Test Mini Program Share Title";
mediaMessage.description = "Mini program share description";
// Set thumbnail
const thumbData = await getContext(this).resourceManager.getMediaContent($r("app.media.thumb_img2"));
const thumbPixel = image.createImageSource(thumbData.buffer).createPixelMapSync();
const thumbBuffer = await image.createImagePacker().packToData(thumbPixel, { format: "image/png", quality: 100 });
mediaMessage.thumbData = new Uint8Array(thumbBuffer);
// Send request
const req = new wxopensdk.SendMessageToWXReq();
req.callbackAbility = kDemoEntryAbility;
req.scene = wxopensdk.SendMessageToWXReq.WXSceneSession;
req.message = mediaMessage;
this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req);

Note:
Do not use the demo's userName for mini program sharing—use your target mini program's configuration instead.

目录
相关文章
|
4月前
|
物联网 开发工具
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
121 9
【HarmonyOS】鸿蒙应用蓝牙功能实现 (二)
|
4月前
|
定位技术 开发工具
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
148 5
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
|
4月前
|
机器学习/深度学习 人工智能 自然语言处理
当无人机遇上Agentic AI:新的应用场景及挑战
本文简介了Agentic AI与AI Agents的不同、Agentic无人机的概念、应用场景、以及所面临的挑战
408 5
当无人机遇上Agentic AI:新的应用场景及挑战
|
4月前
|
传感器 安全 物联网
【HarmonyOS 5】鸿蒙分布式协同应用开发详解
为什么需要分布式协同应用? 首先是因为当今社会,围绕电子产品生态,人们迫切希望,周边的电子设备可以协同操作。例如手机,手表,电视机,汽车,甚至是各种家电产品。 从2015年到如今,手机和pc等老牌电子产品的设备数趋于稳定,其他IoT设备稳步增长。可见人均所拥有的的电子产品的个数,在迅速增加。
160 0
|
4月前
|
开发工具
【HarmonyOS】鸿蒙应用蓝牙功能实现(一)
【HarmonyOS】鸿蒙应用蓝牙功能实现(一)
134 8
【HarmonyOS】鸿蒙应用蓝牙功能实现(一)
|
4月前
|
传感器 自动驾驶 物联网
【HarmonyOS 5】鸿蒙星闪NearLink详解
鸿蒙星闪NearLink Kit 是 HarmonyOS 提供的短距离通信服务,支持星闪设备间的连接、数据交互。例如,手机可作为中心设备与外围设备(如鼠标、手写笔、智能家电、车钥匙等)通过星闪进行连接。
130 0
|
4月前
|
存储 大数据 数据处理
【HarmonyOS 5】鸿蒙中的UIAbility详解(三)
本文是鸿蒙中的UIAbility详解系列的最终章。主要针对UIAbility的冷启动和热启动,对于want数据的处理。UIAbility的备份恢复,UIAbility的接续等高级功能的概念和使用讲解。
161 0
|
4月前
|
定位技术 开发工具 开发者
【HarmonyOS 5】桌面快捷方式功能实现详解
在移动应用开发中,如何让用户快速触达核心功能,是目前很常见的功能之一。 鸿蒙系统提供的**桌面快捷方式(Shortcuts)**功能,允许开发者为应用内常用功能创建直达入口,用户通过长按应用图标即可快速启动特定功能,大幅减少操作层级。 本文将结合地图导航场景,详细解析鸿蒙快捷方式的实现原理与开发流程。结合华为官方开源示例 DesktopShortcut 展开,该示例基于HarmonyOS 5.0实现,完整演示了地图导航场景的快捷方式开发流程。
236 0
|
4月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
138 0
|
4月前
|
人工智能 JSON 自然语言处理
Function AI 工作流发布:以 AI 重塑企业流程自动化
本文介绍了基于函数计算 FC 打造的全新 Function AI 工作流服务,该服务结合 AI 技术与流程自动化,实现从传统流程自动化到智能流程自动化的跨越。文章通过内容营销素材生成、内容安全审核和泛企业 VOC 挖掘三个具体场景,展示了 Function AI 工作流的设计、配置及调试过程,并对比了其与传统流程的优势。Function AI 工作流具备可视化、智能性和可扩展性,成为企业智能化转型的重要基础设施,助力企业提升效率、降低成本并增强敏捷响应能力。
564 28