[LayaAir 2.0]LayaAir2.0(LayaBox)之小游戏开放域开发

论坛传图很麻烦大家可以直接看我博客 LayaAir2.0(LayaBox)之小游戏开放域开发
Laya2.0 开放域简介
自从2018年秋开始，layabox 公司发布了2.0 版本，在2.0 版本里面多了一个组件，就是

WXOpenDataViewer

组件这个歌组件是专门为做微信小游戏显示开放域使用的，我自己在论坛上找了很久没有找到合适的教程，官方文档也是写的模棱两可，于是自己探索了两天，终于悟得真经，准备记下来，便于以后查找，顺便分享给那些对这个组件不熟悉的开发者。
开发步骤

机器上已经安装了Layabox的2.0 版本
需要新建两个项目，一个主域项目，一个开放域项目（关于主域和开放域（子域）的概念此处不多说）
最好编译到微信预览效果

新建子域（开放域）项目

首先打开 LayaAir 新建项目面板新建项目
```
sunDemo
```

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307195813680.png?lastModify=1551962708

官方已经给我们搭建好了基本的结构和框架，我们只需要修改部分细节即可首先修改 Main下面的方法

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307200032836.png?lastModify=1551962708

class Main {

    constructor() {

         //设置子域

        Laya.isWXOpenDataContext = true;

        Laya.isWXPosMsg = true;

        //根据IDE设置初始化引擎      

        Laya.init(GameConfig.width, GameConfig.height,false);

        Laya.stage.scaleMode = GameConfig.scaleMode;

        Laya.stage.screenMode = GameConfig.screenMode;

        Laya.stage.alignV = GameConfig.alignV;

        Laya.stage.alignH = GameConfig.alignH;

        // 关于透传接口，请参考: https://ldc2.layabox.com/doc/?nav=zh-ts-5-0-7

        var mark = 0;

        if(Laya.Browser.onMiniGame){

            Laya.Browser.window.wx.onMessage(function(data){//微信接受信息

                if(data.url == "res/atlas/test.atlas" || data.url == "test/1.png"

                ||data.url == "test/2.png"||data.url == "test/3.png"){

                    mark ++;

                    console.log("------data.url:" + JSON.stringify(data.url));

                    if(mark == 4)//确认数据全部接收后

                        Laya.loader.load(["res/atlas/test.atlas", "test/1.png",

                         "test/2.png", "test/3.png"],Laya.Handler.create(this,this.onComplete));

                }

            }.bind(this));

        }else {

            Laya.loader.load("res/atlas/test.atlas",Laya.Handler.create(this,this.onComplete));

        }



                

    }



    onComplete(): void {

        //初始化rank排行榜

        var rank = new BigRank();

        //初始化

        rank.init();

    }

然后修改 BigRank 这个类

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307200411384.png?lastModify=1551962708

public init() {

            Laya.stage.addChild(this);

            //初始化list数据

            if(Laya.Browser.onMiniGame){

                //接受来自主域的信息

                wx.onMessage(this.recevieData.bind(this));

                // 直接展示数据

            }

        }

        

        /**

         * 接收信息

         * @param message 收到的主域传过来的信息

         */

        private recevieData(message):void{

            var _$this =this;

            var type:String = message.type;

            switch(type)

            {   

                default:

                    break;

            }

            // this.getFriendData();

            this.setlist(this.arr);

        }

然后记得编译素材 Ctrl+F12 和编译项目，最后发布项目

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307200615015.png?lastModify=1551962708
file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307200631605.png?lastModify=1551962708

做完这些之后，准备主域的准备

主域设置

新建项目fatherDemo 然后新建一个素材页面名字叫 MyDialog,然后新建一个Ts 文件，并且继承这个类file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307200847491.pnglastModify=1551962708file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307200921833.pnglastModify=1551962708

我们此时做上面的图片做背景是衬托，你自己可以略过此步骤

我们开始拖入一个开放域组件到舞台
file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307201222269.pnglastModify=1551962708
设置宽高和位置

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307201245098.png?lastModify=1551962708

新建的 Typescript 文件如下
file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307201329143.pnglastModify=1551962708

import {ui} from "../ui/layaMaxUI";

import MyDialogUI = ui.game.MyDialogUI;



export class MyDialog extends MyDialogUI {

    constructor() {

        super();

    }



    onOpened(param: any): void {

        console.log("mylog------:" + JSON.stringify("onOpened"));

        this.openDataView.postMsg("test10086");

    }

}

此时主域已经准备完毕。两个项目合并

把刚刚导出的子域项目 sunDemo 的导出文件夹中的部分文件，复制到主域项目fatherDemo 项目下面的bin 目录，并且自己新建一个目录，我这边叫做 “open” 你可以自己定义你的目录名字

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307201648692.png?lastModify=1551962708

修改 fatherDemo 项目 bin 目录下面的 game.json 文件添加开放域设置

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307201746843.png?lastModify=1551962708

{

  "deviceOrientation": "portrait",

  "showStatusBar": false,

  "networkTimeout": {

    "request": 10000,

    "connectSocket": 10000,

    "uploadFile": 10000,

    "downloadFile": 10000

  },

  "openDataContext": "./open"

}

然后把 sunDemo 子域项目
```
laya/assets
```
里面的 test 复制到 fatherDemo主域项目的对应文件夹 laya/assets 下面，然后编译素材和代码file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307202022134.pnglastModify=1551962708
准备好一切后开始可以发布项目

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307202047767.png?lastModify=1551962708
项目发布文本，准备用微信模拟器预览效果微信模拟器预览效果

打开模拟器，导入项目，如果自己没有appid 自己可以申请一个或者自己用系统测试 Appid

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307202204983.png?lastModify=1551962708

最后效果如图

file:///blog/asroads.github.io/source/_posts/game/LayaAir2-0-LayaBox-%E4%B9%8B%E5%B0%8F%E6%B8%B8%E6%88%8F%E5%BC%80%E6%94%BE%E5%9F%9F%E5%BC%80%E5%8F%91/image-20190307202229138.png?lastModify=1551962708

总结
这个项目我没有访问微信的云，而是用了Laya官方自带的本地数据，主要是目录结构比较麻烦，如果用过LayaAir1.0版本，那么这个基本变化不大，但是要注意的是 Layabox 2.0 的Scene 的打开和加载的方式，如果打开不对，就会出现问题，我就遇到了，虽然可以正常显示，位置正确，但是滑动交互区域不对，只有四分之一，或者上面的一半是有效交互区域，其他区域可见，但不能交互，无法拖动，后来，我重新整理了这些，然后逐一分析，最终解决问题。参考文章