#跟着晓明学鸿蒙# 鸿蒙Next开发中ohpm三方库使用指南之zyl-wxcommonlibhar集成示例

_Indulge

10人浏览 · 2025-05-21 22:09:04

_Indulge · 2025-05-21 22:09:04 发布

前言

随着鸿蒙生态蓬勃发展，各种实用的鸿蒙三方库已成为开发者高效开发的利器。它不仅能拓展应用功能边界，还能大幅提升开发效率，不管你是刚接触鸿蒙开发的小白，还是开发时长两年半的老司机，掌握这些三方库，绝对能让你在鸿蒙开发上更加方便！博主在日常的工作开发中也常常集成各种三方库，今天带大家学习的是wxcommonLibHar三方库。

wxcommonLibHar（harmony-utils (API12 - 5.0.3.906)

SDK版本要求：HarmonyOS 5.0.3 Beta2 SDK，原样包含OpenHarmony SDK Ohos_sdk_public 5.0.3.131 (API Version 15 Beta2)

🏆简介

wxcommonLibHar是微信封装使用如微信分享，微信登录，微信支付等

🌞下载安装

  ohpm install @zyl/wxcommonlibhar

🙏使用说明

前期准备

申请appid，需要准备Bundle ID、Identifier

Bundle ID 指的是鸿蒙应用的包名，详情可查看

Identifier 指的是鸿蒙应用的 appIdentifier，详情可查看

注意事项：

环境安装

ohpm i @tencent/wechat_open_sdk

ohpm i @zyl/wechatcommonlibhar

在 module.json5 文件中加入

    "querySchemes": [
      "weixin",
    ],
        ........

        "skills": [
        // 开始复制
             {
            "entities": [
              "entity.system.browsable",
              "entity.system.home"
            ],
            "actions": [
              "action.system.home",
              "wxentity.action.open"
            ]
          }
          // 结束复制

至此完毕开始引入包写代码

建立一个common.ets放 export const APP_ID = 'wx66666666666'

export  const APP_ID = 'wx66666666666'

使用

EntryAbility.ets加上初始化代码

import { handleWeChatCallIfNeed } from '@zyl/wechatcommonlibhar'; // 包
import { APP_ID } from './common';


export default class EntryAbility extends UIAbility {
  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    handleWeChatCallIfNeed(want,APP_ID) // 微信需要的
  }

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
     wxopensdk.Log.i('kTag', "onResp:%s") // 如果项目中没有使用，运行的时候会把这个包清楚，可能。
    handleWeChatCallIfNeed(want,APP_ID) // 微信需要的

  }

检查微信是否安装

const flag = checkWeChatApp()  // 返回布尔值

微信分享文字

new ShareWxSdk("APP_ID","分享对话还是朋友圈，不传就是对话")

@param currentScene(可传，默认0(SendMessageToWX.Req.WXSceneSession))，发送的目标场景,

    let share = new ShareWxSdk(APP_ID)
    share.wechatSendText('WechatSendText666').then((res:SendReqResultWrap)=>{
    console.log('resres',res)
  })

微信分享图片一网络图片或者arraybuffer

系统跳转限制大小不能超过100KB，uri和imageData同时存在时会优先使用uri字段
wechatSendImagrOrUrl(param) param 可以是string（网络地址）也可以是ArrayBuffer，代码自行判断处理

@param currentScene(可传，默认0)，发送的目标场景

  let share = new ShareWxSdk(APP_ID)
  share.wechatSendImagrOrUrl('图片地址').then((res:SendReqResultWrap)=>{
    console.log('resres',res)
  })

微信分享图片二从相册选择图片发送

@param currentScene(可传，默认0(SendMessageToWX.Req.WXSceneSession))，发送的目标场景,
@param filePath (可传可忽略) 指定缓存的地址，便于项目缓存的维护
默认是在getContext().cacheDir + '/Photo' + ${Date.now()}hongmeng${Math.random()}IMG.jpg

