社区/学习指南/Web云开发应用实战指南

2048小游戏

一个简单的 2048 小游戏,如何通过云开发的巧妙接入,变成可以可以记录自己历史最高战绩和全网战绩的网络小游戏,快来体验尝试吧
使用云开发的数据库、云函数,登录验证使用匿名登录。

创建云开发环境

一、新建【按量计费云开发环境】

进入腾讯云云开发控制台-创建环境,选择按量计费环境,环境名称可以自定义设置。如果已有按量计费环境则可以跳到下一步。
1.png

二、开通静态网站托管服务

进入进入静态网站控制页,选择刚才创建好的环境,开通静态网站托管服务。
2.png

三、创建数据库

进入数据库控制页,添加 1 个集合;集合名字为 2048
3.png

四、开启匿名登录

进入环境设置页-登录授权的登录方式中,勾选匿名登录
4.png

下载并部署源码

一、下载源码

访问github 仓库,下载源码到本地。源码项目目录如下:
5.png

二、本地运行

将项目 webviews/index.html 以 http 的形式运行,可使用 IDE 工具 vscode,hbuilder。在浏览器的地址栏中确定 url 地址,比如例子中,域名地址为 127.0.0.1:5500
7.png

四、配置本地开发的安全域名

如果想在本地开发,必须要在云开发中配置本地的安全域名才能够正常调试开发。
进入环境设置页-安全配置,配置 WEB 安全域名,在这里以 127.0.0.1:5500 举例,请按照自己的实际域名配置
8.png

五、填写云开发环境 ID 到项目中

云开发是通过环境 ID 来判定与特定环境进行数据通信的,所以在项目中要配置所有的相关环境 ID 为自己的 ID。(建议熟练后,使用配置文件形式来配置)

  • 进入环境总览页,复制获取云开发环境 ID。
    9.png

  • 打开项目目录,将以下文件中标注有【云开发环境 ID】处替换成自己的云开发环境 ID

  • cloudfunctions/app/index.js 第 4 行
    10.png

  • cloudbaserc.js 第 2 行
    11.png

  • webviews/asset 下的 cloud.js 文件,第 2 行
    111.png

本地项目开发

一、说明

webviews/asset 下的 index.js 是本地 2048 有关的操作,包括 2\4 随机生成,合并相同数字,上下左右监听,移动端滑动监听等。
而 cloud.js 是外挂的云开发的相关支持。

关于 cloud.js 内的代码逻辑,请参照云开发文档学习和理解。

二、编写代码,开启历史记录和全网分数

在 index.html 的 script 标签中新增如下代码:

cloudinit();

此代码调用 cloud.js 的 cloudinit 函数,进行匿名登录,然后发起云函数的请求,获取全网最高分数和历史最高分数。

关于 app 云函数的源码如下(不需要编写,已有):

const tcb = require("@cloudbase/node-sdk");

const cloud = tcb.init({
  env: "lgy-199ef6",
});
const db = cloud.database();
const _ = db.command;
exports.main = async (event, context) => {
  let res = {};
  //获取用户数据
  const auth = cloud.auth().getUserInfo();
  //获取用户的uid
  const uid = auth.uid;
  if (uid != null) {
    //如果uid不为空,则尝试在2048数据库中获取文档
    const result = (
      await db
        .collection("2048")
        .where({
          _id: uid,
        })
        .get()
    ).data;
    if (result.length == 0) {
      //如果没有文档,则新增,以uid为文档的_id,默认分数为0
      await db.collection("2048").add({
        _id: uid,
        score: 0,
      });
    }
    if (event.score != null && result[0].score < event.score) {
      //如果传入了分数,并且分数比数据库中的高,则更新分数
      await db.collection("2048").doc(uid).update({
        score: event.score,
      });
      res.myscore = event.score;
    } else {
      //如果没有分数,或者分数没数据库高,则返回数据库的分数或者不存在的0
      res.myscore = result.length != 0 ? result[0].score : 0;
    }
    //获取整个数据库最高的分数
    const array = (
      await db.collection("2048").orderBy("score", "desc").limit(1).get()
    ).data;
    //整理返回数据
    res.netscore = array[0].score;
    res.code = 0;
  } else {
    //如果uid为空,则为非法的,返回404
    res.code = 404;
  }
  return res;
};

配置云函数

一、安装依赖

在 cloudfunctions/gobangdelete 下右键在终端打开
18.png

    npm i @cloudbase/node-sdk
三、部署云函数

在 cloudfunctions/app 目录,右键执行部署云函数(上传全部文件)。在一开始使用时会出现登录,按照提示完成登录步骤即可。【如果没有此选项,请前往云开发 VSCODE 插件安装并学习使用】
20.png

本地测试项目可用性

一、重新启动项目,进入页面

使用键盘上下左右键进行相同数字合并,最终到无法移动任何数字结束
23.png

结束后,会在底部更新历史最高分和全网最高分。
24.png

三、总结

如果本地验证都没有问题,则配置没有问题。如果出现任何一个步骤的错误提示,则 F12 控制台查看并排除原因,一般是环境 ID 写错错误导致。

上传至静态存储

将本地验证成功的项目上传至静态存储中。在 webviews 目录右键点击,上传至静态网站根目录
31.png

进入云开发静态网站管理页,可以看到已上传的项目。
32.png

进入云开发静态网站设置页,访问默认域名网址即可进入线上项目
33.png

34.png

关于自定义域名和网站对外开放

云开发提供了完备的 web 端资源服务,但是一个对外公开使用的 web 项目需要有自己的备案域名,需要受到监管。所以,在正式对外推出之前,需要将云开发提供的默认域名替换成自己已经备案的域名

  • 前往云开发静态网站设置页,在【域名信息】下点击添加域名按钮,填写已经备案的域名。域名需要配有 SSL 证书,腾讯云下域名会自动监测证书;如果是非腾讯云旗下域名,则需要上传 SSL 证书。
  • 需要等待域名添加状态为【已启动】后,才可以去域名解析中配置 CNAME。
  • 前往环境设置页-安全配置,在 WEB 安全域名中删除云开发的默认域名,只保留自定义域名。
  • cloudfunctions/functions/getFile/index.js 的 AllowOriginList 数组中,将默认域名更换成自定义域名,保存更新。

附件

本文出自 云开发团队