网站在线制作app_淘宝图片制作_淘宝作图用什么软件好_自动抠图的网站_微信公众号封面图_图标设计软件

淘宝图片制作_淘宝作图用什么软件好_自动抠图的网站_微信公众号封面图_图标设计软件移动版

建站首页 / 关于 / 我们的团队 /

网站在线制作app

网站在线制作app:微信小游戏登录流程

    花了好几天时间,总算解决了微信小游戏的登录。本来微信登录就比较复杂,再加上前前后后改了些接口,更是痛苦。网上找到的资料总是些零零散散有新有旧,微信自己的文档大致有一个流程,但一些要点和注意事项又语焉不详。今天就从头到尾整理一遍登录过程吧,算是造福一下本就很苦鳖的程序猿,顺便给自己也留个记录。

    首先介绍下这个流程的背景,这样的话各位读者就可以判断,这对自己是不是有用了。当然,我相信在大多数情况下都是有用的。

 

一、这个流程是按照强联网游戏来设计的,客户端跟服务器通信用的是WebSocket,服务器端是Node.js。(如果你的服务器是PHP,那么流程可能更简化一些)

二、玩家以纯粹的新人身份进入游戏。(也就是,不假设玩家提前关注了相关公众号之类的)

三、最终目的是获取unionId。(如果你只想要openId,甚至连openId都不要,只要昵称头像,那可以更简单。关于unionId和openId的区别,这里就不啰嗦了,相信大家都很清楚。)

 

登录过程中比较麻烦的是用户信息授权按钮的处理,我没有找到合适的办法把它融合到流程中间,所以干脆就放最前面。在操作体验上,就是玩家第一次进入游戏时,需要先点一个【微信登录】的按钮,授权游戏获取用户信息,然后再开始游戏。当然,以后再进游戏的话,因为已经授权过,所以就不会再有这个按钮了。

 

那么下面就开始介绍流程了。

 

1、在客户端,调用wx.getSetting检查是否获得授权。如果已经授权,进入下一步;否则,调用wx.createUserInfoButton显示授权按钮。

 这一步通常会在游戏的登录界面上,这个时候不会有【开始游戏】、【选择服务器】之类的,而是一个【微信登录】按钮。点击【微信登录】,微信会提示用户是否允许游戏访问他的信息。允许之后,【微信登录】消失,界面上会出现【开始游戏】或者【选择服务器】的画面。

 如果用户拒绝的话,最好也给一个弹窗,解释为什么需要授权。

 