import { SendReqResultWrap } from "@tencent/wechat_open_sdk"
  let share = new ShareWxSdk(APP_ID)
  share.wechatSendAlbumSelection().then((res:SendReqResultWrap)=>{
    console.log('resres',res)
  })

微信拉起小程序

@param param:LaunchMiniProgramReq

import { LaunchMiniProgramReq } from "@tencent/wechat_open_sdk"
  let share = new ShareWxSdk(APP_ID)
        share.wechatLaunchMiniProgram({
          userName:'gh_00000000000000000000',
          path:'/pages/index'
        } as LaunchMiniProgramReq)

微信支付

wechatPay

@param param:PayReq

       let share = new ShareWxSdk(APP_ID)
          share.wechatPay({
            appId: "wx0000000000000000",
            partnerId: "000000000000000",
            prepayId: "wx000000000000000",
            nonceStr: "aaaaaaaaaaaaaaaaaaaa",
            timeStamp: "000000000000000",
            packageValue: "packageValue",
            sign: "000000000000000000000000",
            extData: 'extData',
            signType: 'signType'
          } as PayReq).then((res:BaseResp)=>{

          if(res instanceof PayResp){
           // 使用支付的类型
          }
            console.log('支付完成后，从微信回来的回调',JSON.stringify(res))
          })

微信授权登录+ code换token +获取用户信息

share.wechatOAuth(scope, state)

@param scope //应用授权作用域，获取用户个人信息则填写 snsapi_userinfo （只能填 snsapi_userinfo）
@param state 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf
攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加 session 进行校验。在state传递的过程中会将该参数作为url的一部分进行处
参数详情可见

share.getUserInfo(APP_SECRET,res)
@param res wechatOAuth授权返回的值
@param APP_SECRET 应用密钥 AppSecret，在微信开放平台提交应用审核通过后获得

            Button('授权并且获取用户信息').onClick(async () => {
              const scope = "ssssssssssss"
              const state = "bbbbbbbbb"
              const APP_SECRET = "ssssssssssssssssssssfdsfef"
              let share = new ShareWxSdk(APP_ID)
              try {
                const res:BaseResp = await share.wechatOAuth(scope, state,()=>{
              // 跳转到了微信，但是还没有回调的时候的函数,一般情况下没啥用，就跳过去了
              console.log('resisStart')
            })
                console.log('resres', res,res instanceof SendAuthResp)
               // loading开始转圈圈了
                if (res instanceof SendAuthResp) {
                  // 使用登录的类型
                  console.log('resrescatch', res.code)

                    //获取用户信息，调用了一个rcp，请求微信的接口
                  const data:WechatUserUserInfo =  await share.getUserInfo(APP_SECRET,res)
                  console.log('resrescatch', data)
                  AlertDialog.show({
                    message:'-'+JSON.stringify(data)
                  })
                }
              } catch (e) {
                // loading结束转圈圈
              }
            })

