cocosCreator 调用wxAPI 及后台授权设置、获取用户昵称和头像

版本: 3.8.0

语言: TypeScript

环境: Mac

官方文档:

微信官方文档 - 开放能力

微信 API



小游戏环境


在cocosCreator的3.x版本项目开发中,TypeScript最终会被转换为JavaScript语言。

JavaScript的运行时调用的API,依赖于宿主环境,常见的宿主环境有浏览器、Node.js 等。

不同的宿主环境提供着不同的API,比如来说:

  • 浏览器有 BOM 和 DOM API,而 Node.js 则没有
  • Node.js 有 fs、net 等 Node.js 核心模块提供的文件、网络 API,而浏览器则不具备

小游戏的运行环境是一个不同于浏览器的宿主环境, 它主要通过调用 wx API 的接口, 而wx API 会调用 Native提供的绘制、音视频、网络和文件等能力,实现游戏的运行。

n

在cocosCreator的项目开发中,我们可以通过调用 wx API的接口,来实现微信的登录、用户信息的获取、支付、分享朋友圈等功能。

本篇文章面向用户群体是使用cocosCreator做微信小游戏开发的小白群体,大神可以略过。

如果编写有不当之处,欢迎您的指出。



授权设置


通过 wx API相关接口获取用户的信息,需要用户授权同意,我们才能获取。

微信平台为了保障用户的合法权益和规范开发者对用户个人信息的处理行为,开发者需要在微信后台配置:

  • 用户隐私保护指引 也就是用户协议,告知用户开发者会获取那些权限等
  • 隐私授权弹窗 用于告知用户能否授权
    请添加图片描述

大致的步骤:

  1. 账号登录:https://mp.weixin.qq.com/
  2. 选择 设置 --> 基本设置 --> 服务内容声明下的用户隐私保护指引,选择更新
  3. 打开用户隐私保护指引设置,选择第二个,然后点击确认

请添加图片描述

  1. 填写用户隐私保护指引设置
    请添加图片描述

  2. 可通过增加信息类型 选择用户信息类型:
    请添加图片描述

  3. 填写信息完毕后,可确定并生成协议

  4. 返回基本设置页面 后, 可打开服务内容声明 --> 隐私授权下的 设置,注意标记部分即可
    请添加图片描述

最后,游戏在微信开发者工具运行的时候,如果调用了 wx API的请求授权接口,会弹出类似如下页面:
请添加图片描述

更多详情内容可参考:

微信小游戏文档 小游戏隐私合规开发指南

微信开发社区 小游戏《用户隐私保护指引》



cocosCreator调用wxAPI接口


在cocosCreator的脚本中调用 wx API接口,需要注意:

  1. 实现的功能,使用浏览器调试是无效的。因为微信小游戏的运行是不同于浏览器的, 可以打包后通过微信开发者工具运行调试
  2. Creator没有wx API接口的定义文件,因此脚本中编写wx都会报错

针对于第2种,可通过NPM下载 wx API 的类型定义文件,以帮助我们调用方法时,有智能提示。

具体步骤:

  1. 打开终端命令,进入指定的项目目录内
  2. 运行命令:npm install miniprogram-api-typings
  3. 下载成功后,会放在项目目录的 ./node_modules

关于 NPM 的使用相关,可参考博客:Mac安装使用NPM及常用命令。

安装后,在脚本中导入即可:

import 'miniprogram-api-typings';

更多使用配置:可参考: wechat-miniprogram 的README.md文件



实战: 获取微信用户昵称和头像


使用的主要接口是: wx.createUserInfoButton

它用于创建一个按钮,用于引导玩家点击后授权,进而获取用户的昵称、头像等信息。注意:必须同意授权后,才能获取用户信息

在cocosCreator中创建一个页面,主要节点是:

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

请添加图片描述

然后在脚本中编写代码:

import { _decorator, assetManager, Component, ImageAsset, Label, Node, Sprite, SpriteFrame, Texture2D } from 'cc';
const { ccclass, property } = _decorator;
import "miniprogram-api-typings";@ccclass('LoginLayer')
export class LoginLayer extends Component {@property(Node) avatar: Node = null;        // 头像@property(Label) nameLabel: Label = null;   // 昵称protected onLoad(): void {this.createUserBtn();}private createUserBtn() {let self = this;// 避开ts语法检测const wx = window['wx'];// 创建用户授权按钮let button = wx.createUserInfoButton({type: 'text',text: '授权',style: {left: 10,top: 76,width: 90,height: 40,lineHeight: 40,backgroundColor: "#66CC00",color: "#FFFFFF",textAlign: "center",fontSize: 18,borderRadius: 10}});button.onTap((res) => {//用户授权确认,获取用户信息if (res.userInfo) {// 设置头像const avatarUrl = res.userInfo.avatarUrl;self.setAvatar(avatarUrl);// 设置昵称self.nameLabel.string = res.userInfo.nickName as string;button.destroy();} else {console.log("用户拒绝授权");button.destroy();}});}//设置头像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 = texturespire.spriteFrame = sp;})}
}

