CocosCreator发布微信子域

Love The Way You Lie 2022-04-04 11:49 276阅读 0赞

我们拿Creator官方的子域实例来说一下：

[https://docs.cocos.com/creator/1.9/manual/zh/publish/publish-wechatgame-sub-domain.html?h=%E5%BC%80%E6%94%BE%E6%95%B0%E6%8D%AE][https_docs.cocos.com_creator_1.9_manual_zh_publish_publish-wechatgame-sub-domain.html_h_E5_BC_80_E6_94_BE_E6_95_B0_E6_8D_AE]

因为我的Creator是1.9的，所以我要选官方1.9的文档。

注意，各个的版本的文档会对应不同的项目实例，所以一定要选对文档版本。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70][]

大家可以根据自己的引擎版本下载相应的项目。

好了，下面开始讲一下我在子域方面的理解和踩过的坑：

### 一、子域 ###

子域的学名是**开放数据域**，这个名字才是真正的微信发布的官方名字。

所谓开放数据域是说在这个数据域里我们可以拿到我们的微信好友等相对隐私的数据，但是这个数据在这个数据域里只能是做显示的用途，不能作其他用。——这也是微信做的一个数据保护机制。

子域在CocosCreator中是一个独立的新的项目，区别正常的项目只是我们在打包的时候会勾选“小游戏开放数据域”这个选项。

子域在主域的显示方式是以一张图处的形式显示出来的，所以我们在需要显示子域的节点上加一个Sprite组件，这样才能将子域显示出来。

### 二、API功能解析 ###

我们可以看到官方实例的主域代码：

cc.Class({
        extends: cc.Component,
    
        properties: {
            display: cc.Sprite
        },
    
        start () {
            this._isShow = true;
            this.tex = new cc.Texture2D();
        },
    
        onClick () {
            this._isShow = !this._isShow;
            // 发消息给子域
            wx.postMessage({
                message: this._isShow ? 'Show' : 'Hide'
            })
        },
    
        _updateSubDomainCanvas () {
            if (!this.tex) {
                return;
            }
            var openDataContext = wx.getOpenDataContext();
            var sharedCanvas = openDataContext.canvas;
            this.tex.initWithElement(sharedCanvas);
            this.tex.handleLoadedTexture();
            this.display.spriteFrame = new cc.SpriteFrame(this.tex);
        },
    
        update () {
            this._updateSubDomainCanvas();
        }
    
    });

我们只能从主域发消息给子域，所以主域只使用wx.postMessage这个API，主要是将游戏服务器发回的数据再传给子域显示。

如果子域有拖动，移动节点的操作，我们需要在主域做同步显示的功能，所以最好最好是每帧重绘，所以官方代码每帧调用\_updateSubDomainCanvas。

子域代码：

cc.Class({
        extends: cc.Component,
    
        properties: {
            display: cc.Node
        },
    
        start () {
            wx.onMessage(data => {
                switch (data.message) {
                    case 'Show':
                        this._show();
                        break;
                    case 'Hide':
                        this._hide();
                        break;
                }
            });
        },
    
        _show () {
            let moveTo = cc.moveTo(0.5, 0, 73);
            this.display.runAction(moveTo);
        },
    
        _hide () {
            let moveTo = cc.moveTo(0.5, 0, 1000);
            this.display.runAction(moveTo);
        }
    });

子域只能从使用wx.onMessage接收从主域传过来的消息，和少数微信的API，这个是微信保护数据的限制。

如果大家还有不理解的，可以在[微信API][API]或者[Creator文档][https_docs.cocos.com_creator_1.9_manual_zh_publish_publish-wechatgame-sub-domain.html_h_E5_BC_80_E6_94_BE_E6_95_B0_E6_8D_AE]上找答案。

### 三、官方的坑 ###

在我们下载的Creator的主域和子域这两个项目中，都有一个“Main Camera”。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 1][]

在主域的项目里有这个Main Camera并没有什么问题，因为我们打包主域wx-main-project的渲染模式是：

![2018121710475349.png][]

主域是选择了webGl渲染模式，这样就没问题；但是子域项目只支持2D渲染模式，所以打包wx-open-data-project打，就需要选择Canvas的渲染模式，这样小游戏打包出来之后就会出现“点击区域偏移”的问题。

所以我们打包的时候需要把子域项目的“Main Camera”节点删除。

这个是官方项目的一点小坑。

Tips：这个“Main Camera”在2.0的子域实例里，也有出现。其他版本的实例则没有了解。

### 四、官方项目未实现的功能 ###

1、子域在各个手机的分辨率适配

2、子域获取微信开放数据

分辨率适配的问题可以按照自己的需求来做；获取微信开放数据可以去看[微信的API][API 1]。

[https_docs.cocos.com_creator_1.9_manual_zh_publish_publish-wechatgame-sub-domain.html_h_E5_BC_80_E6_94_BE_E6_95_B0_E6_8D_AE]: https://docs.cocos.com/creator/1.9/manual/zh/publish/publish-wechatgame-sub-domain.html?h=%E5%BC%80%E6%94%BE%E6%95%B0%E6%8D%AE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70]: /images/20220404/cc74f1621dca481da180759bec4ae2d8.png
[API]: https://developers.weixin.qq.com/minigame/dev/api/wx.getOpenDataContext.html?search-key=%E5%BC%80%E6%94%BE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 1]: /images/20220404/a0b2b60a48d840f980b503bb34c846e2.png
[2018121710475349.png]: /images/20220404/268d69b63b564d7ebeac75a794649e53.png
[API 1]: https://developers.weixin.qq.com/minigame/dev/api/wx.getSharedCanvas.html