cocos creator开发跨平台游戏能力不错,可以一次开发适用于多个平台,如andriod,ios原生,网页,各类小程序等等。就实际情况而言,能够跨1~2个平台已经不容易了,这是因为在跨平台开发中不可避免存在针对特定平台还需要做定制开发的部分,如果太多,平台维护工作量过大。就微信小游戏而言,通常就要考虑是否采用微信自带云函数或者云托管,不然就只能自行搭建服务器,自行搭建有很多限制,如:必须备案、域名、证书等等,对于个人开发者而言太啰嗦了,自己维护太费精力。下面就二者做一比较:

一、应用架构

二者相同之处就是serverless,也就是无服务器架构,无需用户自己搭建服务器,无需自己维护,甚至安全部分也无需太多担心,微信基本都考虑到了,这个对于企业和个人都节省了时间和成本。但差别还是有:

1. 部署方式

云函数是采用node.js作为服务端,js作为开发语言,部署方式就是将云函数同步到云端即可;而云托管则不同,是自己创建docker镜像,然后发布到云端,不限制你使用的服务端环境和开发语言,灵活性更大。

2.访问端口

云函数不涉及这个问题,直接按照函数名和环境参数访问即可;云托管在你自己开发的服务镜像中会有端口,你在云托管参数中设置对应关系,这样云会自动链接你的服务端口,客户端访问类似网络方法,用的是微信的callContainer,参数是path,method,header和data,但没有端口等参数。这部分而言,云函数更简单,云托管更完整(用户可以操作的更多)。

3.增值服务

这部分内容,二者大同小异,都有数据库、对象存储、资源监控、静态网站等等;只不过二者相互独立,都在各自环境中,一般而言需要分别部署。

二、部署过程

1.云函数部署

1.进入微信开发者工具,在左侧菜单栏中选择“云开发”,进入云开发控制台。

2.在云开发控制台中,选择“云函数”选项卡,并点击“新建云函数”。

3.在新建云函数页面中,填写相应的信息,包括云函数名称、运行环境、执行方法等。

4.本地创建和编辑云函数代码。微信开发者工具中创建云函数目录(如cloud)

然后编辑project.config.json文件,增加云函数的根目录


右键点击cloud目录,创建同名云函数,如test

微信开发者工具会自动创建缺省的云函数文件

自己编辑函数代码,完成后右键上传即可。

5.测试云函数。可以通过云开发控制台提供的本地和云测试工具来测试云函数是否正常运行。

2.云托管部署

1.网站部署

云托管部署比较自由,一种选择网站部署方式,

登录网站微信云托管,扫码后登录,选择服务列表,没有就创建

可以模版部署和创建服务,完成后选择部署发布

可以从镜像中选择,端口根据你服务的端口号确定。

2.docker file 命令行部署

这种方式更加实用和灵活,以创建一个hello world为例,介绍下操作步骤:

1)自己搭建开发环境,用npm安装

mkdir test
cd test
npm init -y

2)安装typesript,node.js 和 express

npm install node --save
npm install express --save
npm install @types/express --save
npm ls

3)编写hello world代码,创建并编辑 index.ts

import express, { Application } from 'express';
export class Test {private app: Application = express();constructor() {// 允许跨域this.app.all('*', function (req, res, next) {res.header("Access-Control-Allow-Origin", req.headers.origin);res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");res.header("Access-Control-Allow-Credentials", "true");if (req.method === "OPTIONS") res.sendStatus(200);/*让options请求快速返回*/else next();});this.app.use(express.json());this.app.get('/', function (req, res) {res.send('Hello World');console.log("Hello World!");});let server = this.app.listen(8080, function () {let host = server.address();console.log("应用实例访问地址为 %s", host)});}};
export const test: Test = new Test();

4)编辑package.json文件

{"name": "test","version": "1.0.0","description": "","main": "index.ts","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "./node_modules/.bin/ts-node ./index.ts"},"keywords": [],"author": "","license": "ISC","dependencies": {"@types/express": "^4.17.17","express": "^4.18.2","ts-node": "^10.9.1"}
}

实际主要就是增加start一行,运行:

npm run start

5) 用curl访问测试是否成功

curl 127.0.0.1:8080

出现hello world表示成功!到这里自己的typescript搭建的hello world node.js服务完成。

6)安装云托管cli

首先要安装微信的云托管cli,也就是命令行工具

npm i -g @wxcloud/cli

如果权限不足,需使用sudo获取权限

sudo npm i -g @wxcloud/cli

7)设置密钥

