Laya FairyGui系列十一 发布微信小游戏

FGUI发布微信小游戏的时候需要做一些修改，然后配合Laya2.0的开放域项目实现微信小游戏排行榜。

FGUI库文件引入修改

因为rawinflate库再微信小游戏平台有问题，所有不再引入这个库文件，fairygui库改用min文件，减少资源大小。

loadLib("libs/laya.core.js")
loadLib('libs/laya.wxmini.js')
loadLib('libs/laya.ui.js')
//-----libs-end-------
loadLib('libs/laya.html.js')
// loadLib('libs/rawinflate/rawinflate.min.js')
loadLib('libs/fairygui/fairygui.min.js')

loadLib("js/bundle.js");

FGUI发布修改

上面取消了rawinflate库的引入，发布界面点击编辑全局设置，取消压缩描述文件。
因为微信小游戏不支持FGUI默认的.fui文件，所以需要修改扩展名，同时选用二进制格式。

这里我使用的时txt文件，具体微信小游戏支持的文件格式可以看下微信小游戏官方文档
然后代码中设置定义的扩展名:

//设置发布时自定义的扩展名
fairygui.UIConfig.packageFileExtension = 'txt';

注意代码中再AddPackage的调用方式，如果是如下的调用方式也需要将后缀fui改成自己设置的后缀名。

fairygui.UIPackage.addPackage('res/包名'，'res/包名.fui')

到此发布微信小游戏的修改已经全部结束，如果发布后再微信小游戏中有什么报错需要检查自己的库文件引入是否正确，资源包是否正确加载。

微信排行榜

参考：
微信开放数据域
Laya微信小游戏的开放域

按照上述帖子操作创建开放域项目并设置主域项目，但是上述会有个问题，整个排行榜界面都在开放域中，排行版的关闭按钮也在开放域中，点击关闭按钮的时候没办法通知主域。有些游戏中排行榜界面里面还会放置分享按钮等。
这时候整个排行榜界面都放置再开放域里面就不合适，我们可以这把排行榜信息放在开放域。其他UI还是使用FGUI创建。然后配合Laya的WXOpenDataViewer组件实现。

• 如下图创建排行榜界面，并再界面中使用图形组件标注出排行榜信息显示的范围

  
  

• 然后修改开放域项目中的UI，只保留_list组件，删除背景图，并将背景图资源从本地删除。调整列表和ltem宽高为之前使用图形组件标注的宽高

  
  
• 代码中打开使用FGUI创建的排行榜界面时使用代码动态创建一个WXOpenDataViewer组件，大小和位置设置和之前图形组件一致。

const openDataPosFlag = this.view.getChild('openDataPosFlag').asGraph;
this.m_openDataView = new Laya.WXOpenDataViewer();
this.openDataPosFlag = openDataPosFlag;
//设置WXOpenDataViewer组件的大小和位置
this.m_openDataView.width = this.openDataPosFlag.width;
this.m_openDataView.height = this.openDataPosFlag.height;
this.m_openDataView.x = this.openDataPosFlag.x;
this.m_openDataView.y = this.openDataPosFlag.y;
//添加到排行榜界面上
this.view.displayObject.addChild(this.m_openDataView);
openDataPosFlag.visible = false;

//发送消息到开放域显示排行榜信息
this.m_openDataView.postMsg({ type: 'openRank' });

其他逻辑修改和使用laya没有区别。上面参考文档里面也有详细说明。