微信小游戏主域显示子域画面
请大家关注我的微博:@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);
}
},