cocosCreator微信小游戏之获取用户昵称、头像等信息(二)

news2025/1/22 14:40:28

版本： 3.4.0

语言： TypeScript

环境： Mac

简介

在上篇博客中，主要讲述内容：wx API在cocosCreator中配置定义文件和微信后台配置用户隐私相关。

讲述的主要原因是：

cocosCreator没有对 wx API提供定义接口支持
使用wx API需要配置用户隐私保护才能调用获取信息

需要注意：微信接口的调式，需要cocosCreator打包微信小游戏，并在 微信开发者工具运行才能调试。

上篇博客： cocosCreator微信小游戏之配置wxAPI

本篇博客主要讲述内容：

授权按钮和获取用户信息的创建
域名问题导致用户头像显示不出的解决方式
其他

示例

在cocosCreator中创建一个页面，主要节点是：

avatarNode 精灵，用于显示头像
nameLabel 文本，用于显示昵称

请添加图片描述

调用 wx API相关接口前，我们需要注意：

微信用户信息属于敏感信息，获取的话必须经过用户授权同意
已经授权同意的，就不需要进行重复的授权请求

调用的主要接口：

wx.createUserInfoButton 用于创建用户信息按钮，用户点击授权后，我们就可以获取用户信息了
wx.getUserInfo 用户获取用户信息，签名，加密等数据
wx.getSetting 获取已请求的授权权限相关，如果已授权则返回true

主要思路：

通过wx.getSetting获取用户信息权限是否已申请
如果已申请，则调用wx.getUserInfo 获取用户信息数据
如果没有申请，则调用wx.createUserInfoButton生成用户信息按钮进行授权

为了以后的方便拓展，代码的实现主要有两部分：

LoginLayer.ts 主要用于UI的逻辑处理相关
WechatManager.ts 管理类，主要负责调用wx API的接口相关

LoginLayer.ts

import { _decorator, assetManager, Component, ImageAsset, Label, Node, Sprite, SpriteFrame, Texture2D } from 'cc';
const { ccclass, property } = _decorator;
import { WechatManager } from './manager/WechatManager';

@ccclass('LoginLayer')
export class LoginLayer extends Component {
  @property(Node) avatar: Node = null;        // 头像
  @property(Label) nameLabel: Label = null;   // 昵称

  protected start(): void {
    WechatManager.instance.initAutoSetting((url) => {
      this.setAvatar(url);
    });
  }

  public clickShareEvent() {
    WechatManager.instance.showShareMenu();
  }

  //设置头像
  private setAvatar(url): void {
    let spire = this.avatar.getComponent(Sprite);
    assetManager.loadRemote<ImageAsset>(url + "?aaa=aa.jpg", { ext: '.jpg' }, (err, imageAsset) => {
      if (err) {
        return console.error(err.message);
      }

      let sp = new SpriteFrame();
      let texture = new Texture2D();
      texture.image = imageAsset;
      sp.texture = texture
      spire.spriteFrame = sp;
    })
  }
}

WechatManager.ts

// wxAPI: https://developers.weixin.qq.com/minigame/dev/api/
import { _decorator, screen} from 'cc';
const { ccclass, property } = _decorator;

export class WechatManager {
  private static _instance: WechatManager = null;  
  // 用户信息: 昵称，头像,语言等
  private _userInfo;
  // 头像回调
  private _avatarCallBack = null;

  static get instance() {
    if (this._instance) {
      return this._instance;
    }
    this._instance = new WechatManager();
    return this._instance;
  }

  // 获取标记权限
  public initAutoSetting(callBack) {
    this._avatarCallBack = callBack;
    // 避开ts语法检测
    const wx = window['wx'];
    // 获取请求过的权限标记
    let object: any = {
      // 成功回调         
      success: (res) => {
        // 是否授权用户信息
        const autoSetting = res.authSetting;
        if (autoSetting["scope.userInfo"]) {
          // 已授权
          this.getUserInfo();
        } else {
          // 未授权
          this.creatUserInfoButton();
        }
      },
      // 失败回调
      fail() {
        console.log("wx.getSetting获取用户配置失败");
      },
      // 结束回调(调用成功，失败都会执行)
      complete() {
        console.log("wx.getSetting获取用户配置结束");
      }
    }
    wx.getSetting(object);
  }

  // 创建用户授权按钮(仅用于登录页面, 如果用户拒绝授权，则一直显示)
  private creatUserInfoButton(isFull: boolean = false) {
    const wx = window['wx'];
    let object: any = {
      // 按钮类型： text可设置背景色和文本 image仅能设置背景贴图
      type: "text",
      // 按钮文本，仅对type为text有效
      text: "授权",
      // 按钮样式
      style: {
        left: 70, 
        top: 60,
        width: 100,
        height: 40,
        backgroundColor: "#66CC00",
        color: "#FFFFFF",
        textAlign: 'center',
        lineHeight: 40,
        fontSize: 20,
      },
    };

    const button = wx.createUserInfoButton(object);
    // 监听用户信息按钮点击事件
    button.onTap((res) => {
      if (res && res.userInfo) {
        console.log("用户同意授权");
        this._userInfo = res.userInfo; 
        if (this._avatarCallBack) {
          this._avatarCallBack(this._userInfo.avatarUrl);
        }
        // 授权成功后，才销毁按钮
        button.destroy();
      } else {
        console.log("用户拒绝授权");
      }
    });
  }

  // 获取用户信息，需要获取scope.userInfo的授权，也就是getSettings的接口调用
  public getUserInfo() {
    const wx = window['wx'];
    let object: any = {
      success: (res) => {
        console.log("通过 getUserInfo 获取的数据:", res);
        if (res) {
          this._userInfo = res.userInfo;
          if (this._avatarCallBack) {
            this._avatarCallBack(this._userInfo.avatarUrl);
          }
        } 
      },
      fail: () => {
        console.log("getUserInfo获取信息失败");
      },
      complete: () => {},
    };
    wx.getUserInfo(object);
  }
}