wx.getSetting({
 success(res)
 // 已授权
 if (res.authSetting[ scope.userInfo ])
 // 进入下一步,比如【选择服务器】
 // 显示授权按钮
 else
 let sysInfo = wx.getSystemInfoSync();
 let button = wx.createUserInfoButton({
 type: text ,
 text: 微信登录 ,
 style: {
 left: sysInfo.windowWidth / 2 - 50,
 top: sysInfo.windowHeight / 2 - 30,
 width: 100,
 height: 60,
 backgroundColor: #c7a976 ,
 color: #5c5941 ,
 borderColor: #5c5941 ,
 textAlign: center ,
 fontSize: 16,
 borderWidth: 4,
 borderRadius: 4,
 lineHeight: 60,
 button.onTap(function(res)
 if (res.userInfo)
 button.destroy();
 // 进入下一步,比如【选择服务器】
 else
 wx.showModal({
 title: 温馨提示 ,
 content: 《XXX》是一款在线对战游戏,需要您的用户信息登录游戏。 ,
 showCancel: false,
 button.show();
});

2、对于需要分区跨服的游戏,显示【选择服务器】的界面。

 ​如果不需要分区,那么可以显示一个【开始游戏】的界面(你也许觉得这一步可以省掉,但是为了结构清晰,我建议还是留着)。

 ​这一步是游戏自己处理,跟微信无关,所以就没代码了。

 

3、连接游戏服务器;

    在连接成功的回调里,调用wx.login,获得code;

    再调用wx.getUserInfo,获得encryptedData和iv;

    最后将code、encryptedData、iv发送给服务器。

    因为用的是WebSocket,需要连接服务器的步骤,就在这里了。如果是PHP,可以省掉连接服务器,直接开始调用wx.login。

    这一步获得的参数很重要:code将被用来获取sessionKey;而sessionKey、encryptedData、iv三者一起解出用户的敏感数据(包括unionId等)。

// 连接游戏服务器成功的回调。如果服务器用的是PHP,这里直接调用wx.login
onConnected: function()
 wx.login({
 success: function(res)
 // res中包含code
 // 获取用户信息
 wx.getUserInfo({
 withCredentials: true, // 必须在wx.login之后,这里才能为true
 success: function(result)
 // result中包含encryptedData和iv
 // 将res.code、result.encryptedData、result.iv发送到服务器
 fail: function(result)
 // 错误处理
 fail: function(res)
 // 错误处理

4、在服务器上收到数据后,首先调用微信的接口 https://api.weixin.qq.com/sns/jscode2session

    这一步需要code,以及你的小游戏AppID和AppSecret,这两个可以在微信公众平台管理后台拿到。

    值得一提的是,在微信后台上,AppSecret只能查看一次,然后你需要自己把它保存在某个隐秘的地方。如果你忘了保存,那么只能再重新生成一个AppSecret。

    调用成功之后,可以拿到sessionKey。(同时还有openId)

   然后,用sessionKey以及之前客户端传来的encryptedData、iv,解密得到unionId、openId、昵称、头像等等。有了这些数据,就可以开始游戏里的登录了。

    需要注意的是,小游戏要绑定了公众号才有unionId。

// 服务器端的代码
let https = require( https 
let iconv = require( iconv-lite 
// WXBizDataCrypt是微信提供的模块,用来执行解密
// 可以在https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/signature.html找到下载链接
let WXBizDataCrypt = require( ../lib/WXBizDataCrypt.js 
// WX_APP_ID是小游戏AppID,WX_APP_SECRET是小游戏AppSecret,code由客户端发送上来
let url = https://api.weixin.qq.com/sns/jscode2session?appid= + WX_APP_ID + secret= + WX_APP_SECRET + js_code= + code + grant_type=authorization_code 
let req = https.get(url, function(res)
 let datas = [];
 let size = 0;
 res.on( data , function(data)
 datas.push(data);
 size += data.length;
 }); 
 res.on( end , function()
 let buff = Buffer.concat(datas, size);
 let result = iconv.decode(buff, utf8 
 let d = JSON.parse(result);
 if (d.session_key)
 let wxCrypt = new WXBizDataCrypt(WX_APP_ID, d.session_key);
 // encryptedData和iv都是客户端传递的数据
 let res = wxCrypt.decryptData(encryptedData, iv);
 // res中包含了openId、unionId、nickName、avatarUrl等等信息
 // 注意,如果你的小游戏没有绑定微信公众号,这里可能也不会有unionId
 // 微信登录完成,可以开始进入游戏了
 catch (error)
 // 错误处理
 else
 // 错误处理
 catch (error)
 // 错误处理
req.on( error , function(err)
 // 错误处理
});

 

    整个微信小游戏登录过程,大致就是这样了。最后顺便提一下,调用https://api.weixin.qq.com/sns/jscode2session这一步,因为是https请求,所以你可能会觉得,也可以直接在客户端调用。毕竟code就在客户端,AppID和AppSecret也是固定的。但微信并不建议这么做(想想看,微信甚至不会替你保存AppSecret,你愿意把它放客户端里吗?)


推荐阅读:  我的CSDN  我的博客园  QQ群:704621321 一。调用默认排行榜 首先我们需要了解: 1。白鹭开发文档(开放数据域):http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/openDataContext/index.html 2.微信小游戏开发文档(关系链数据):h...


准备 1、微信小程序广告组件文档 2、开通条件 3、已经申请开通流量主并且通过了 实际操作 开发文档 思路 1、先实例一个对象,因为文档中有提及: 2、在根据项目情况调用改方法。 3、回调处理 开始 先别着急着写代码,上微信小游戏把相关的东西配置好 登录微信公众平台 这步骤我们直接复制粘贴就行,但是为了兼容性我们必须对这段代码进行修改 以上代码根据情况在实际项目中调用即可 作者简介:何永峰,芦苇科...


依旧是熟悉的期末作业,是微信小游戏官网的Demo来着,然后我边百度边对它做了一些改动 说起来好久没更新博客了......最近在用unity做游戏准备参加计算机设计大赛,花了好久终于做完初稿了哈哈哈哈嗝 顺祝看到这篇博客的各位新年快乐~ PS:完整工程下载及相关说明:https://download.csdn.net/download/weixin_41918712/10954323 用例图 效果图...


详细见我的github repo地址: https://github.com/29DCH/FlappyBird FlappyBird 微信小游戏开发流程、注意事项、API、微信开发者工具下载、App Id获取等详情见微信开放社区、微信公众平台 https://developers.weixin.qq.com/miniprogram/dev/index.html 微信小游戏FlappyBird 主要...


微信小游戏制作学习笔记 关于 cocos 的学习笔记 文字图像部分: 使用这些软件生成图集时请选择 cocos2d-x 格式的 plist 文件。最终得到的图集文件是同名的 plist 和 png。 ***2.***艺术字体创建 直接在资源管理器中点新建- 艺术数字配置 |属性 |功能说明 | |-Raw Texture File-|-设置事先绘制好的包含所需字体样式的图片-| | Ite...


一、安装开发工具 前往开发者工具下载页面,网址:https://developers.weixin.qq.com/minigame/dev/devtools/download.html,根据自己的操作系统下载对应的安装包进行安装。 二、创建小游戏项目 1、打开微信开发者工具,选择小程序项目。 2、此时需要输入三项内容:项目目录、APPID、项目名称。 其中,项目目录是你在本地存放项目代码的文件夹。...


压力测试    也称为强度测试,通过模拟实际应用的软硬件环境及用户使用过程的系统负荷,长时间或超大负荷地运行测试软件,来测试被测系统的性能、可靠性、稳定性等。    压力测试需要确定一个系统的瓶颈或者不能接收的性能点,来获得系统能提供的最大的服务级别    压力测试是为了发现在什么条件下您的应用程序的性...


相关资料来源于网络,侵删歉。 如果文章中存在错误,请下方评论告知我,谢谢! 多边形的区域填充 首先,我们了解一下多边形。 多边形可以简单地分为凸多边形和凹多边形,除此之外,我们还要讨论内含环的多边形,如下图。 多边形的表示方法 顶点表示:用多边形顶点的序列来刻画多边形。直观、几何意义强、占内存少;不能直接用于显示。 点阵表示:用位于多边形内的像素的集合来刻画多边形。失去了许多重要的几何信息;但它是...


1. 为什么会有Session? HTTP 协议本身是无状态的,这与HTTP协议本来的目的是相符的,客户端只需要简单的向服务器请求下载某些文件,无论是客户端还是服务器都没有必要纪录彼此过去的行为,每一次请求之间都是独立的,好比一个顾客和一个自动售货机或者一个普通的(非会员制)大卖场之间的关系一样。 由于HTTP协议是无状态的,而出于种种考虑希望HTTP协议之间的...

(责任编辑:admin)