【HarmonyOS NEXT】鸿蒙应用接入微信分享

【HarmonyOS NEXT】鸿蒙应用接入微信分享

一、下载鸿蒙版微信开放SDK和示例DEMO

1.WeChat_Open_SDK: 点击跳转@tencent/wechat_open_sdk(V1.0.3)

2.官方示例DEMO下载 点击下载OpenSDK-1.0.0.zip

二、运行示例项目

微信的示例项目进行配置同步后，设置自动签名就可以直接运行成功，效果如下： 可以看到微信分享相关在，发送消息按钮，跳转到的页面中，共有两种分享形式，文本和图片。图片又分为网络图片uri，相册选图，和image发送三种： 分享页面实现都在SendMessage中，在没有配置APPID的情况下，点击发送XX消息，会跳转到微信，但是会提示第三方应用信息校验失败： 需要在Constants.ets中进行配置： 微信开放平台需要注册你的鸿蒙应用，配置包名等信息。微信最麻烦的就是这个，没有提供一个测试id进行效果查看，只能先去注册你的应用。点击鸿蒙应用手册

三、copy分享相关代码进行接入

1.安装SDK依赖： sdk版本以三方库的最新版本为准：

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

分享的目标场景，目前仅支持分享到会话，分享到朋友圈功能还在开发中。 分享的目标场景，目前仅支持分享到会话，分享到朋友圈功能还在开发中。 分享的目标场景，目前仅支持分享到会话，分享到朋友圈功能还在开发中。

2.参考SendMessage.ets中的代码，copy【文本分享】相关代码：

import * as wxopensdk from '@tencent/wechat_open_sdk';

  onClickSendText = async ()=>{
  	// 创建文本分享容器对象，并且赋值文本
    let textObject = new wxopensdk.WXTextObject;
    textObject.text = kTextMessage;
	// 放到消息对象包裹里
    let mediaMessage = new wxopensdk.WXMediaMessage();
    mediaMessage.mediaObject = textObject;
	// 发送包裹,根据返回值判断成功与否
    let req = new wxopensdk.SendMessageToWXReq();
    req.scene = wxopensdk.SendMessageToWXReq.WXSceneSession;
    req.message = mediaMessage

    let finished = await this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
    console.log("send request finished: ", finished)
  }

3.参考SendMessage.ets中的代码，copy【图片分享】相关代码：

（1）用网络图片发送Image消息(uri)

import * as wxopensdk from '@tencent/wechat_open_sdk';

  onClickSendImageByUrl = ()=>{
    let imageUrl = "https://img.tukuppt.com/photo-big/00/10/77/619619681755c5463.jpg"
    // 网络图片的url地址，下载到本地应用沙箱
    this.downloadImageWithUrl(imageUrl, async (imageData) => {
      let file: fileIo.File | undefined;
      let 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);
	  // 创建图片分享容器对象，并且赋值图片本地地址
      let imageObject = new wxopensdk.WXImageObject
      imageObject.uri = fileUri.getUriFromPath(filePath);
	  // 放到消息对象包裹里
      let mediaMessage = new wxopensdk.WXMediaMessage()
      mediaMessage.mediaObject = imageObject
	  // 放到消息对象包裹里
      let 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）从相册中选择图片发送Image消息

  onClickSendImageByAlbum = async ()=>{
    let imageObject = new wxopensdk.WXImageObject
    imageObject.uri = await this.getPictureUriFromAlbum()

    let mediaMessage = new wxopensdk.WXMediaMessage()
    mediaMessage.mediaObject = imageObject

    let req = new wxopensdk.SendMessageToWXReq()
    req.scene = this.currentScene
    req.message = mediaMessage

    this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
  }

  async getPictureUriFromAlbum(): Promise<string> {
    let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 1;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions);
    let albumPath = photoSelectResult.photoUris[0];

    let context = getContext(this) as common.UIAbilityContext;
    let file: fileIo.File | undefined;
    file = fileIo.openSync(albumPath, fileIo.OpenMode.READ_ONLY);

    let timeStamp = Date.now();
    fileIo.copyFileSync(file.fd, context.filesDir + `/original-${timeStamp}.jpg`);
    fileIo.closeSync(file);

    let filePath = context.filesDir + `/original-${timeStamp}.jpg`;
    return fileUri.getUriFromPath(filePath);
  }

（3）发送Image消息(data) 【应用资源文件夹内的图片资源】

  
  onClickSendImageByData = async ()=>{
    // 本地资源管理工具
    let resourceManager = getContext(this).resourceManager
    // 获取资源文件夹中的图片,转化为pixelMap
    let imageArray = await resourceManager.getMediaContent($r('app.media.test0'));
    let pixelBuffer = imageArray.buffer as ArrayBuffer;
    let imageResource = image.createImageSource(pixelBuffer);
    let opts: image.DecodingOptions = { editable: true }
    let pixelMap = await imageResource.createPixelMap(opts);

    // 压缩图片，获取ArrayBuffer
    const imagePackerApi: image.ImagePacker = image.createImagePacker();
    let packOpts: image.PackingOption = { format: 'image/jpeg', quality: 30 };
    imagePackerApi.packing(pixelMap, packOpts).then((data: ArrayBuffer) => {
      // 老规矩三件套，创建对象，填充，发射
      let imageObject = new wxopensdk.WXImageObject

      let buf: buffer.Buffer = buffer.from(data);
      imageObject.imageData = buf.toString('base64', 0, buf.length);

      let mediaMessage = new wxopensdk.WXMediaMessage()
      mediaMessage.mediaObject = imageObject

      let req = new wxopensdk.SendMessageToWXReq()
      req.scene = this.currentScene
      req.message = mediaMessage

      this.wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
    })
  }

注意

微信分享 图片大小有限制，需要小于100kb。所以最好使用Uri的形式进行图片分享。要不然你得处理图片压缩。