不管是在现实生活还是当今游戏中，各式各样的排名层出不穷。如果我们做好一款游戏，却没有实现排行榜，一定是不完美的。排行榜不仅是玩家了解自己实力的途径，也是游戏运营刺激用户留存的一种途径。在微信小游戏中普遍存以下两种排名

• 好友关系排名
• 世界排名

其中好友的排名，需要通过微信子域实现。在子域上下文中，只能调用微信提供相关的api，且数据传输只能进不能出。即使在子域中调用云函数也不行。这个对数据很严格，开发略为复杂。但好处也很明显

• 无需用户确认授权就可实现排名
• 排名信息均为自己好友，刺激效果更明显

尽管这样，我们还是先实现世界排行。世界排行需要用户授权。早期只需要调用就可以实现，现在很不稳定(好像废弃了)。所以不得不通过生成一个授权按钮来实现

微信小游戏为开发者提供了一部分免费的云环境。可以实现文件存储，数据存储以及通过云函数实现服务端接口。开通方式也很简单，这里不做说明。既然要实现排名，优先选用云函数来实现对应的api。要实现云函数，需要在文件中通过属性指定云函数目录。由于，是通过cocoscretor开发，每次构建发布都会清空输出内容。为了解决人肉复制粘贴，我们需要通过实现微信小游戏所有代码的管理。小游戏地心侠士构建模板如下

从图中，可以看到获取openid、获取世界排名、保存用户授权信息等云函数都放在cocoscreator代码环境中。这样在开发完成后，通过cocoscreator构建发布，对应的云函数也会一起打包过去

首先在构建模板的文件件中，使用初始一个名为的node项目。初始好以后，运行。这样就建立好了一个云函数的基本框架。

我们在文件，输入以下代码

调用云函数时，上下文中便可以得到玩家openid和uninid。玩家进入游戏就先调用此函数，得到玩家的openid用于后边更新玩家数据和获取世界排行的条件。

小游戏端调用云函数前，需要初始云环境。因为采用定制构建模板，所以我们直接在模板的文件末尾初始我的云环境

后续调用云函数中，第一步都是要获取openid，这里定义一个全局变量将其保存起来，调用方法如下

先看下地心侠士布局界面

上图中可以看到，地心侠士虚拟了一个游戏操作区域。玩家聚焦到世界排行时，需要渲染一个授权按钮在确定的位置。需求很简单，可考虑到移动端多分辨率，这个操作就变得复杂了。需要做屏幕适配。地心侠士采用自适应宽度的适配策略，配置如下图

游戏运行时获取实际分辨率的宽度与设计的宽度相除，变可知道当前宽度变化比列，键盘容器九宫格使用了主键底部111px，高度161px。确定按钮宽度105px

微信小游戏以左上角为原点，通过和确定位置。然而，cocoscreator以左下角为原点，所以在计算值时需要用屏幕宽度 - box上边缘y坐标。适配代码如下

经过上一步骤的适配操作，只要玩家聚焦到【世界排行】，地心侠士虚拟键盘的确定按钮正上方会覆盖一个透明的,玩家点击确定就会唤起授权对话框，然后在对应的回调函数就可以完成用户数据保存操作

在代码中，除了传入玩家微信信息外。我还额外传递进入游戏时就获取的。正常情况下不需要的，因为，云函数中天然会告诉你openid。不过，我们在后端使用了获取玩家头像保存到云端文件存储中。引入此包后，后端就获取不到了，相当奇怪。对应云平台云函数代码如下

保存完用户数据后，通过一个回调函数，实现了玩家排名数据获取。细心的朋友可以在前边授权按钮适配的章节看到这句代码。后端云函数就是一个简单数据查询。效果图如下

从上图可以看到，我实现了三个维度排名，需要在前端需要传入排名字段。对应代码如下

云函数代码如下

• 微信子域数据很严格，数据只进不出。调用云函数也不行
• 云函数中使用http请求，可能会得不到openid
• 屏幕适配知道定位原则，也可以很简单
• avatarUrl通过Sprite现实头像，需要设置安全域名
• 目前部分华为手机分享截屏出现黑屏使用canvas.toTempFilePath就可以解决

这里有一个CoscosCreator游戏开发群，欢迎喜欢聊技术的朋友加入

欢迎感兴趣的朋友关注我的订阅号“小院不小”，或点击下方二维码关注。我将多年开发中遇到的难点，以及一些有意思的功能，体会都会一一发布到我的订阅号中