HarmonyOS NEXT——【鸿蒙分享微信链接、小程序跳转】

1、鸿蒙应用将图片/链接形式分享到微信

1.1、申请授权码

 首先我们在接入微信sdk之前，需要在微信开放平台申请平台的id授权码和secret用来进行授权。申请secret我们需要填写BundleID和Identifier，那么这两个东西其实对应的就是鸿蒙应用的包名appName以及鸿蒙应用的appid，我们将应用信息填写后等待审核完成后即可获取到应用对应的平台授权码。接入指南 / 鸿蒙接入指南

​

​

补充：如果您还未创建鸿蒙项目，具体查看鸿蒙官网项目创建和发布指导：创建HarmonyOS应用/元服务-创建应用-创建项目和应用-AppGallery Connect帮助中心 - 华为HarmonyOS开发者

1.1.1、查看Bundle ID：

Bundle ID 指的是鸿蒙应用的包名：

​

1.1.2、查看鸿蒙应用appid：

Identifier 指的是鸿蒙应用的 appId，详情可以在AGC平台上查看：

​

1.1.3、申请成功并查看授权码：（大概需要等待审核时间一天左右）

申请成功后，将可以在微信开放平台——开发配置——鸿蒙应用，查看到APPID以及AppSecret这两个授权码，在后续集成微信sdk中需要使用。

​

1.2、集成微信sdk：

这里我提供下相关sdk导入的参考代码，具体可参考微信开放平台相关demo以及文档：

//entry\src\main\ets\common\utils\微信支付宝三方SDK工具\微信支付宝登录\WXApiWrap.ets
import * as wxopensdk from '@tencent/wechat_open_sdk';
import { CommonConstants } from '../../../constants/CommonConstants';
​
export type OnWXReq = (req: wxopensdk.BaseReq) => void
export type OnWXResp = (resp: wxopensdk.BaseResp) => void
​
const kTag = "WXApiEventHandlerImpl"
​
class WXApiEventHandlerImpl implements wxopensdk.WXApiEventHandler {
  private onReqCallbacks: Map<OnWXReq, OnWXReq> = new Map
  private onRespCallbacks: Map<OnWXResp, OnWXResp> = new Map
​
  registerOnWXReqCallback(on: OnWXReq) {
    this.onReqCallbacks.set(on, on)
  }
  unregisterOnWXReqCallback(on: OnWXReq) {
    this.onReqCallbacks.delete(on)
  }
​
  registerOnWXRespCallback(on: OnWXResp) {
    this.onRespCallbacks.set(on, on)
  }
  unregisterOnWXRespCallback(on: OnWXResp) {
    this.onRespCallbacks.delete(on)
  }
​
  onReq(req: wxopensdk.BaseReq): void {
    wxopensdk.Log.i(kTag, "onReq:%s", JSON.stringify(req))
    this.onReqCallbacks.forEach((on) => {
      on(req)
    })
  }
​
  onResp(resp: wxopensdk.BaseResp): void {
    wxopensdk.Log.i(kTag, "onResp:%s", JSON.stringify(resp))
    this.onRespCallbacks.forEach((on) => {
      on(resp)
    })
  }
}
  /**
   * ！！！这里的appid和secret就是一开始申请的授权码。(填写不正确则无法成功进入微信应用!!!)
   * WXAPP_ID = "wx4e71fe1xxxxxxxxx"
   * WXAPP_SECRET = "305a1eb0dc9dxxxxxxxxxxx"
   */
export const WXApi = wxopensdk.WXAPIFactory.createWXAPI(CommonConstants.WXAPP_ID)
export const WXEventHandler = new WXApiEventHandlerImpl

1.3、分享链接/图片：

以下我以分享链接，以及分享图片到微信作为示例提供参考：

效果：

​​

import * as wxopensdk from '@tencent/wechat_open_sdk'; // 导入微信 SDK
import { image } from "@kit.ImageKit";
import { common } from "@kit.AbilityKit";
import { WXApi } from "../微信支付宝登录/WXApiWrap";
​
​
export class WXShareUtil {
  static WXWebpageShare(url: string, title: string, message: string) {
    //分享网页链接
    const webpageObject = new wxopensdk.WXWebpageObject()
    webpageObject.webpageUrl = url
​
    const mediaMessage = new wxopensdk.WXMediaMessage()
    mediaMessage.mediaObject = webpageObject
    mediaMessage.title = title
    mediaMessage.description = message
​
    getContext().resourceManager.getMediaContent($r("app.media.push"))//链接展示的图片
      .then((thumbData) => {
        const thumbPixel = image.createImageSource(thumbData.buffer).createPixelMapSync()
        image.createImagePacker().packToData(thumbPixel, { format: "image/png", quality: 100 })
          .then((thumbBuffer) => {
​
            mediaMessage.thumbData = new Uint8Array(thumbBuffer)
​
            const req = new wxopensdk.SendMessageToWXReq()
            // req.callbackAbility = kDemoEntryAbility
            req.scene = wxopensdk.SendMessageToWXReq.WXSceneSession
            req.message = mediaMessage
​
            WXApi.sendReq(getContext() as common.UIAbilityContext, req)
          })
​
      })
  }
​
  static WXImageShare(url:string) {
    //分享图片
​
    let imageObject = new wxopensdk.WXImageObject
    // let buf: buffer.Buffer = buffer.from(url);
    // imageObject.imageData = buf.toString('base64', 0, buf.length);
    imageObject.imageData = url
​
    let mediaMessage = new wxopensdk.WXMediaMessage()
    mediaMessage.mediaObject = imageObject
​
    let req = new wxopensdk.SendMessageToWXReq()
    req.scene = wxopensdk.SendMessageToWXReq.WXSceneSession
    req.message = mediaMessage
​
    WXApi.sendReq(getContext() as common.UIAbilityContext, req)
  }
}

1.4、跳转微信小程序：

此外，微信sdk已经支持拉起微信小程序的功能，示例效果如下：

​​

参考代码：

import * as wxopensdk from '@tencent/wechat_open_sdk'; // 导入微信 SDK
import { common } from '@kit.AbilityKit';
import { WXApi } from '../微信支付宝登录/WXApiWrap';
​
export class WXMiniProgram {
  static async LaunchMiniPrograms() {
    try {
      let context = getContext() as common.UIAbilityContext; // 假定我们在组件环境内调用
​
      let launchMiniProgramReq = new wxopensdk.LaunchMiniProgramReq;
      launchMiniProgramReq.userName = 'gh_dca141cxxxxx'; //拉起的小程序的原始id
      // launchMiniProgramReq.path = path;    //拉起小程序页面的可带参路径，不填默认拉起小程序首页，对于小游戏，可以只传入 query 部分，来实现传参效果，如：传入 "?foo=bar"。
      launchMiniProgramReq.miniprogramType = 0; //拉起小程序的类型 0-正式版 1-开发版 2-体验版
      let success = await WXApi.sendReq(context, launchMiniProgramReq);
​
    } catch (e) {
    }
  }
}