脚本编写完成后,构建发布微信小游戏,构建完成后,通过运行打开微信开发者工具。效果图如下:

请添加图片描述

点击授权,选择同意

请添加图片描述

获取昵称,头像权限,选择允许

请添加图片描述

最终的效果:

请添加图片描述


注意事项

上面所讲的主要内容是关于wx API在cocosCreator中如何使用,针对于示例有几点需要说明下:

  1. 微信小游戏通过wx.createUserInfoButton首次授权成功后,就不需要再次调用授权了。即使用户修改了个人信息相关,获取最新的消息通过wx.getUserInfo即可。

  1. 如果考虑第一点的情况,测试的时候想取消授权,可在微信开发者工具点击:右上方… -> 设置 --> 用户信息开关关闭即可,重新进行授权调试
    请添加图片描述

  2. 用户头像的url获取成功,但显示不出来,类似报错提示: 不在以下request 合法域名表中 , 针对于测试项目的解决方案:

  • 打开mp.weixin.qq.com 开发后台
  • 选择左侧的开发管理,然后开发设置 -> 服务器域名 ,点击开始配置

请添加图片描述

主要配置如下:

请添加图片描述

然后保存提交。

再打开微信开发者工具,如下图所示:

请添加图片描述

注意:此种配置仅针对于测试项目,如果是正式的项目,请更换正式域名即可。

至此文章结束,感谢小伙伴的热心分享:

CSDN 军大君关于用户授权按钮的分享

最后,祝大家学习生活愉快!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/125650.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux学习笔记1-入门

前言&#xff1a;之前的基于单片机的闭环控制步进电机项目其实已经完成了&#xff0c;但很多时间都花在调试和生产上&#xff0c;实在没时间去做总结笔记&#xff0c;现在又开始做新项目了&#xff0c;从单片机到了Linux&#xff0c;想用这个平台来督促自己继续学习&#xff0c…

联发科MT6893(天玑1200)_MTK5G芯片规格参数性能_安卓手机主板方案

联发科天玑1200集成MediaTek 5G调制解调器&#xff0c;通过包含6大维度、72个场景测试的德国莱茵TV Rheinland认证&#xff0c;支持高性能5G连接&#xff0c;带给用户全场景的高品质5G连网体验。 进入5G时代&#xff0c;AI多媒体成为主流应用&#xff0c;天玑1200以强劲的平台…

【高效开发工具系列】你真的会使用Mac吗?

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

ROS中/odom,/map,/base_link几个坐标系的含义:从ROS的REP105严谨介绍

这两日看lego-loam&#xff0c;其中的坐标系定义很混乱。 在lego-loam的一个issue中&#xff0c;作者指出他坐标系定义是完全按照ROS的REP103和105的建议的。 然后又看到了关于/odom, /map, /base_link 几个坐标系的含义的说明&#xff0c;因此整理一下。 关于ROS的REP 关于R…

uniapp实现瀑布流

首先我们要先了解什么是瀑布流&#xff1a; 瀑布流&#xff08;Waterfall Flow&#xff09;是一种常见的网页布局方式&#xff0c;也被称为瀑布式布局或砌砖式布局。它通常用于展示图片、博客文章、商品等多个不同大小和高度的元素。 瀑布流布局的特点是每个元素按照从上到下…

现代的简洁,诠释轻奢的精致!福州中宅装饰,福州装修

轻奢风是一种生活新时尚 优雅、低调、舒适、简单&#xff0c;不断地推陈出新 站在时尚的前沿&#xff0c;引领潮流 中宅装饰集团轻奢风格产品 追求高品质生活细节 以设计精致的空间构造营造出 一种优雅、时尚生活氛围 将低调奢华之美注入现代家居设计中 客厅|The Sitt…

世界电信日 | 人大金仓助力中国移动租赁核算系统升级上线

世界电信日 5月17日恰逢第五十四个世界电信日&#xff0c;运营商作为新型基础设施建设以及维护网信安全的主力军&#xff0c;掌握关键核心技术&#xff0c;实现科技自立自强刻不容缓。 作为数据库领域国家队&#xff0c;人大金仓坚持原始创新&#xff0c;低难度、低成本、低风…