命令行访问必须采用微信的的密钥,密钥的设置在微信云托管平台--设置--全局设置--cli密钥,点击 “生成密钥”,记得及时拷贝和保存,微信云托管不负责存储,如果忘记或丢失,就只能重新生成一次。

 8)登录命令行

在项目目录下,进入命令行,输入:

wxcloud login --appId <微信 AppId> --privateKey <秘钥>

appId用你自己游戏的appid,在云托管右上角,你的图标点击就可以看到;密钥使用刚才生成的密钥即可,登录成功后就可以进行下一步。

9)创建微信云托管环境,在项目目录下执行migrate,一直回车,即可生成缺省dockerfile文件。

wxcloud migrate
# 由 Dockerpacks 自动生成
# 本 Dockerfile 可能不能完全覆盖您的项目需求,若遇到问题请根据实际情况修改或询问客服# 使用基于 alpine 的 node 官方镜像
FROM node:lts-alpine# 设置容器内的当前目录
WORKDIR /app# 使用速度更快的国内镜像源
RUN npm config set registry https://registry.npmmirror.com# 将这些文件拷贝到容器中
COPY package.json package-lock.json ./# 安装依赖
RUN npm ci#安装curl方便调试
RUN apk add curl# 将包括源文件在内的所有文件拷贝到容器中(在 .dockerignore 中的文件除外)
COPY . .# 设置环境变量
ENV NODE_ENV=production HOST=0.0.0.0# 运行项目
CMD ["npm", "run", "start"]# 服务暴露的端口
EXPOSE 8080

10)创建服务

在正式部署前,应该在微信云托管网页创建你自己的服务,微信云托管--服务管理--服务列表--创建服务,输入名称,设置相关参数即可。(注意不需要网页上直接部署,只是创建一个服务名称,如果需要设置容器参数可以在服务设置里面设置。

11)命令行发布

在项目目录下执行命令wxcloud deploy,按照提示执行,注意选择正确的服务名称。

pjxxlpsj@pj-MAC test % wxcloud deploy
Wxcloud CLI 2.1.2
? 请选择环境 prod (prod-xxxxxxx)
? 请选择服务 test
请输入端口号(大部分前端框架端口号为 3000,官方模板为 80) [3000]: 8080
ℹ 部署模式 云托管
读取到 .dockerignore, 将忽略其中的文件
['.git','.gitignore','.dockerignore','**/LICENSE','**/LICENSE/**','*.md','**/node_modules','**/node_modules/**'
]
✔ 打包云托管产物
✔ 云托管产物上传成功
✔ 云托管 版本创建成功

约几分钟后提升发布成功!这样完整的云托管部署就结束了,但是如果测试是否正确部署了呢?可以在云托管网页上云端测试,设置好参数,如果反馈了hello world,证明了服务正常运行。

3.cocos creator要点

在cocos creator开发中,因为微信发布是将typescript代码编译后发布到build的微信目录,因为代码从typescript动态转换为js代码,需要注意:

1. 每次代码修改重新构建,会导致发布到微信开发者工具的代码目录会被重写,云函数本地代码会消失,因此原则上不宜讲原始代码放在build目录下。而应该采用复制方式。

2. 由于微信小程序包大小限制,一般情况下必须要分包处理,(我前期文章有描述),经过测试采用子包方案速度奇慢,在程序总大小10m左右等待时间20余秒,因此建议采用主包+远程包方案,将远程包部署到静态网站,速度几秒解决问题。

三、cocos creator访问云函数和云托管

在访问代码创建后,需要注意构建在cocos creator中构建发布到微信小游戏,然后在微信开发者工具中进行测试和调试工作。具体方式参见我之前的文章。

1.云函数访问

主要是要注意判断当前环境,如果是微信环境才能调用wx代码,具体示例如下:

if (sys.platform === "WECHAT_GAME") {//微信小游戏环境下才执行//第1次运行需要初始化if (!this.isWxInit) {wx.cloud.init({env:'xxxxxxxxx'});this.isWxInit = true;}//云函数调用let cloudData = {'command': path,'body': JSON.parse(data)};wx.cloud.callFunction({// 要调用的云函数名称name: 'test',// 传递给云函数的event参数data: cloudData}).then((res: any) => {console.log(res);if (successCallback != null) {successCallback( {'data':res.result});console.log({'data':res.result});}}).catch((err: any) => {// handle errorif (errorCallBack != null) {errorCallBack(err);}});}
}

2.云托管访问

访问方式是类似的,只是具体函数名称有差异。

