微信关系链互动数据结合cocos实现
1. 前言
说一下本人的背景,目前在一家公司做微信小游戏的开发,主要技术栈是cocos+TypeScript+微信开发者,后端用的Spring Boot,最近遇到一个需求就是在排行榜中实现一个可以给好友赠送抽奖券的功能,因为这个功能是微信2019年8月份左右才开放的新功能,网上的教程少之甚少,又加上是使用COCOS进行的开发,整个流程基本都是楼主慢慢摸索出来,可能做不到弥补这块空缺吧,但是希望对大家有帮助。
大家有兴趣的话可以来玩一下我们做的游戏:辐射危城。
2. cocos排行榜功能
cocos排行榜功能的实现主要是利用主域工程以及子域工程,在主域工程中通过一个组件将子域工程映射到画布中去,这个在cocos官网有相关的文档就不多赘述了。相关链接:cocos排行榜
3. 微信关系链互动数据准备工作
微信官方文档中提供了一张图片描述了这一串流程是如何实现的,比较详细:关系链互动数据
上述链接中,网页最下方有官方的示例代码,其中和自己的工程不一样的地方我探索了一下主要就是以下三点,下面附上几张自己工程的目录文件截图,做以下修改即可:
- jsserver文件(checkInteractiveData.js); (这个文件夹命名就是jsserver,后面的”开发环境“,开发者工具会自动帮忙生成)
- 小游戏中的game.json;
- 小游戏工程中的project.config.json;
注:如果没有生效,右键点击checkInteractiveData.js有个上传按钮,上传到开发环境
配置好后可以开始代码的编写了,其中的checkInteractiveData.js直接使用其官方的示例代码稍作修改即可。
4. 整体流程详述
楼主在cocos子域中,也就是微信开放数据域中,记录了三个字段:
1. 玩家排名;
2. 玩家接收到好友的赠送记录;
3. 玩家赠送其好友的记录;
步骤1:玩家A给玩家B赠送一个金币
楼主在子域中设置了这样一个接口,当用户点击时触发,如下图所示
当3.中的准备工作做好之后,就会弹出是否确认要送给好友一个金币,如下图
该按钮调用的接口是wx.modifyFriendInteractiveStorage()解决;
这个接口调用后,微信服务器就会先去先前托管在微信服务器的jsserver中验证,也就是checkInteractiveData.js,如果验证通过就会返回code: 0,否则返回 -17011。如下图所示
验证成功后,会将数据写入玩家B的数据域中,即上述提到的玩家接收到好友的赠送的记录中。
调用该接口可能遇到的难点就是用户的openId的获取,这个问题可以通过调用wx.getFriendCloudStorage();
以上流程玩家A给玩家B赠送金币成功。
其中赠送成功后,我还会用一个数组去记录玩家A的赠送记录,这个为什么要记录呢,我会在文章最后说明。
步骤2:玩家B打开游戏排行榜后,收到别人给他赠送的金币
在这一步骤中,我在玩家进入游戏就调用wx.getUserInteractiveStorage()接口去查找,是否有人赠送自己金币,因为策划有这个需求:当有人赠送给自己金币时,打开游戏后排行榜处要显示红点提示,提醒玩家打开领取。
该接口返回下来的数据是加密数据,所以还需要送到自己的后台去解密,这也是这一步骤的难点所在。
加密数据由两部分组成:
- encryptedData 加密的用户数据
- iv 与用户数据一同返回的初始向量
后端解密数据时还需要用到sessionKey,其中加解密这一块,微信官方也有相应的文档:加密数据解密算法
解密结束后,后台返回来的数据如下:
可以看到这里的value值,这个value就是别人赠送给自己的金币数量,楼主就在这里做了相应的处理,若value不为0,则给排行榜显示红点,反之则不显示。
步骤3:接收金币做相应的处理
玩家B打开排行榜后,楼主在子域中调用wx.getFriendCloudStorage()判断的接收记录,若有记录则显示一个弹窗,说明哪位好友给你赠送了金币,然后清空这个赠送记录的数组,以免第二次打开排行榜再次弹出该弹窗
之后主域中会向后台发送请求,将刚才解密后的数据发给后端,后端要做的操作有两点:
- 将金币存入该玩家的数据库中;
- 清空玩家关系链数据中的记录,这步操作是为了说明该奖励已经入库,防止重复领取。
将解密后的数据发给后端后,后端调用微信服务端接口setUserInteractiveData实现对关系链互动数据的改写,也是该步骤的难点所在。相关连接:setUserInteractiveData
其中需要在后端获取accessToken,以及通过sessionKey和要修改的数据生成一个signature,以这些数据作为参数,发送请求实现修改。
写在最后
文章中说到记录了一个自己的赠送记录sendRecordList,记录这个是用于每次点开排行榜渲染那个赠送按钮,因为有需求就是每天只能对每个好友赠送一次,所以在每次点开排行榜时会根据那个sendRecordList来决定按钮的状态。