早安心语微语早读,保持一颗平常心,坐看云起落花开谢得之淡然

1、保持一颗平常心&#xff0c;坐看云起落花开谢得之淡然&#xff0c;失之坦然&#xff0c;让生命中每一天都充满着阳光和希望&#xff01; 2、每个人都一样&#xff0c;都有一段独行的日子&#xff0c;或长或短&#xff0c;这都是无可回避的。不必总觉得生命空空荡荡&#xf…

react动态插入样式

在开发组件过程中&#xff0c;偶尔需要动态的插入css&#xff0c;比如在在iframe中渲染组件后&#xff0c;iframe中是没有样式的&#xff0c;所以需要手动插入样式。 插入样式 通常是在useLayoutEffect中动态创建style标签 useLayoutEffect(() > {if (!ref.current) {cons…

ArcGIS计算土地现状容积率

本文讲解在ArcGIS中,基于建筑数据和地籍边界数据,计算土地容积率。 一、容积率介绍 容积率(Plot Ratio/Floor Area Ratio/Volume Fraction)是指一个小区的地上建筑总面积与净用地面积的比率。又称建筑面积毛密度。 二、数据分析 (1)建筑数据(dwg) (2)地籍边界数据…

C语言 写一个简易音乐播放器

#include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <math.h>#define SAMPLE_RATE 44100 // 采样率 #define AMPLITUDE 32767 // 振幅 #define NO_SAMPLES 44100 // 样本数// 声明一个结构体用于表示音符 typedef struct {double …

[USACO23OPEN] Field Day S题解

远古的回忆。 把变换一个字符视为边权为 1 1 1 的边&#xff0c;即求最长路。 最长路不好搞&#xff0c;考虑转补集最短路&#xff08;容易感性理解&#xff09;&#xff0c;BFS 即可。 #include<bits/stdc.h> #define int long long using namespace std;const int …

利用AI Chat 将电子书自动截屏并保存成pdf文件

电子书如果要下载下来&#xff0c;无非就两种类型的方法&#xff0c;一种是从内部破解&#xff0c;通常是某些极客将软件破解成免费版&#xff0c;但是风险也大。另一种是从外部破解&#xff0c;就是截屏保存&#xff0c;然后将所有图片拼成pdf文件。 如果要将整本电子书截屏保…

LeetCode刷题---简单组(六)

文章目录 &#x1f352;题目一 69. x 的平方根&#x1f352;解法一&#x1f352;解法二&#x1f352;题目二 70. 爬楼梯&#x1f352;解法一 &#x1f352;题目一 69. x 的平方根 &#x1f352;解法一 class Solution(object):def mySqrt(self, x):""":type x:…

制作一个简单的C语言词法分析程序

1.分析组成 C语言的程序中&#xff0c;有很单词多符号和保留字。一些单词符号还有对应的左线性文法。所以我们需要先做出一个单词字符表&#xff0c;给出对应的识别码&#xff0c;然后跟据对应的表格来写出程序 2.程序设计 程序主要有循环判断构成。不需推理即可产生的符号我…

SSM培训报名管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 培训报名管理系统是一套完善的信息系统&#xff0c;结合SSM框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主 要采用B/S模式开…

Windows2008系统怎么隐藏或打开文件后缀

打开服务器的控制面板-选择小图标-文件夹选项 在文件夹选项那边点击查看-隐藏一直文件类型的扩展名 选择勾选&#xff08;隐藏一直文件类型的扩展名&#xff09;-下图示文件后缀不显示 选择不勾选&#xff08;隐藏一直文件类型的扩展名&#xff09;-下图示文件后缀显示

Go-ansible

文章目录 安装包AdhocPlaybookExecuteDefaultExecute自定义执行器 Optionsansible adhoc and ansible-playbook common options Stdout CallbackResultsTransformersDefaultJSONManage JSON output 示例 Go ansible是一个用于从Golang应用程序运行ansible剧本或ansible命令的包…

VsCode 只有一个标签页 编辑区只能打开一个文件

产生如图所示的问题&#xff1a; 可能是不小心取消了勾选 勾选&#xff0c;Show Tabs

前端 : 用HTML ,CSS ,JS 做一个点名器

1.HTML&#xff1a; <body><div id "content"><div id"top"><div id "name">XAiot2302班点名器</div></div><div id "center"><div id "word">你准备好了吗?</di…