CocosCreator使用微信云开发

分手后的思念是犯贱 2022-11-12 02:40 437阅读 0赞

## 一、后台配置 ##

首先，编译微信小游戏项目：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70][]

配置好appId，然后进入微信小游戏后台管理界面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 1][]

创建云环境，这里的“环境ID”，在开发中需要用到。

## 二、项目配置 ##

### 1.配置云路径 ###

现在配置项目的云函数路径，在项目名目录下新建文件夹“build-templates”，也就是“项目名/build-templates”。

Cocos引擎会自动将buld-templates放到构建后的微信小游戏项目目录下，详细请查看：

[自定义构建模版][Link 1]

![20210629142339888.png][]

把“project.config.json”放到目录下，文件内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 2][]

{
      "setting": {
        "urlCheck": false
      },
      "cloudfunctionRoot": "./cloudfunction"
    }

然后创建“cloudfunctions”文件夹，该文件夹下存放我们写的云函数。

### 2.编写云函数 ###

在微信开发者工具中，我们会看到“cloundfunction”目录作为云函数目录的特殊标志。

右键cloundfunction，会有以下列表：我们选择新建Node.js云函数，便可以创建云函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 3][]

云函数的编写逻辑请查看官方文档：

[https://developers.weixin.qq.com/minigame/dev/wxcloud/basis/quickstart.html][https_developers.weixin.qq.com_minigame_dev_wxcloud_basis_quickstart.html]

## 三、云函数的初始化 ##

static init(callback: Function) {
        if (wx != undefined && wx != null) {
            wx.cloud.init({
                env: "您的cloundID"
            });
            this.db = wx.cloud.database();
    
            console.log("db", this.db);
            this.callServer("init", null, (res: any) => {
                console.log("init------", res);
                this.appid = res.result.appid;
                this.openid = res.result.openid;
                // this.addData({
                //     isFakeData: false
                // }, callback);
                callback();
            });
        } else {
            callback();
        }
    }

我们需要再项目一开始的时候，就初始化好云环境，然后再初始化成功的回调中，进行下一步处理。

## 四、云函数的查看和编辑 ##

在微信开发者工具中，如果我们拥有云开发的权限之后，图中的“云开发”按钮是点亮了的，我们可以点击，进入“云开发控制台”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 4][]

进入“云开发控制台后”：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 5][]

我们可以编辑数据库、云函数、资源的存储等（不再细说了）。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70]: /images/20221022/3917e6555cd04ab99703cf2065101ac3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 1]: /images/20221022/269f5a0a1cd045dbb89c1b1b699d2d9f.png
[Link 1]: https://docs.cocos.com/creator/3.1/manual/zh/editor/publish/custom-project-build-template.html
[20210629142339888.png]: https://img-blog.csdnimg.cn/20210629142339888.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210629142635908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021062914205920.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU=,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_minigame_dev_wxcloud_basis_quickstart.html]: https://developers.weixin.qq.com/minigame/dev/wxcloud/basis/quickstart.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210629143719170.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210629144206502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU=,size_16,color_FFFFFF,t_70