小程序类型分享示例

        Button('小程序类型分享示例')
          .onClick(async () => {
            const wxApi = MyWXApi(APP_ID)
            const miniProgramObject = new WXMiniProgramObject()
            miniProgramObject.userName = "gh_ac032d0848a9"
            miniProgramObject.path = "pages/Home/Home"
            miniProgramObject.miniprogramType = WXMiniProgramType.RELEASE

            const mediaMessage = new WXMediaMessage()
            mediaMessage.mediaObject = miniProgramObject
            mediaMessage.title = "测试分享小程序Title"
            mediaMessage.description = "分享小程序描述信息"

            const thumbData = await getContext(this).resourceManager.getMediaContent($r("app.media.loading_white_new"))
            const thumbPixel = image.createImageSource(thumbData.buffer).createPixelMapSync()
            const thumbBuffer = await image.createImagePacker().packToData(thumbPixel, { format: "image/png", quality: 100 })
            mediaMessage.thumbData = new Uint8Array(thumbBuffer)

            const req = new SendMessageToWXReq()
            req.callbackAbility = "kDemoEntryAbility"
            req.scene = SendMessageToWXReq.WXSceneSession
            req.message = mediaMessage

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

微信网页类型分享-演示原生wxapi使用-可自行扩展

Button('网页类型分享')
          .onClick(async () => {
            const wxApi = MyWXApi(APP_ID)
            const webpageObject = new WXWebpageObject()
            webpageObject.webpageUrl = "http://www.qq.com"
            const mediaMessage = new WXMediaMessage()
            mediaMessage.mediaObject = webpageObject
            mediaMessage.title = "测试网页链接"
            mediaMessage.description = "测试网页摘要"
            const thumbData = await getContext(this).resourceManager.getMediaContent($r("app.media.video_cache_play"))
            const thumbPixel = image.createImageSource(thumbData.buffer).createPixelMapSync()
            const thumbBuffer =
              await image.createImagePacker().packToData(thumbPixel, { format: "image/png", quality: 100 })
            mediaMessage.thumbData = new Uint8Array(thumbBuffer)
            const req = new SendMessageToWXReq()
            req.callbackAbility = 'callbackAbility'
            req.scene = SendMessageToWXReq.WXSceneSession
            req.message = mediaMessage
            wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
          })

微信拉起App时，App如何接受来自微信的数据

handleWeChatCallIfNeed(want, APP_ID_WX)

WXEventHandlerOnReq() // 处理从微信的拉起App的参数。也可以用want获取
// 如果用want，可以忽略
export const WXEventHandlerOnReq = ()=>{
  const paramWx = WXEventHandler.onReqAppParam() // 获取参数
  if(paramWx&&paramWx instanceof LaunchFromWXReq){
    console.log('paramWx1',JSON.stringify(paramWx))
    console.log('paramWx2',JSON.stringify( paramWx.message?.messageExt))
  }
  WXEventHandler.onReqAppReset() // 用完重置,不用也可以重置，不重置下次进来还有
}

微信原生使用

如果想使用其他的也可以使用微信原来的WXApi-封装后叫做MyWXApi

import { MyWXApi  } from '@zyl/wxcommonlibhar';
MyWXApi(APP_ID).sendReq(...或者其他)

完整的demo

import {
  BaseResp,
  LaunchMiniProgramReq,
  PayReq,
  SendAuthResp,
  SendMessageToWXReq,
  SendReqResultWrap,
  WXMediaMessage,
  WXTextObject,
  WXWebpageObject
} from "@tencent/wechat_open_sdk"
import { MyWXApi } from "@zyl/wxcommonlibhar"
import { checkWeChatApp } from "@zyl/wxcommonlibhar"
import { ShareWxSdk, WechatUserUserInfo } from "@zyl/wxcommonlibhar"
import { APP_ID, APP_SECRET, scopeReq, stateReq } from "./utils/Constants" // 这个需要申请哟
import { common } from "@kit.AbilityKit"
import { image } from "@kit.ImageKit"

@Component
export struct wechatDemo {
  private share: ShareWxSdk = new ShareWxSdk(APP_ID)

  build() {
    RelativeContainer() {
      Column() {
        Button('授权并且获取用户信息').onClick(async () => {
          try {
            const res: BaseResp = await this.share.wechatOAuth(scopeReq, stateReq)
            console.log('resres', res, res instanceof SendAuthResp)
            if (res instanceof SendAuthResp) {
              // 使用支付的类型
              console.log('resrescatch', res.code)
              const data: WechatUserUserInfo = await this.share.getUserInfo(APP_SECRET, res)
              AlertDialog.show({
                message: '-' + JSON.stringify(data)
              })
            }
          } catch (e) {
          }
        })
        Button('微信支付').onClick(async () => {
          this.share.wechatPay({
            appId: this.share.APP_ID,
            partnerId: "partnerId",
            prepayId: "prepayId",
            nonceStr: "nonceStr",
            timeStamp: "timeStamp",
            packageValue: "packageValue",
            sign: "sign",
            extData: 'extData',
            signType: '"signType"'
          } as PayReq).then((res: BaseResp) => {
            console.log('支付', JSON.stringify(res))
            AlertDialog.show({
              message: '' + JSON.stringify(res)
            })
          }).catch((e: Error) => {
            AlertDialog.show({
              message: '' + JSON.stringify(e)
            })
          })
        })
        Button('微信分享图片')
          .onClick(() => {
            this.share.wechatSendImagrOrUrl('http图片.jpg')
              .then((res: SendReqResultWrap) => {
                console.log('resres', res)
              }).catch((e: Error) => {
              console.log('resrescatch', JSON.stringify(e))
            })
          })

        Button('是否安装微信')
          .onClick(() => {
            const flag = checkWeChatApp() // 返回布尔值
            AlertDialog.show({
              message: '' + JSON.stringify(flag)
            })
          })


        Button('微信分享文字')
          .onClick(() => {
            let share = new ShareWxSdk(APP_ID)
            share.wechatSendText('WechatSendText666').then((res: SendReqResultWrap) => {
              AlertDialog.show({
                message: '' + JSON.stringify(res)
              })
            })

          })
        Button('微信分享图片二 从相册选择图片发送')
          .onClick(() => {
            this.share.wechatSendAlbumSelection().then((res: SendReqResultWrap) => {
              AlertDialog.show({
                message: '' + JSON.stringify(res)
              })
            })
          })

        Button('微信拉起小程序')
          .onClick(() => {
            this.share.wechatLaunchMiniProgram({
              userName: '00000000000000000000000',
              path: '/index'
            } as LaunchMiniProgramReq)
          })

        Button('微信原生使用MyWXApi(APP_ID)')
          .onClick(() => {
            const wxApi = MyWXApi(APP_ID)
            let textObject = new WXTextObject
            textObject.text = "分享的内容"
            let mediaMessage = new WXMediaMessage()
            mediaMessage.mediaObject = textObject
            let req = new SendMessageToWXReq()
            req.scene = SendMessageToWXReq.WXSceneSession
            req.message = mediaMessage
            wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
          })
        Button('网页类型分享')
          .onClick(async () => {
            const wxApi = MyWXApi(APP_ID)
            const webpageObject = new WXWebpageObject()
            webpageObject.webpageUrl = "http://www.qq.com"
            const mediaMessage = new WXMediaMessage()
            mediaMessage.mediaObject = webpageObject
            mediaMessage.title = "测试网页链接"
            mediaMessage.description = "测试网页摘要"
            const thumbData = await getContext(this).resourceManager.getMediaContent($r("app.media.video_cache_play"))
            const thumbPixel = image.createImageSource(thumbData.buffer).createPixelMapSync()
            const thumbBuffer =
              await image.createImagePacker().packToData(thumbPixel, { format: "image/png", quality: 100 })
            mediaMessage.thumbData = new Uint8Array(thumbBuffer)
            const req = new SendMessageToWXReq()
            req.callbackAbility = 'callbackAbility'
            req.scene = SendMessageToWXReq.WXSceneSession
            req.message = mediaMessage
            wxApi.sendReq(getContext(this) as common.UIAbilityContext, req)
          })
      }
    }.id('refershEmptyClass').width('100%').height('auto')
  }
}

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

HarmonyOS开发者集合！“智问智答挑战月”来袭，边解难题边赢会员+定制周边！

HarmonyOS开发者社区

鸿蒙，下一个iPhone时刻？

各个端口的连接跳转顺畅，无需多余的点击步骤，实现更自然的用户体验，也极大程度的提升了多设备协调的效率。例如，当手机、平板、智慧屏组成跨设备工作空间时，软件需要调用手机的 5G 模块、平板的触控笔协议、智慧屏的显示驱动，这种多硬件协同能力的实现，依赖于硬件层面统一的互联协议与接口标准。最近，国新办举行的“高质量完成‘十四五’规划”系列主题新闻发布会上表示，国产操作系统加速崛起，以鸿蒙系统为例，鸿蒙生