if (sys.platform === "WECHAT_GAME") {//微信小游戏环境下才执行//第1次运行需要初始化if (!this.isWxInit) {wx.cloud.init({env:'xxxxxxxxx'});this.isWxInit = true;}//云托管wx.cloud.callContainer({config: {env: 'xxxxxxxx', // 微信云托管的环境ID},path: '/' + path, // 填入业务自定义路径和参数,根目录,就是 / method: 'GET', // 按照自己的业务开发,选择对应的方法header: {"X-WX-SERVICE": "test", // 填入服务名称"content-type": "application/json"// 其他 header 参数},data: data,success: (res: any) => {if (successCallback != null) {successCallback(res);}},fail: (err: any) => {if (errorCallBack != null) {errorCallBack(err);}}});}

四、费用比较

云函数有包月套餐,基本上20元/月,含各种访问数量。一般应用而言数量够用了,如果不够就只能按访问计费。云托管则给了用户很大的空间,可以自由调节云端部署的参数,如cpu内存,多个实例等等,但是费用也是依次递增。

总体比较而言,云函数费用要节约些,个人和小企业比较适合;云托管提供更多的灵活性,对企业而言可能选择余地更大。

五、其他

1.云函数采用typescript问题

因为全部游戏代码都是typescript,因此自然而然希望所有的代码都是typescript,这样可读性和维护都省事一些,如果云托管还好,通过上面的例子可以看到是完全没有问题;对于云函数而言,似乎只能支持js代码,那么如何解决呢?一个可行思路就是,本地还是用typescript编辑,在完成后,用编译方式将ts代码自动编译为js代码,并拷贝到微信开发者目录,开发者再提交到云端即可。

1)创建项目目录,初始化云函数项目。

mkdir test
cd test
npm init -y
npm install typescript  --save
npm install ts-node --save

2)云函数编写

这里给出最简单的hello world示例。

import  ICloudService  from 'wx-server-sdk';ICloudService.init();
export async function main(event: any, context: any) {console.log(event);return "hello world!"
}

3)编辑tsconfig.json

最关键的就是输出目录选择,换成你自己的微信开发者工具目录即可。

