从零到一教你在HarmonyOS鸿蒙Next中实现微信分享–全流程

前言

大家好，我是青蓝逐码组织的君莫笑。

随着鸿蒙生态发展越来越好，微信各种功能也能随之接入了，今天教大家如何接入微信分享的所有功能，主要包括微信分享小程序，微信分享h5。此次分享只分享关键代码，最后需要大家自己学习然后合并成一个工具类哦

首先接入微信sdk

在终端输入 ohpm i @tencent/wechat_open_sdk 即可依赖微信的sdk

微信平台中创建鸿蒙应用（如已创建请跳过此处）

使用微信sdk需要应用在微信开发平台创建了鸿蒙应用，创建流程可查看链接，此处不做教学

实现微信分享前的准备工作

在module.json5中加入字段

创建WX实例（越早创建越好）

// WXApi 是第三方app和微信通信的openApi接口，其实例通过WXAPIFactory获取，需要传入应用申请到的AppID
export const WXApi = wxOpenSdk.WXAPIFactory.createWXAPI(APP_ID)

说明

• appid和微信平台安卓应用的appid相同，创建鸿蒙应用后直接复用即可

现在开始实现微信分享的工具类（搭建底子，最后实现的完整工具类自行合并）

/**
 * 微信分享
 */
export class WxShareViewModel {
  // 此处换成真实appid
  WXApi = wxOpenSdk.WXAPIFactory.createWXAPI('')
  static instance: WxShareViewModel | null = null
  isWXApp: boolean = this.WXApi.isWXAppInstalled()

  private constructor() {

  }

  static getInstance() {
    if (!WxShareViewModel.instance) {
      WxShareViewModel.instance = new WxShareViewModel()
    }
    return WxShareViewModel.instance
  }
}

说明

• 我推荐使用单例去实现工具类，这样比较简洁并且封装不易被污染

实现分享文本

/**
 * 分享文本
 * @param text 文本内容
 */
textShare(text: string) {
  this.isWXAPPCallback(() => {
    let textObject = new wxOpenSdk.WXTextObject
    textObject.text = text
    let mediaMessage = new wxOpenSdk.WXMediaMessage()
    mediaMessage.mediaObject = textObject
    let req = new wxOpenSdk.SendMessageToWXReq()
    req.scene = wxOpenSdk.SendMessageToWXReq.WXSceneSession
    req.message = mediaMessage
    this.WXApi.sendReq(getContext(this) as common.UIAbilityContext, req)
  })
}

实现分享h5

1. 其中需要关注的是，分享h5以及小程序携带图片，要进行下载图片buffer以及压缩到64kb以下才能进行分享，不然就会报错无反应

2. 现在先实现压缩buffer至64kb以下

3. 实现下载图片

export function loadImageUrl(url: string, successCallBack: (ImgArrayBuffer: ArrayBuffer) => void) {
  http.createHttp()
    .request(url,
      {
        method: http.RequestMethod.GET,
      },
      async (error: BusinessError, data: http.HttpResponse) => {
        if (http.ResponseCode.OK === data.responseCode) {
          let imageBuffer: ArrayBuffer = data.result as ArrayBuffer;
          const imageSource = image.createImageSource(imageBuffer)
          imageSource.createPixelMap()
            .then((pixelMap: image.PixelMap) => {
              compressedImage(pixelMap, 64)
                .then((arrayBuffer) => {
                  successCallBack(arrayBuffer)
                })
            })
        }
      })
}

说明

• 通过createHttp下载图片，url传入实际的网络地址
• 第二个successCallBack为成功回调函数，网络请求成功后进行回调函数处理并且传入压缩后的arrayBuffer
• 因为华为官网例子无法直接传入arrayBuffer进行压缩，而需要pixelMap格式，因此我们需要将arrayBuffer转换为pixelMap格式

4. 实现是否安装微信回调函数

isWXAPPCallback(callback: Function) {
  if (!this.isWXApp) {
    AlertDialog.show({ message: JSON.stringify("请先安装微信") })
  } else {
    callback()
  }
}

5. 核心准备工作已经完成，我们开始实现分享h5

/**
 * 分享h5
 * @param Url 网页地址
 * @param title 标题
 * @param description 描述
 * @param imgUrl 图片网络地址
 */
h5Share(Url: string, title: string, description: string, imgUrl: string) {
  this.isWXAPPCallback(async () => {
    const webpageObject = new wxOpenSdk.WXWebpageObject()
    webpageObject.webpageUrl = Url
    const mediaMessage = new wxOpenSdk.WXMediaMessage()
    mediaMessage.mediaObject = webpageObject
    mediaMessage.title = title
    mediaMessage.description = description
    loadImageUrl(imgUrl, async (buffer) => {
      mediaMessage.thumbData = new Uint8Array(buffer)
      const req = new wxOpenSdk.SendMessageToWXReq()
      req.scene = wxOpenSdk.SendMessageToWXReq.WXSceneSession
      req.message = mediaMessage
      this.WXApi.sendReq(getContext(this) as common.UIAbilityContext, req)
    })
  })
}

说明

• 通过是否安装微信回调函数包裹，再进行核心代码
• 最后进行下载图片的buffer函数，传入成功回调后的函数，并将压缩后的buffer传给sdk进行分享

实现微信分享小程序

/**
 * 分享小程序
 * @param userName 小程序的原始 id(gh_xxxx形式的id)
 * @param path 小程序的 path
 * @param miniprogramType 小程序的类型, 默认正式版
 * @param title 标题
 * @param description 描述
 * @param imgUrl 网络图片地址
 */
miniProgramShare(userName: string, path: string, miniprogramType: number, title: string, description: string,
  imgUrl: string) {
  this.isWXAPPCallback(async () => {
    const miniProgramObject = new wxOpenSdk.WXMiniProgramObject()
    miniProgramObject.userName = userName
    miniProgramObject.path = path
    miniProgramObject.miniprogramType = miniprogramType
    const mediaMessage = new wxOpenSdk.WXMediaMessage()
    mediaMessage.mediaObject = miniProgramObject
    mediaMessage.title = title
    mediaMessage.description = description
    loadImageUrl(imgUrl, async (buffer) => {
      mediaMessage.thumbData = new Uint8Array(buffer)
      const req = new wxOpenSdk.SendMessageToWXReq()
      req.scene = wxOpenSdk.SendMessageToWXReq.WXSceneSession
      req.message = mediaMessage
      this.WXApi.sendReq(getContext(this) as common.UIAbilityContext, req)
    })
  })
}

说明

• 压缩图片函数如分享h5一样
• 大多数参数都是为接口下发

最后

以上就是本次分享给大家的一些教学了，如果这个文章对你有帮助，恳请三连。

青蓝逐码组织官网的服务器申请和域名在申请中，有结果了会第一时间分享我们的组织，后续我会持续分享一些实际项目遇到的难题解决方案，希望大家多多关注哦！