微信——小游戏

小游戏开放注册已经有段时间了，学做了一个麻将项目后就没怎么接触了。

首先准备：

1、在微信公众平台注册一个账号，获得一个appId。

2、微信小游戏开发文档

3、学习开发语言javaScrict，TypeScrict（跟C#，java等差别不大）

4、白鹭引擎开发文档

之前学习小游戏时选择了白鹭引擎，服务器端是用的网易的pomelo做网络连接。

首先在白鹭引擎上创建一个项目就可以用Egret Wing进行开发了，同时也可以发布成小游戏进行运行查看效果。

上面是Wing项目结构图：

libs下加载的是项目使用到的第三方库

resource下放置资源和布局文件

src就是实现功能的代码了

egretProperties.json是一些配置参数，主要关注的就是modules，这是引入第三方库的地方，除了pomelo外，其他的是白鹭提供的，pomelo是项目使用的网络第三方库。

index.html就是一个网页文件，应该相当于一个容器吧，项目界面都是会放入这里进行显示。里面也是有些属性配置，可以修改。

manifest.json好像都是自动生成的，不用管。

剩下的一般来说都是固定的，没什么变化就不说了。

首先入口一眼我们就知道：Main.ts。里面具体内容可以自己看看，主要就是加载资源，加载资源也得显示界面，LoadingUI.ts就是这个初始加载界面，这里的加载资源一般我们会只加载一张图片，然后打开真正的loading界面，有进度条显示的，因为LoadingUI在显示时还没有图片资源可以显示，只是一个空白界面，当然你也可以用画布画，但是再怎么画也跟图片很难比较吧。当然如果资源不大也可以直接就这样，市面发布的小游戏很多都是这样，等加载完资源再打开游戏，毕竟资源不大，消耗不了多少时间。只是看起来可能不那么友好而已。

一、加载资源：

1、RES.loadConfig(file, directory）：file指完整的default.json路径，可以是自己服务器的，一般最终项目不大于4m时这个路径是项目中default.json的路径（"resource/default.res.json"）;directory指default.json所在的文件夹路径，可以是自己服务器的，也可以是项目的（"resource/"）。

2、RES.loadGroup(groupName, priority, PromiseTaskReporter）：groupName就是在default.json中定义的；priority指加载的优先级，越大越早；PromiseTaskReporter是接收加载进度的view，该view实现PromiseTaskReporter接口的方法onProgress(current, total)

二、布局exml和Component

exml将各控件按要求排列成布局，而Component匹配exml进行控件的显示和事件处理

定义一个Class继承Component，在构造函数里设置this.skinName="xxx.exml"即可绑定，控件名对应相同即可匹配。

三、调用微信小游戏API

既然是微信小游戏，而在前面的开发中都没有调用任何小游戏的API，那么在哪里调用小游戏API呢？答案在Platform.ts里面。

首先我们用白鹭引擎发布一个小游戏项目，可以看到小游戏项目结构如下：

js：对应Wing项目的libs

resource：对应Wing项目的resource

game.js，game.json：对应index.html里面的一些配置

project.config.json：项目配置文件，appId配置在里面

platform.js：对应Wing项目的Platform.ts。在Platform.ts中我们只是定义一个个接口，而没有实现，因为这块调用的是小游戏API，白鹭引擎让小游戏API和它进行分离处理，只提供接口。具体实现还是在微信开发工具上。

到这里就可以开发了，然后你就会遇到各种问题：

1、音量控制：白鹭引擎的音量控制没有效果，最终实现采用的小游戏的API，这是3个月前的事了，现在没有试过不知道改了没，或者说我使用方法有问题。

2、截图分享：微信头像分享有问题，在webgl模式下截图为空白；然后我改到canvas模式可以了，不过随之而来有个问题：mask遮罩无效导致头像不能显示，所以把mask去掉就可以了。估计是不兼容吧，具体我也不懂，毕竟没学过网页开发。

3、项目最终还是大于4M了，怎么办？想法就是把资源独立出来放到自己的服务器。在白鹭社区查看了好些文章，经过调试修改最终实现了，不过这是在http下实现的，没有做https，估计没多大差别吧。（本人水平低，没了解过https）

简单放几句代码你们看到就知道了，大神路过还知道什么办法麻烦告知：

RES.loadConfig("http://192.168.0.132:8383/resource/default.res.json", "http://192.168.0.132:8383/resource/");

上图是default.json里面resource下的的代码。然后对比项目里的代码你就知道怎么做了。

4、分享打开小游戏：这个不算问题，纯粹记录。小游戏API是有生命周期的，只要在onShow里面拿到分享的参数就可以了。分享API是可以带参数的。

5、偶然做了一个小游戏发现一个问题，在安卓中滑动不会闪，在IOS中滑动就一闪一闪的，看了社区，改了帧率为60就可以了，好像有人改了也不行，估计比较复杂，没遇到过就不知道了。

6、有时候我们会想将一个页面的布局按照某种方法分成若干块各独立成一对exml和Component，这时候需要在class文件的最后加上window["Card"] = Card;不知道是不是这么描述，有点忘了。

7、MovieClip序列帧动画，用白鹭提供的TextureMerger生成，具体看白鹭工具使用文档

let mcFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(RES.getRes("poster_json"), RES.getRes("poster_png"));
this.mc = new egret.MovieClip(mcFactory.generateMovieClipData("poster"));
this.addChild(this.mc);
this.mc.gotoAndPlay("move", -1);

8、我是想看龙骨动画怎么做的，一直没入门。另外的动画用tween也可以的。具体区别百度吧，白鹭社区应该也有。