【微信授权】cocos creator 3.6.1 微信头像 用户登录授权，微信昵称，用户授权按钮UserInfoButton 创建。_createuserinfobutton

cocos creator 微信头像，微信昵称获取，用户授权按钮显示。头像不显示问题解决，头像显示授权文字
注意，目前微信提供的api只能拿到用户头像和昵称，其余信息都没法拿到
如果你能够拿到的话，可以留下评论告诉我方法，我会再次优化该博客，感谢

0.官方api链接

微信API相关接口文档

1.微信登录授权脚本【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;
    })
  }


}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

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
})
1
2
3
4
5
6
7
8

2.2头像显示问题解决

1.配置域名

小程序后台管理 >开发管理> 开发设置==> 服务器域名

2.添加aaa=aa.jpg

3.demo演示

4.我的github和gitee 到时候会把项目demo发布到上面，敬请期待，留言加快博主进度