【WeChat認証】cocos Creator 3.6.1 WeChatアバターユーザーログイン認証、WeChatニックネーム、ユーザー認証ボタンUserInfoButton作成。

cocosクリエイターのWeChatアバター、WeChatニックネーム取得、ユーザー認証ボタン表示。アバターが表示されない問題を解決しました アバターには認証テキストが表示されます
なお、現在WeChatが提供するAPIではユーザーのアバターとニックネームのみ取得可能で、その他の情報は取得できませ
んコメントを残して方法を教えてください。このブログを再度最適化します、ありがとう

0.公式APIリンク

WeChat API関連のインターフェースドキュメント

1. WeChat ログイン認証スクリプト [typescript]

import {
    
     _decorator, Component, Node, url, Sprite, assetManager, ImageAsset, SpriteFrame, Texture2D, Label, EditBox, NodeEventType } from 'cc';
const {
    
     ccclass, property } = _decorator;
import 'miniprogram-api-typings';

@ccclass('WXLogin')
export class WXLogin extends Component {
    
    

  @property(Node)
  avatar: Node

  @property(Label)
  name_Label: Label

  systemInfo;
  screenWidth;
  screenHeight;
  //用户信息
  userInfo;

  onLoad(){
    
    
    this.login();
  }

  login() {
    
    
    var self = this;
    const wx = window['wx'];//避开ts语法检测
    const info = this.systemInfo = wx.getSystemInfoSync();//立即获取系统信息
    const w : number = this.screenWidth = info.screenWidth;//屏幕宽
    const h : number = this.screenHeight = info.screenHeight;//屏幕高
    console.log("屏幕宽:", w)
    console.log("屏幕高:", h)
    //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
    wx.getSetting(
      {
    
    
        success(res) {
    
    
          //如果用户已经授权
          if (res.authSetting["scope.userInfo"]) {
    
    
            wx.getUserInfo({
    
    
              success(res) {
    
    
                console.log("授权成功")
                this.userInfo = res.userInfo;
                console.log("用户已经授权,用户信息" + res.userInfo.nickName);
                console.log("nickName:" + this.userInfo.nickName);
                console.log("avatarUrl:" + this.userInfo.avatarUrl);
                self.setAvatar(this.userInfo.avatarUrl);
                self.name_Label.string = this.userInfo.nickName as string;
              }
            });
            //如果用户没有授权
          } else {
    
    
            console.log("创建全屏透明==[createUserInfoButton]");
            let button = wx.createUserInfoButton({
    
    
              type: 'text',
              text: '登录',
              style: {
    
    
                left: w/2-45,
                top: h - 30,
                width: 90,
                height: 40,
                lineHeight: 40,
                backgroundColor: "#66CC00",
                color: "#FFFFFF",
                textAlign: "center",
                fontSize: 18,
                borderRadius: 10
              }
            });
            //用户授权确认
            button.onTap((res) => {
    
    
              if (res.userInfo) {
    
    
                console.log("用户同意授权:", res.userInfo.nickName);
                this.userInfo = res.userInfo;
                self.setAvatar(this.userInfo.avatarUrl);
                self.name_Label.string = this.userInfo.nickName as string;
                button.destroy();
              } else {
    
    
                console.log("用户拒绝授权:");
                button.destroy();
              }
            });
          }
        }
      }
    );
  }

  //设置头像
  setAvatar(url): void {
    
    
    let spire = this.avatar.getComponent(Sprite)
    assetManager.loadRemote<ImageAsset>(url + "?aaa=aa.jpg", {
    
     ext: '.jpg' }, (_err, imageAsset) => {
    
    
      let sp = new SpriteFrame();
      let texture = new Texture2D();
      texture.image = imageAsset;
      sp.texture = texture
      spire.spriteFrame = sp;
    })
  }


}

2. アバターを取得してコンポーネントに表示する

assetManager.loadRemote(avatarUrl, {
    
    ext: ‘.png’}, (err, imageAsset)=>{
    
    
	let spriteFrame = new SpriteFrame();
	const texture = new Texture2D();
	texture.image = imageAsset;
	spriteFrame.texture=texture;
	//这里去设置头像的spriteFrame就OK了
	that.headerIcon.spriteFrame = spriteFrame
})

2.2 アバター表示の問題の解決

1. ドメイン名の設定

ミニプログラムのバックグラウンド管理>開発管理> 開発設定 ==> サーバードメイン名

2.添加aaa=aa.jpg

3.デモデモンストレーション

4. 私の github と gitee はその時点でプロジェクトのデモを公開する予定ですので、楽しみにしていて、ブロガーの進歩を早めるためにメッセージを残してください。