如何使用egret开发微信小游戏（二）自定义滑动排行榜

上一篇文章主要讲了使用egret发布成微信小游戏，本文主要讲游戏和微信开放域之间通信和自定义排行榜的制作。
首先我们看看发布出来的微信项目结构是什么样的

image.png

实际上我们要做的就是做一个开放数据域项目把原有的目录的内容替换就可以了

 

首先我们要了解一个概念，主域和开放数据域。
微信小游戏是由两个部分组成，主游戏部分（游戏逻辑部分）和上层显示部分（如排行榜）。
我理解的主域和开放数据域通俗一点解释应该如下：
主域：主游戏部分
开放数据源：上层显示部分（openDataContext文件夹里的内容）

image.png

 

制作自定义排行榜项目

有两种方式制作排行榜
使用游戏引擎来制作和使用微信小游戏接口来自己写
使用引擎：优点--开发简单，很多功能引擎都封装了。缺点：引用了很多库文件，项目变得臃肿
接口开发：优点--项目轻质，不存在与功能无关的代码。缺点：开发比较复杂，功能都要自己写（使用egret Launcher发布时的默认代码就是用的该方法）

备注：个人建议:如果可能的话尽量不要用引擎做，微信小游戏的上传包大小是有限制的，并且也会增加游戏的加载时间，影响体验。

本文只处理排行榜的接口，更多接口请参考API
微信小游戏接口参考：
https://developers.weixin.qq.com/minigame/dev/api/open-api/data/wx.getFriendCloudStorage.html

使用egret引擎制作开放数据域项目

一.处理主游戏项目

1.打开上一篇创建的egret项目（主游戏项目）

image.png

2.打开Main.ts，删除createGameScene下所有代码，添加开放域渲染代码，并且添加Home类到舞台上，并通知开放域初始化资源。

image.png

3.编辑Home的eui界面，增加排行榜按钮和关闭排行榜按钮及其他设计（根据你的需求设计界面）

image.png

image.png

3.在Home类中添加通知和关闭排行榜代码

image.png

4.在egret Launcher中发布成微信小游戏（上文已经介绍，不再细述）

image.png

5.此时目录下有两个项目，一个是egret项目，一个是微信小游戏项目。

image.png

二.使用egret创建一个开放域项目

1.在项目中添加微信小游戏接口声明文件和微信功能文件

image.png

2.修改config.wxgame.ts，设置将文件发布路径修改到微信小游戏项目中的openDataContext目录下

image.png

3.修改egretProperties.json，去掉不必要的库文件

image.png

4.删除wingProperties.json文件内的配置

image.png

5.删除项目中resource下的所有内容，因为此项目可以访问主项目的资源，所有不需要资源文件了（你要真想放也可以）

image.png

6.删除Main中的原有代码，并处理排行榜相关逻辑

image.png

image.png

image.png

image.png

7.打开之前发布的微信小游戏项目中的openDataContext，处理里面的文件

image.png

image.png

image.png

8.使用egret Launcher发布微信小游戏

image.png

9.看看项目目录

image.png

10.看结果，项目源码我都放在附件里了，如有不明白的地方欢迎留言或者私信。

image.png

注意的坑

1.index里都设置为60帧

 

image.png

 

2.最后的微信项目发布成release可以减少项目大小

 

附件：链接：https://pan.baidu.com/s/1WzwPjwtJKW1deNfveE6oSA 密码：f8yh

 

这个是我们的微信小游戏,欢迎吐槽

 

image.png