文档章节

深入理解使用白鹭引擎开发微信小游戏的构建机制

白鹭科技
 白鹭科技
发布于 01/11 11:46
字数 2070
阅读 829
收藏 6

微信小游戏一经推出就受到了诸多开发者的极大关注,白鹭引擎也在第一时间推出了微信小游戏的适配方案。

在这一周中白鹭引擎团队帮助许多开发者成功将现有的HTML5游戏转换为了微信小游戏,但仍有开发者遇到了一些开发问题,我们已经在上周整理发布了《使用白鹭引擎开发微信小游戏的 FAQ》以供开发者参考。这周我们来深入了解一下白鹭引擎构建微信小游戏的构建机制,开发者通过阅读这篇文章,除了更深入了解到白鹭引擎的构建机制之外,还可以掌握使用白鹭引擎开发微信小游戏的调试技巧与团队协作的最佳实践。

白鹭引擎运行时的核心架构

白鹭引擎运行时的核心架构如下:


通过这张图,我们可以了解到,您使用白鹭引擎开发的游戏,只要按照白鹭引擎提供的技术标准进行开发,就可以快速将游戏发布到微信小游戏平台,从而尽可能少的需要了解微信小游戏的底层技术细节。

在最新版本的白鹭引擎启动器 Egret Launcher 中,您可以将一个项目发布为微信小游戏。当您执行这步操作,或者是在命令行中执行 egret target 命令之后,您会发现在您的白鹭项目文件夹平级会生成一个后缀为 _wxgame的文件夹,如下所示:

  root
    |-- your_project
            |-- src
            |-- libs
            |-- resource
            |-- scripts
                    |-- config.ts
            |-- egretProperties.json
    |-- your_project_wxgame
            |-- game.js
            |-- game.json
            |-- project.config.json

通过这个项目结构,您可以清晰的了解到白鹭引擎将项目发布为微信小游戏的基本架构,所有与游戏相关的逻辑,均会在您的项目 your_project中进行编写,与微信小游戏相关的部分,则被放置在与其平级的文件夹中。

当您执行白鹭引擎的构建命令 egret build --target wxgame 后,游戏的全部代码与资源会从游戏项目拷贝到微信小游戏项目中,然后您就可以使用微信开发者工具打开 your_project_wxgame 文件夹进行预览,或者直接使用 egret run --target wxgame 命令自动呼起微信开发者工具。

白鹭引擎的构建原理

接下来再向各位开发者介绍,执行 egret build --target wxgame 时,白鹭引擎内部到底做了什么?

当这个命令执行之后,白鹭引擎会首先运行至 scripts/config.ts,我们检查一下相关代码,可以找到这样的逻辑:

     if (target == 'wxgame') {
            const outputDir = `../${projectName}_wxgame`;
            return {
                outputDir,
                commands: [
                    new CompilePlugin({ libraryType: "release" }),
                    new ExmlPlugin('commonjs'), // 非 EUI 项目关闭此设置
                    new WxgamePlugin(),
                    new UglifyPlugin([{
                        sources: ["main.js"],
                        target: "main.min.js"
                    }
                    ]),
                    new ManifestPlugin({ output: 'manifest.js' })
                ]
            }
        }

从这段代码中,我们可以发现,如果开发者将发布目标设置为了 wxgame,就会将代码发布到项目的平级目录并添加 _wxgame 后缀,然后在发布过程中,会先后执行编译代码,编译 EXML 文件,执行微信小游戏定制插件,混淆代码,生成清单文件这几个步骤,其他步骤都很容易理解,我们主要看一下 WxgamePlugin 这个插件在内部做了什么

WxgamePlugin 的处理机制

通过检查代码我们可以发现,微信插件主要做了如下工作:
将 promise 库从构建管线中删除,这是因为由于微信小游戏已经完美支持了 Promise,所以无需引入这个库。
将 egret.js / eui.js 等库追加了 window.egret = egret; ,window.eui = eui等逻辑,这是为了解决微信的 require机制导致的所有代码均是局部变量的问题。如果开发者引入了一些自己的第三方库,也建议在这里将第三方库导出到全局对象中。

如何进行调试

目前白鹭引擎支持两种调试工作流,分别是:
(1)在浏览器中调试
通过在您的白鹭引擎项目中执行 egret build 与 egret run,您可以很方便的在 HTML5 环境中进行构建与调试,当您测试成功之后,可以执行 egret build --target wxgame命令将已经准备好的代码发布到微信开发者工具中。

这种方式的优点是,基于 HTML5 环境的调试采用 Chrome浏览器,非常方便和轻量,同时借助白鹭引擎的 Chrome 扩展 Egret Inspector,您可以更方便的对游戏项目的渲染进行有针对性的调试。

这种方式的缺点是,如果开发者必须在微信开发者工具调试(比如调试微信接口),就会调试起来很费劲,因为微信项目中的代码已经是白鹭引擎压缩混淆后的了,为了解决这个问题,开发者可以在 scripts/config.ts中把 UglifyPlugin插件去掉,这样生成的就是没有混淆的 main.js ,而不是混淆后的 main.min.js,进而可以在微信开发者工具中调试 js 代码。