{"compilerOptions": {"target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */"module": "commonjs",                                /* Specify what module code is generated. */"outDir": "../build/xxxx/cloud/api",                /* 指定你的输出目录 */"esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */"forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */"allowSyntheticDefaultImports": true,"strict": false,                                     /* Enable all strict type-checking options. */"skipLibCheck": true                                 /* Skip type checking all .d.ts files. */},"include": ["./**/*.ts"],"exclude": ["node_modules"]}

4)编译并拷贝

npx tsc

你会看到,文件被编译为js代码并被拷贝到指定目录了,这样就可以实现用typescript编写云函数目标。后面怎么提交到服务端看文章前面的说明。

2.云函数调试

云函数调试可以本地和云端测试两种情况,本地速度很快,但要求目录下安装node.js环境方可;云端测试代表最终的结果,但明显速度比较慢,每次测试都会等10几秒,这个只是测试速度,不代表实际部署运行速度。下图可以看到,调用成功,返回“hello world!”

3.云托管计费坑

云托管的灵活性很高,不限制语言和开发工具,甚至有免费额度可以使用,但是实际开通后很容易把资源耗尽,因为在云托管--服务列表--选择服务--服务设置中可以调节容器参数如cpu、内存、实例数量等等,开始没有注意收费问题,很容易调大参数,很快耗尽资源,以后所有资源访问都会收费了。

另一方面,云托管赠送的访问次数是一次性的!这个需要反复强调,因为还有个三个月期限,大家很容易理解为每个月都有这么多访问次数或资源量,自己就是一个月多一点就把全部次数用完了,导致后面全面访问都会收费!

云托管的资源统计都是按照月计算,所以即使你的量已经用完了,但隔月统计的时候仍然显示有很多空余,这很容易让用户理解错误,以为资源还很足。所以千万要注意资源实际的访问情况,量力而行,设置参数一定要适度。

六、参考文献

1.微信云托管 微信云托管 | 微信开放文档

2.微信云函数微信开放文档

3.cocos creator api手册CocosCreatorAPI

4.cocos creator 使用手册Introduction · Cocos Creator

5.微信云托管命令行概览 | 微信云托管 CLI

下面是我的微信小游戏24点世纪大作战,欢迎大家下载。

cocos creator 3.7微信小游戏开发云函数和云托管部署相关推荐

  1. Cocos Creator 发布到微信小游戏的资源管理

    环境:Cocos Creator v1.9.1: 微信web开发者工具 v1.02.0808300,线上基础调试库 1.9.92. 以下,ccc指cocos creator.资源均指Texture.A ...

  2. cocos creator JS 实现微信小游戏体力倒计时恢复的代码

    写微信小游戏时写的,功能可能还有待改进.目前这里只是在逻辑层获取了当前的系统时间,所以离开页面倒计时会停止(所以想要完成场景跳转之后仍在继续倒计时的功能,必须在逻辑层取回离开某个场景时的时间来做条件运 ...

  3. 《欢乐坦克大战》微信小游戏开发总结

    <欢乐坦克大战>微信小游戏开发总结 <欢乐坦克大战>微信小游戏开发总结 前言 <欢乐坦克大战>是一款支持3V3实时对战并首批参与上线的微信小游戏中的作品.因为该游戏 ...

  4. 微信小游戏开发入门:示例代码介绍

    什么是微信小游戏? 看前几天的科技新闻,微信中的"跳一跳"小游戏从去年12月发布,截至到今年3月份已经积累了3.9亿玩家,这是一个多么恐怖的数字,"跳一跳"游戏 ...

  5. 微信小游戏开发学习记录2

    接上一篇:微信小游戏开发学习记录_寂静流年韶华舞的博客-CSDN博客_微信小游戏开发学习 目录 一.UI系统 1.基础渲染组件-精灵组件 (1)操作: (2)Sprite 属性 (3)渲染模式 2.L ...

  6. 微信小游戏开发之微信登录功能的云开发实现方案选择

    主题 CocosCreator接入微信登录获取openid,微信登录实现方案调研过程 特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容 ...

  7. 动态加载子节点_微信小游戏开发之场景切换和常驻节点传递数据

    主题 场景切换 场景间数据传递方式 小游戏全局背景音效 特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ...

  8. 微信小游戏开发上传流程

    微信小游戏开发上传流程 今年因为比赛的原因初步接触了一下微信小游戏的开发.在这里做一些流程整理. 1.立项 对于立项,原因可能会有很多.比如客户或者市场的需求,新技术的出现(参照微信小游戏刚刚出现的时 ...

  9. 微信小游戏开发教程-游戏实现3

    微信小游戏开发教程-游戏实现3 对象池 由于游戏过程中会创建很多临时对象,这些对象很快又不再使用,垃圾回收器也能帮我们主动回收这部分垃圾,但是回收时间不可控制,同时增大了创建对象的开销,所以我们使用对 ...

最新文章

  1. LeetCode刷题记录4——67. Add Binary(easy)
  2. NSMutableArray 如果只进行了声明,而没有进行初始化,那么程序不会报错,但是,声明的那个变量不起任何作用...
  3. UltraEdit正则表达式介绍及实例
  4. 裁剪(Clipping)-Window GDI
  5. http协议 web开发的应用 笔记
  6. html 分页_Python爬虫:如何爬取分页数据?
  7. 芯片短缺并未缓解,机构数据显示交付周期在7月份已超过20周
  8. java日历查询代码,查询日历,万年历查询,日历格式JAVA原代码
  9. android studio导入jar包和so库,Android实战技巧之十二:Android Studio导入第三方类库、jar包和so库(示例代码)...
  10. C++基础::类设计的几大原则
  11. 解决!Gallery中嵌套ListView,Gallery不能滑动的问题
  12. c# 标准正太分布函数_数据处理中0-1规范化和标准化
  13. 计算机二级考试先后顺序,(常文档排按照计算机二级考试试题顺序编写.doc
  14. 人工智能和网络安全,一场正发生的挑战
  15. 10M/100M自适应以太网接口
  16. 【自用向】【新手向】PHP入门学习(不断更新)
  17. 高性能,高扩展,高可用架构
  18. matlab:导入txt数据
  19. S - Picture
  20. 只管去做:让你迅速实现增值的目标管理法

热门文章

  1. android系统动态切换输入法
  2. CSS 过渡(CSS3)
  3. “一年之计在于春”---博客之开场篇
  4. Verilog HDL设计数字跑表数码管显示
  5. hexin-v(cookie)还原
  6. ubuntu12.04借助wine安装国际版qq(亲测成功版)
  7. 课程学习归纳总结(9月)
  8. 计算机语言属于生物学,西安交通大学19年3月课程考试《药物信息学》作业考核试题【标准答案】...
  9. 网站可行性报告范文_青浦写可行性报告范文编写公司
  10. 智能化金融新范本 银联商务与百度智能云合作再升级