一、前期准备

集成微信SDK到项目后开始代码实现：

全局回调监听：

import * as wxopensdk from '@tencent/wechat_open_sdk';
import { APP_ID } from '../Constants';

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)
    })
  }
}

export const WXApi = wxopensdk.WXAPIFactory.createWXAPI(APP_ID)
export const WXEventHandler = new WXApiEventHandlerImpl

UI调用授权接口

        import { OnWXResp, WXApi, WXEventHandler } from '../model/WXApiWrap';


        let req = new wxopensdk.SendAuthReq
        req.isOption1 = false
        req.nonAutomatic = true
        req.scope = 'snsapi_userinfo,snsapi_friend,snsapi_message,snsapi_contact'
        req.state = 'none'
        req.transaction = 'test123'

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

监听接口返回结果：

private wxApi = WXApi
  private wxEventHandler = WXEventHandler
  @State authResultText: string = ''

  private onWXResp: OnWXResp = (resp) => {
    this.authResultText = JSON.stringify(resp ?? {}, null, 2)
  }

在Pege页面的调用

1. 初始化 SDK（建议放在 onCreate() 中）

import wxopensdk from '@tencent/wechat_open_sdk';

export default class MainAbility extends UIAbility {
    private wxApi: any;

    onCreate(want, launchParam) {
        this.wxApi = wxopensdk.WXApi;
        // 替换为你的 AppID
        this.wxApi.registerApp(this.context as common.UIAbilityContext, "YOUR_APPID");
    }
}

2. 触发微信登录（如点击按钮后调用）

// 在某个页面或组件中定义方法
loginWithWeChat() {
    let req = new wxopensdk.SendAuthReq();
    req.scope = 'snsapi_userinfo'; // 获取用户信息
    req.state = 'STATE_' + Math.random().toString(36).substring(7); // 随机state值
    this.wxApi.sendReq(this.context as common.UIAbilityContext, req);
}

3. 处理微信回调（重写 onNewWant 方法）

onNewWant(want) {
    super.onNewWant(want);

    if (want && want.parameters && want.parameters.code) {
        const code = want.parameters.code;
        console.info("微信登录成功，code:", code);

        // 此处应将 code 发送到你的服务器，换取 access_token 和用户信息
        // 示例伪代码：
        // sendCodeToServer(code);
    } else if (want && want.parameters && want.parameters.errCode) {
        console.error("微信登录失败，错误码:", want.parameters.errCode);
    }
}

以上就是鸿蒙接入微信SDK登录的方法：