(2)在微信开发者工具中调试

首先在 scripts/config.ts中把 UglifyPlugin去掉。然后通过egret run --target wxgame启动微信开发者工具,后续执行 egret build --target wxgame,微信开发者工具就会自动刷新并显示最新结果,并在微信开发者工具中进行调试。

这种方式的优点是,如果您只针对微信小游戏进行开发,就无需引入一套 HTML5 的环境,并且调试结果与最终发布到微信小游戏上的结果一致。

这种方式的缺点有两个缺点,首先是目前微信开发者工具暂不支持 Egret Inspector ,还有就是微信开发者工具相对比较重量级,大型项目构建后刷新会有一个较为明显的卡死过程。

后续规划

后续白鹭引擎会和微信团队配合,完善如下几个问题:
提升白鹭引擎编译器在微信开发者工具中的性能,改善构建大型项目后微信开发者工具会有较为明显的假死现象。
允许开发者直接在微信开发者工具中调试 TypeScript 代码。
在微信开发者工具中支持 Egret Inspector 。
通过这些改进,我们的最终目标是使得开发者在微信开发者工具中调试,就可以获得与 HTML5 开发完全一致的开发效率与调试体验。

团队协作工作流

在真实游戏开发过程中,开发者们往往是多人协同开发,而非单打独斗,这就涉及团队协作以及版本控制问题,我们建议开发者按照以下方式进行团队开发工作流:

使用 git 或 svn 进行版本控制。在白鹭项目中,将 bin-debug 文件夹添加到忽略列表。在微信项目中,将 js 文件夹与 resource 文件夹添加到忽略列表。
多数项目成员只打开并编辑白鹭项目,这些人无需了解微信小游戏的细节,只需针对 HTML5 环境开发和调试。
指定一名研发负责维护微信小游戏项目相关逻辑(比如微信接口)的开发、调试与产品发布。

这样做的优势是,团队成员可以各司其职,每人都专注到自己核心要解决的问题中。由于白鹭项目和微信项目分属于两个不同的文件夹,只针对白鹭项目开发的开发者甚至无需了解到微信小游戏的内容。

通过上述内容,我们希望开发者可以对白鹭引擎构建微信小游戏的机制有更深刻的了解,这将会帮助您更轻松的进行开发、以及定位错误的原因,引擎团队后续会进一步完善白鹭引擎对微信小游戏的支持。

© 著作权归作者所有

共有 人打赏支持
白鹭科技
粉丝 6
博文 13
码字总数 19815
作品 0
加载中

评论(3)

白鹭科技
白鹭科技

引用来自“BoXuan”的评论

我用白鹭开发了个斗地主
在已发布的小游戏中,已有斗地主
节节草
节节草
网络斗地主可以转换为小程序吗?
节节草
节节草
我用白鹭开发了个斗地主
微信小游戏教程(三) 新手教程

开发环境 Egret Launcher 1.0.32 以上版本(包括1.0.32) 白鹭引擎 5.1.2 以上版本(包括 5.1.2) 准备最新版的微信开发工具。下载地址:https://mp.weixin.qq.com/debug/wxagame/dev/devtoo...

u010392459
01/12
0
0
白鹭引擎推出 5.2.6 稳定版,集中性修复数个 BUG

白鹭引擎(Egret Engine)在 2018年5月25日发布了5.2 版本,历经持续更新优化,于7月31日正式发布5.2.6 稳定版本,本次版本是对 5.2版本的一次集中性缺陷修复。在此,我们要再次特别感谢开发...

白鹭科技
07/31
0
0
白鹭引擎 5.1.11 发布,集中修复数个 Bug

白鹭引擎5.1.11版本将于5月7日上线,本次版本的推出是对去年12月份发布的5.1版引擎的一次集中性缺陷修复。同时我们要再一次感谢多位开发者通过Egret社区等渠道提交的Bug反馈。5.1.11版本引擎...

白鹭科技
05/07
0
1
白鹭引擎 5.2.7 新增自动合图插件、二进制和声音缓存方案功能

2018年8月13日,白鹭引擎发布5.2.7 版本。本次版本主要新增了两大功能:命令行增加自动合图插件TextureMergerPlugin,微信小游戏支持库增加二进制和声音缓存方案。 同时,本次版本还是对 5....

白鹭科技
08/13
0
0
Cocos深度解析: 开发者应如何快速上手微信小游戏?| 小游戏独家专题 (上篇)

作者 | 凌华彬、王哲 责编 | 徐威龙 作者简介: 凌华彬,Cocos Creator 主程、Game Jamer、玩家,曾负责 Cocos2d-JS、热更新框架、JSB 框架,现在主要在负责小游戏发布流程、Cocos Creator 引...

造程序
01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
26分钟前
0
0
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
45分钟前
0
0
c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
4
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
2
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部