CocosCreator接入微信小程序云开发过程

CocosCreator接入微信小程序云开发过程

接入前准备

首先需要申请一个小游戏类目的小程序，记下appid，在CocosCreator「构建发布」中填入。

⚠️不可以是小程序的appid（这里踩坑了，用了之前的小程序的appid，构建后用微信开发者工具打开提示无法找到app.js，因为这个账号之前注册的时候第一大类目选择的不是小游戏，是普通小程序，所以入口文件就找不到了，打包构建出来的小游戏入口文件为game.js，普通小程序入口文件为app.js，如果绑定的appid第一类目不是小游戏的话就会出现这样的错误，所以只能重新注册一个账号。）

Cocos构建文件优化

选择「项目」-「项目设置」-「模块设置」中可以勾选掉项目中没有使用到的模块，减少打包体积。

如果打包后体积过大（4M以上）就需要在构建发布中勾选

官方规定打包体积要小于4M，这里我的项目构建后大小为2M多，所以就没有用到这个选项。

微信开发者工具开通云开发

构建以后打开开发者工具，点击导入项目，把刚才构建的文件填入，不出意外的话就可以看到界面了。

点击「云开发」，根据自己的需求选择套餐开通。

设置云开发本地文件路径

由于每次构建都会删除掉build目录下wechatgame内的所有文件，所以我们为了方便可以把云开发本地目录设置到wechatgame的同级目录下，这样再次构建文件的时候只会刷新wechatgame内的文件，而云函数不受影响。（被折磨了几次反复创建本地云文件才想起来！）这时需要我们手动导入整个build文件为根目录同时修改project.config.json文件。

需要设置小程序的运行目录以及云函数的本地目录。

⚠️文件夹名称要严格和配置文件内描述保持一致！

所以按照我的操作，目录看起来是这样的。

注意修改的是最外层的project.config.json，内层的wechatgame中的是每次构建自动生成的，强迫症也可删除掉。

编写云函数

在云函数文件夹下右键选择新建云函数，创建好后编写index.js逻辑代码。右键上传

初始化云函数

在game.js中添加如下代码：

⚠️每次构建后都需要重新添加，不然控制台会报错：云函数没有初始化。

CocosCreator中调用云函数

在cocos编辑器中编写正常逻辑代码，这里为了测试我绑定了一个按钮：

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {


    @property(cc.Node)
    loginButton: cc.Node = null;


    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    Login() {
        console.log("Login-点击");

        if (cc.sys.platform === cc.sys.WECHAT_GAME) {
            //微信小游戏环境下才执行
            wx.cloud.callFunction({
                name: 'login',
                complete: res => {
                    console.log('callFunction login result: ', res)
                }
            })
        }

    }

    start() {

    }

    // update (dt) {}
}

注意需要判断环境，不然的话在本地web调试的时候就会报错。还有一个不爽的就是wx在vscode是红的，就像这样，但是不影响执行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m6YoYxDw-1649770518824)(/Users/admin/Library/Application Support/typora-user-images/image-20220412213234759.png)]

编写完成重新构建一遍，如果只修改了脚本文件的话可以勾选「只构建脚本」加快构建速度。

构建完成后导入或者刷新微信开发者工具，点击按钮就可以看到云函数正常调用了。

测试没有问题以后就可以编写其他云函数逻辑进行调用了。