老项目转微信小游戏

前言:最近把之前的一个h5的eui项目转成了微信小游戏，项目版本转之前已升级到能升级的最新5.0.15引擎版本（老项目升级到5.0.15相对简单，可以先升级到这个版本再参考这个贴子）*我们项目相对比较大，h5版本正常发布总文件有45MB左右（图片代码都有压缩过），并且使用到了一些第三方库文件如：jszip、greensock、protobuf等,官方库用了：egret、eui、res、tween、game、socket、dragonBones、promise

首先官方是有比较完整的老版本升级微信小游戏的文档的，但实际操作中可能还是会遇到一些问题，这个贴子就是针对这些问题给大家提供一定参考的。
官方教程文档地址：http://developer.egret.com/cn/gi ... igameFAQ/index.html
反复研读这里面几篇文档来修改能解决大多数问题。
接着我们可以开始尝试动手下了，我列个大概操作流程，在流程中标出出现的问题和解决方案：
*下载最新的小游戏开发工具:web微信开发者工具
*下载下引擎最新版本5.2.4，注意一定是5.2.4或更新的版本，因为之前的版本在发布微信小游戏时，还会有些或多或少的问题和bug，我们就不必要在这些已解决的bug上浪费时间了。
*用白鹭的引擎工具：Egret Launcher 在项目中新建一个eui项目，引擎版本5.2.4选上之前项目用到的库和参数
*把老项目的代码和资源文件等拷贝到刚创建的新项目中，主要包括src、resource、第三方库文件等  如果项目中有其它必要资源，也可根据情况拷贝过来
*如果你项目中之前有把ui皮肤文件.exml文件放在src的目录中(以前的版本是允许的)，建议拷贝到resource目录中去，再批量修改掉default.thm.json中这些皮肤文件的目录。
*根据需要把egretProperties.json文件改对，之前用的res模块的，直接改使用成assetsmanager模块，因为res在微信小游戏中会引起问题。把自己用的第三方库配置进来，如：
{
        "name": "jszip",
        "path": "../WXEgretKU/jszip"
}

*修改第三方库文件,因为第三方库文件要发布微信小游戏，是要做一定修改的，可以考虑把库文件拷贝一份，再参考这个贴子来改下（这将为你节约大量时间）：
http://bbs.egret.com/forum.php?mod=viewthread&tid=46130
如果在按这个贴子中处理第三方库后，还有因为用了微信不能用的api报错，如果不影响功能可以考虑直接干掉库中这块的代码。
*这里要说下，如果你有用protobuf库，或了protobuf.load('xxx.proto')这种方式，在小游戏这边是会报错的，你要改用protobufjs，参考：https://github.com/WanderWang/protobuf-egret  如果你的.proto文件按上面操作生成的protobuf-bundles.d.ts文件异常，你可以检测下，你的.proto文件是否是放在一个包中，也就是有没有代码：package xxx这个一定要有。还有如果你在.proto文件中有"_"加小写字母的命名定义，用protobufjs时会被生成大写的字母，如：_x -> X 如果这个会引起项目中的问题，只能是考虑改.proto文件命名或改项目代码了，貌似没其它什么好的办法。
*自己定义的组件和模块等在微信小游戏中会因为访问不到而报错，所以需要批量修改下项目中的TS代码，在ts文件底部加入类似：window["vm"]["MainView"] = vm.MainView;代码，"vm"是ts定义的模块名，"MainView"是ts类名，建议写个脚本来处理，我会把自己写的小工具整理加到附件中供参考，这时你还会遇到一个问题，就是小游戏中,当你访问vm模块时也会因为没有这个模块报错，你可以在项目wxgame.ts文件onFile方法中加入content += ';window.vm = {};'; 建议可以直接加在本来就有的：content += `;window.egret = egret;`;这句代码下面,如果有多个就加入多个
*如果你想要默认webGL渲染，你也可以在wxgame.ts中onFinish方法，optionStr中加入：`renderMode: "webgl",\n\t\t` +  不然默认是canvas渲染会有点卡！
*Egret Launcher工具，在项目中选择导出微信小游戏。AppID要去微信平台注册好，或者用开发工具的无id试用功能，在<微信web微信开发者>工具打开导出项目。这之后导出微信小游戏版本，可以执行命令：egret publish --target wxgame  导出发布版本，这样的代码包是最小的。
这块导出和管理微信小游戏项目可以参考这个贴：http://bbs.egret.com/thread-49354-1-1.html
*这里注意，要分清楚代码包和资源包的概念，代码包要求4MB，总包50MB，资源包可以传到服务器上，小游戏内只留代码包。
*如果你用egret publish --target wxgame （发布版本）命令导出的微信版本，代码包还是超过了4MB，但在8MB内的话，可以用分包方案解决问题，参考：https://mp.weixin.qq.com/s/9vg2cA1L-_eY2lTdbTSVeQ  如果8MB还不够怎么办？那可能是你项目中的皮肤文件发布的default.thm.js文件过大，可以考虑用commonjs2模式把皮肤文件生成gameEui.json,放到资源包中加载使用，方法是：修改config.wxgame.ts对应代码为：new ExmlPlugin('commonjs2')。这样应该肯定可以控制在8MB内了，要还不行就只能自己想办法优化了，分包时注意，微信现在分多个包会报错，所以只支持分一个包，还有分一个包，当前小游戏版本在苹果手机上测试也会报错:error: module "stage1/game.js" is not defined Stack:require ，微信官方给的回复是正式上线不会有问题，审核不会有问题，只是开发时在微信上调试有的问题。我们测试过也确实是这样，所以做过分包的开发阶段只能用安卓机测试了。*有的项目，会在老版本的index.html文件中写入一定代码逻辑，而小游戏项目可以把index.html的代码逻辑，写在小游戏项目中的game.js文件中，但不能写在太靠前，可能会window为空
*如果在微信提供的加载界面到能显示自己的登录界面之间，可能因为要加载第一个登录界面资源和eui皮肤文件：gameEui.json等，出现一段时间的黑屏，解决方案感觉有几种，如果是小点的项目，可以把到显示到第一个界面前用到的所有用到的所有资源和代码，放在小游戏的代码包上传，如果稍大的项目这样做会造成代码包超过要求大小，可以在代码包里放一张loading图片上传，再在代码中把它全屏居中显示出来，图片，可以设计为640*1385宽高尺寸，上下可留一截过度到黑的渐变。当每个界面准备好可以显示时，去掉移除这张图。当然还有很多种方式，自己写个简易的loading画面，或者放个简易的加载动画。
*小游戏中iphoneX适配(h5也可以这么处理)，提供个简单快捷的实现方式，方式就是把main（或在main上在放个Group,控制Group也行）的显示上面和下面，各留出来一截用来规避iphoneX的留海空间和底部按钮区域，再在main下面垫一张可以重复铺开的小图（这样空出来的空间也不是黑的美观些）。
我的scalemode是fixedWidth模式
1.识别iphoneX(小游戏)，wx是小游戏的sdk,Global.ts只是用来储存下数据，自己改下：
var sysdata = wx.getSystemInfoSync();
if(sysdata.model == "iPhone X" || (sysdata.windowHeight == 812 && sysdata.windowWidth == 375)){
          Global.isIphoneX = true;
}
在h5中识别iphoneX可以判断window.screen.width == 375 && window.screen.height == 812  并且是苹果设备
2.让main在iphoneX的显示是上面和下面各留一截,在Main.ts中
在Global.ts中
public static iphoneX_spnum = 60;//iphone上下预留距离
public static initStageWidth:number = 640;设置的游戏宽度
public static isIphoneX = false;

