LayaAir之小游戏开放域开发

Posted 2021-01-18

版本 : LayaAir2.0.0bate4

一 : 认识类 : Laya.WXOpenDataViewer , 顾名思义:此类封装了开放域(子域)的画布功能.这样的话就不需要程序员自己去写画布功能了. 其用法主要如下:

①:在UI编辑其中 , 使用此组件(可设置宽高,坐标等等)

②:可以在代码中new,再设置宽高,坐标等,代码片段(伪代码)如下

private _my_open : Laya.WXOpenDataViewer = null;
        this._my_open = new Laya.WXOpenDataViewer();
        this.width = this._my_open.width = 255;
        this.height = this._my_open.height = 236;
        this.addChild( this._my_open );

二:在主域显示开放域(子域)的画布信息

Ⅰ,主域发送信息
①,发送信息是用Laya.WXOpenDataViewer类的postMsg进行发送的.其实它封装了wx.postMessage方法.实例如下:

this._my_open.postMsg({ type : "ResultPhoto" , myOpen : WC_UserInfo_VO.Instance.OpenId , myDistance : $distance} );

Ⅱ,子域接收信息
②,注意,子域接收消息最好在Main(或其他管理类)初始化的时候做一个消息的分发.因为,你不能只接收一条主域信息:

constructor() {
        //根据IDE设置初始化引擎      
        Laya.init(GameConfig.width, GameConfig.height );
        Laya.stage.scaleMode = GameConfig.scaleMode;
        Laya.stage.screenMode = GameConfig.screenMode;
        Laya.stage.alignV = GameConfig.alignV;
        Laya.stage.alignH = GameConfig.alignH;

        this.onConfigLoaded();
    }

    private  onConfigLoaded(): void {
        //加载IDE指定的场景
        this._wx = Laya.Browser.window.wx;
        if( this._wx ){
            //接受来自主域的信息
            this._wx.onMessage(function(message):void{
                this.recevieData(message);
            }.bind(this));
        }
    }

三 : 补充注意点(小游戏项目)

Ⅰ,主域部分
① , 在game.json中加入"openDataContext": "./openDataContext" , 如下:

Ⅱ,子域部分
① , 子域工程以小游戏方式打包
② , 子域资源结构如下:

③ , index.js 加入引入的项目 , 不要加入webgl等库
手动加入部分类库:

require("weapp-adapter.js");
require("libs/laya.wxmini.js");
window.loadLib = require;

四 : 结果

OK , 本篇基本到此结束............