整个流程

先获得用户的基本信息(头像，昵称)等，这些数据可能会用在排行榜里展示。获取成功后，进入主界面。完成游戏上传分数。打开排行榜界面获取排行榜数据。所有总共涉及三个接口:1.用户信息；2.上传分数；3.获取排行榜数据。流程图参考如下:

用户信息

首先要判断该应用是否有被授权。已经授权，可以直接调用wx.getUserInfo获取头像昵称。未授权的要调用wx.createUserInfoButton创建按钮引导玩家点击。

wx.createUserInfoButton创建的按钮的位置可以通过wx.getSystemInfoSync里的safeArea调整。例如，需要在安全区域内最中间放放置高度height为50的按钮，可以将button的left设置为safeArea.left,width为safeArea.width,top为(safeArea.top - safeArea.height/2 - 25)。

完整代码参考：

// 查看是否授权
wx.getSetting({success(res) {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称wx.getUserInfo({success: function (res) {const userInfo = res.userInfo;//保存数据，进入游戏主界面}})} else {// 未授权的要调用 createUserInfoButton 创建按钮引导玩家点击const systemInfo = wx.getSystemInfoSync();const safeArea = systemInfo.safeArea;const button = wx.createUserInfoButton({type: 'text',text: '授权登录',style: {left: safeArea.left,top: (safeArea.top - safeArea.height/2 - 25),width: safeArea.width,height: 50,lineHeight: 50,backgroundColor: '#90ef62',color: '#ffffff',textAlign: 'center',fontSize: 20,borderRadius: 5}})button.onTap((res) => {const userInfo = res.userInfo;if (res && userInfo) {//保存数据，进入游戏主界面}})}}
})

上传分数

在用微信云开发存取用户的数据介绍了如何存取用户数据。我们可以保存一个最高分数的数据，在游戏得分超过最高分的时候上传分数。

云端

先在微信开发者工具创建一个云函数rank和数据库集合rank。

初始化云函数

const app = require('wx-server-sdk');
app.init();
const db = app.database();
const collection = db.collection('rank');

入口函数，通过接收函数名确认调用方法，通过OPENID用户唯一标示符作为数据库集合的key值读写数据库。

exports.main = async (event, context) => {const { func, data } = event;const { OPENID, APPID, UNIONID } = app.getWXContext();let res;if (func === 'uploadScore') {res = await uploadScore(OPENID, data);} else if (func === 'getScoreRankInfo') {res = await getScoreRankInfo(OPENID, data);}return res;
}

上传分数函数，通过用户的唯一标示符作为数据库的key，插入数据库即可。

const uploadScore = async (_openid, userInfo) => {const id = userInfo._id;delete userInfo._id;userInfo._serverDate = db.serverDate();await collection.doc(_openid).set({ data: userInfo });userInfo._id = id;return userInfo;
}

客户端

参考代码:

// score 为最高分数， userInfo 为上一步获取的用户信息
wx.cloud.callFunction({// 云函数名称name: 'rank',// 传给云函数的参数data: {func: 'uploadScore',data: { score, userInfo: userInfo },},
}).then((res) => {//成功
}, (err) => {})

获取排行榜数据

云端

获取排行榜数据，数据集合按照score降序排序，然后根据偏移量和数量抓取所有的集合数据。

const getScoreRankInfo = async (_openid, data) => {const all_data = await collection.orderBy('score', 'desc').skip(data.offset) //偏移量.limit(data.count) //数量.get();const all_data_data = all_data.data;return all_data_data;
}

客户端

参考代码:

// count 为数量， offset 为偏移量
wx.cloud.callFunction({// 云函数名称name: 'rank',// 传给云函数的参数data: {func: 'getScoreRankInfo',data: { count, offset },},
}).then((res) => {const result = res.result || [];const outDatas = [];// 成功for (const entry of result) {let outData = {};const userInfo = entry.userInfo;outData.score = entry.score;outData.rank = ++offset;outData.userInfo = userInfo;outDatas.push(outData);};
}, (err) => {})

关注我的公众号【白玉无冰】每天成长一点点

微信云开发之小游戏排行榜的实现，云数据库，云函数【白玉无冰】每天进步一点点相关推荐

如何不用服务器来开发一个小游戏
我是代长新,来自上海享物说,主要负责游戏客户端研发. 享物说是一个大家可以互相赠送物品,有趣.不花钱的社区平台.为了创造更好的社区氛围,我们决定通过小游戏来增加社区的趣味性和互动性. <乐享花园 ...
CocosCreator微信小游戏排行榜开发
CocosCreator微信小游戏排行榜开发开发前言步骤1 开发前言第一次接触微信小游戏开发的小伙伴,可以看看排行榜的开发和注意事项: 一.开发微信排行榜的话,用户的信息需要从微信提供的API获 ...
CocosCreator | 微信小游戏排行榜微信开放域
更多笔记和源码请关注:[微信公众号] CocosCreator笔记演示技术摘要主域工程微信授权创建子域节点向子域发送消息子域工程读写用户云托管数据接收主域发送的消息构建运行实现 ...
基于Laya游戏引擎实现微信小游戏排行榜
我们都知道,微信小游戏和小程序目前风头十足,很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群.说到微信小游戏,就不得不提到排行榜这个功能,就目前游戏行业,似乎都离不开排行榜这个重要功能, ...
【Cocos Creator游戏开发教程】仿微信趣味画赛车小游戏（三）代码实现
[Cocos Creator游戏开发教程]仿微信趣味画赛车小游戏(一)前言,界面UI [Cocos Creator游戏开发教程]仿微信趣味画赛车小游戏(二)物理刚体关节项目地址已放到 github ...
【Cocos Creator游戏开发教程】仿微信趣味画赛车小游戏（一）前言，界面UI
前言这个是我去年3月份在简书上发布的,不玩简书了,就迁到CSDN吧-- 最近遇到一款游戏,感觉玩起来还行,于是顺带就用来熟悉一下Cocos Creator(太久没用). 项目地址已放到 github ...
【Cocos Creator游戏开发教程】仿微信趣味画赛车小游戏（二）物理刚体关节
[Cocos Creator游戏开发教程]仿微信趣味画赛车小游戏(一)前言,界面UI 项目地址已放到 github 上,需要的小伙伴可自行下载. 这节我们讲一下车子的物理刚体关节. 我在项目中添加了一 ...
10行代码实现微信小程序支付功能，使用小程序云开发实现小程序支付功能（含源码
前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能. 传送门借助小程序云开发实现小程 ...
借助云能力，小游戏开发过程是如何升级的？
导语 | 9月21日,云+社区技术沙龙"小程序·云开发"北京站圆满落幕.本期沙龙腾讯云联合猫眼.即速应用.白鹭引擎等企业,将从小程序·云开发后台技术.云开发实时数据推送实践.云开发 ...
微信小游戏爆款秘笈数据库MongoDB攻略篇
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB 发表于云+社区专栏随着微信小游戏的爆发,越来越多开发者关注到MongoDB与小游戏业务的契合度. ...

微信云开发之小游戏排行榜的实现，云数据库，云函数【白玉无冰】每天进步一点点

微信云开发之小游戏排行榜的实现

整个流程

用户信息

上传分数

云端

客户端

获取排行榜数据

云端

客户端

微信云开发之小游戏排行榜的实现，云数据库，云函数【白玉无冰】每天进步一点点相关推荐

最新文章

热门文章