在Main.ts中
protected createChildren(): void {
        super.createChildren();

var self = this;
self.stage.addEventListener(egret.Event.RESIZE,self.resizefun,self);
self.resizefun();

}

private resizefun(): void {
        var self = this;
        Global.stageWidth = self.stage.stageWidth;
        Global.stageHeight = self.stage.stageHeight;
        if(Global.isIphoneX){
            self.includeInLayout  = false;
            var boundingHeight = egret.Capabilities.boundingClientHeight;
            var boundingWidth = egret.Capabilities.boundingClientWidth;
            var lvnum = boundingHeight/boundingWidth;
            var mnum = Global.iphoneX_spnum;
            var mH = Math.floor(lvnum*Global.initStageWidth) - (mnum*2);
            self.y = mnum;
            self.height = mH;
            self.maxHeight = mH;
            Global.stageHeight = mH;
        }
        self.showbgimg(false);
    }

3.底部垫一张图，对上面和下面留出的一截黑色美化下，sdfwerwe是准备的平铺的小的图：
在Main.ts中加入
private _rootbgimg;
private showbgimg(iscreat):void{
        if(Global.isIphoneX){
            if(!iscreat&&!this._rootbgimg){return;}
            var _bgimg;
            if(!this._rootbgimg){
                _bgimg = new eui.Image();
                _bgimg.source = "sdfwerwe";
                _bgimg.fillMode = egret.BitmapFillMode.REPEAT;
                this.stage.addChildAt(_bgimg,0);
                this._rootbgimg = _bgimg;
                _bgimg.left = 0;
                _bgimg.right = 0;
                _bgimg.top = 0;
                _bgimg.bottom = 0;
            }else{
                _bgimg = this._rootbgimg;
            }
            var boundingHeight = egret.Capabilities.boundingClientHeight;
            var boundingWidth = egret.Capabilities.boundingClientWidth;
            var lvnum = boundingHeight/boundingWidth;
            var mH = Math.floor(lvnum*Global.initStageWidth);
            _bgimg.width = Global.initStageWidth;
            _bgimg.height = mH;
        }
    }

在sdfwerwe图片加载完成后调用self.showbgimg(true);

如果有遇到小游戏加载资源卡死问题，一是通过输出和查看网络加载查找问题，如果发现在加载fnt文件后卡住，是因为美术字这个造成卡住的话，因为要把美术字用到的.png和.fnt文件都要注册到：default.res.json文件中，你直接拖只能拖.fnt进去，也就是还要打开default.res.json把美术字的.png文件手动填进去。之前我也遇到过卡资源，但发现总是在加载完美术字卡住，就问了下官方，他们告诉我的解决办法，测试可用，不过这问题官方后续引擎版本可能会修复。

附件中就是批量给ts文件加入特定声明代码的工具，是在window运行的bat脚本,自己可以根据项目实际情况做修改，用上了nodejs，如果运行不了自己装下nodejs环境，游戏中需要大量执行的操作，我基本都会写相应的脚本或工具来执行，这个也可以给大家一个参考，在其它的操作时也可以写点这种小脚本来处理，可以很好的节省时间和出错概率。

我只是简要的说了一些流程，但在转换过程中，其实可能还会遇到代码层的很多细节问题造成卡住，因为思路和具体实现之前多少有些不同，如果大家有遇到什么问题也可以留言一起探讨。

谢谢大佬，拿走了

收藏一波

确实不少干货

学习一下

mark一下

66666666 mark

保存

收藏保存了

收藏保存了