CocosCreator3D微信小游戏入门RunningBall(五):微信云开发实现排行榜

CocosCreator3D微信小游戏入门RunningBall(五)

以前的开发我们需要实现一个服务器才能完成我们的排行榜开发的工作。
但现在有了微信云开发,通过微信云开发中的云数据库以及云函数,我们不用开发服务器,即可实现我们的排行榜功能

微信官方文档参考:https://developers.weixin.qq.com/minigame/dev/wxcloud/basis/getting-started.html

一、开通微信云开发

首先你要准备一个微信的AppID,这个AppID不能是测试账号,必须是正式的,通过申请的AppID

在微信Web开发者工具中,进入项目后,点击左上方的云开发按钮
在这里插入图片描述

点击后我们可以看到这个界面,点击开通按钮就行
在这里插入图片描述

接下来需要我们填写微信云开发环境的环境名称,一般填项目名就好,环境ID不用去管它,自动生成就好
在这里插入图片描述

这样微信云开发就开通了。

二、使用云函数获取用户的openid

打开我们打包好的微信小游戏项目,在微信工具的右边选择并打开project.config.json文件,在开头添加参数:

"cloudfunctionRoot": "functions/"

在这里插入图片描述
这是指定我们云开发的云函数的本地代码位置

然后在右边的资源管理器中,右键创建目录,目录名为我们制定的文件名,比如上面我们制定的是functions,那么我们的这个文件夹就命名为functions

在这里插入图片描述

创建好目录后我们可以看到这个目录自动变成了这样子:
在这里插入图片描述

右键点击文件夹,选择创建Node.js云函数,命名为getOpenId
在这里插入图片描述

此时我们可以看到目录结果变为这样:
在这里插入图片描述
这个Index.js就是我们这个getOpenId云函数的入口

将默认代码稍微微调一下即可

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
   
  const wxContext = cloud.getWXContext()

  return {
   
    openid: wxContext.OPENID,
  }
}

通过cloud.getWXContext()方法可以获得调用这个云函数的上下文,返回的wxContext中就包含了OPENID,APPID,UNIONID这些用户信息,然后我们直接通过return,将OPENID返回给客户端即可,这样客户端就可以通过云函数快速的拿到用户自己的Openid。

这样我们就完成了这个云函数的编写

最后,要注意三点:

  • 编写完云函数后,在云函数的文件夹上右键选择“上传并部署:云端安装依赖”
    在这里插入图片描述
  • 如果你的云函数使用了一些npm的第三方库,那就选择“上传并部署:所有文件”,这样会将依赖的第三方库也一起上传
  • 如果有修改过云函数,在打包编译前,请将build下的functions文件夹,project.config.json文件(这个可以不用)放到build-templates文件夹下(构建模版文件夹),这样避免打包的时候把functions文件夹清理掉,不方便更改云函数以及调试

三、使用云函数

在客户端使用云函数的时候,我们先创建一个名为Wechat的脚本,这个脚本我们对微信的这些API调用进行一些简单的封装,以便在我们的RunningBall项目中使用

首先这个Wechat脚本我们使用单例的模式

    private static _instance: Wechat = null;

    static instance () {
   
        if (!this._instance) {
   
            this._instance = new Wechat();
        }
        return this._instance;
    }

在脚本类上放入上述的代码,这样我们就可以通过Wechat.instance()就可以拿到这个单例

接下来我们在Wechat的构造方法中初始化云开发的环境

    constructor () {
   
        //初始化云开发环境
        wx.cloud.init({
   
            traceUser: true,
            env: 'runningball-wbdtu'
        });
    }

这里的env属性的值在这里可以找到:
在这里插入图片描述
在这里插入图片描述

接下来我们创建一个名为getUserOpenid的方法,这个方法拥有一个参数,这个参数是个回调函数,函数的参数是个openid

    getUserOpenid (cb: ((openid: string) => void)) {
   
        wx.cloud.callFunction({
    
            name: 'g
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值