微信小游戏主域显示子域画面

微信小游戏主域显示子域画面

请大家关注我的微博：@NormanLin_BadPixel坏像素

---

微信为了数据的安全，获取公共域数据的API只能在子域（安全域）中调用。如果我们用公共域数据来储存用户的排行信息，那么我们就得在子域内绘制排行榜，再映射到主域中。这篇文章就来讲讲怎么创建主域和子域工程，并在主域显示子域内容。

创建项目

作者是使用cocosCreator（以下简称ccc）开发的，用的是最新版1.9.1。最新版本支持子域项目的构建。这里是官方的创建子域例子。

大家按照上面的步骤来设置就好了。

这里需要注意也比较麻烦的是，主域工程每次发布都会删除目录下的所有文件重新生成，这就导致了我们需要重新复制子域的发布项目到主域项目下。

项目设置

ccc的Demo展示了基本所有的步骤，这里我再给大家讲一下我的经验。

为了数据安全，小游戏（当前）只允许主域向子域发送消息，但是子域无法向主域发送消息。这会有什么问题呢？比如我们在子域的画面上设置了一个按钮，当我们按下按钮，生成的点击事件我们在主域是获取不到的。

因此，我的想法是，子域只负责画面的绘制，所有的交互都由主域完成，而交互产生的事件，由主域发送消息给子域让子域更新画面。

简单的说，我在主域和子域做同样的一套UI，但是主域只有按钮等有交互操作的UI，而子域只有图片文字等渲染UI。自己注意主域UI显示的先后顺序。

主域向子域发送消息

这里是官方的API。官方的API虽然全，但是不详细，很多人看的似懂非懂，还不如一个例子有用。这里贴出我的代码。

主域的代码(发送消息)：

ShowRankView : function(){
    wx.postMessage({
        message: 'ShowR',
        data1:1,
        data2 : "lalala",
        data3 : true,
        ...
    })
    },

子域的代码（接收消息）

 start () {
    wx.onMessage(data => {
        switch (data.message) {
            case 'ShowR':
                this.ShowRHandler();
                break;
            case 'msg1':
                this.Msg1Handler(data.data1,data.data2,...);
                break;
            case 'msg2':
                this.Msg2Handler(data);
                break;
            case 'msg3':
                this.Msg3Handler();
                break;
        }
    });
},

怎么绘制排行榜就是考验自己代码能力咯。这篇只讲微信相关API的调用。

主域绘制子域画面。

ccc的例子已经写的很详细了，这里我就再帖一次。

ShowRankView : function(){
    wx.postMessage({
        message: 'ShowR',
    })
    this.UIRankViewNode.active = true;
    this.ShowRank = true;
},
start(){
    ...
    this.tex = new cc.Texture2D();
    ...
},
update (dt) {
    ...
    if(this.ShowRank){
        this.tex.initWithElement(sharedCanvas);
        this.tex.handleLoadedTexture();
        this.UIRankView.spriteFrame = new cc.SpriteFrame(this.tex);
    }

},

结束