无需自己搭建服务器,使用【微信云】开发排行榜!

2019-10-10 15:20:26 浏览数 (1)

微信云开发提供了数据库和云函数的功能,利用这两个功能,我们可以自主实现一个排行榜功能。

整个流程

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

用户信息

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

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

完整代码参考:

代码语言:javascript复制
// 查看是否授权
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

初始化云函数

代码语言:javascript复制
const app = require('wx-server-sdk');
app.init();
const db = app.database();
const collection = db.collection('rank');

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

代码语言:javascript复制
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,插入数据库即可。

代码语言:javascript复制
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;
}
客户端

参考代码:

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

获取排行榜数据

云端

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

代码语言:javascript复制
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;
}
客户端

参考代码:

代码语言:javascript复制
// 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) => {
})

0 人点赞