前言
本文主要記錄用Egret開發(fā)微信小游戲過程中碰到的一些問題及文檔中沒有提到的一些需要注意的事項眼溶。如果是初學者丑蛤，想要學習如何用Egret開發(fā)微信小游戲留攒，請?zhí)D(zhuǎn)到官方文檔進行查閱辕宏。
選擇框架的原因
目前開發(fā)微信小游戲的主要框架有：Egret Laya Cocos辑舷。去年過年前白魂，接到了個項目汽纤，開發(fā)一款小游戲。由于之前未開發(fā)過游戲且項目時間緊福荸，于是為了快速完成開發(fā)蕴坪，最終選擇了Egret作為該小游戲的開發(fā)框架。
之所以選擇框架逞姿，而不是用原生的js寫辞嗡。主要有那么幾個點（沒列完）：
1、原生的js寫小游戲?qū)嵲陔y度過大滞造；
2续室、布局及適配問題，比如一個實現(xiàn)一個帶背景色的文本框谒养，讓文本居中對齊挺狰，換行、滾動列表等买窟；
3丰泊、點擊事件問題，小游戲中原生判斷是通過判斷觸摸點的位置...（想象一下cancas上一堆元素始绍，你要挨個判斷的時候）瞳购；
4、點擊事件捕獲亏推，例如加載一個半透明蒙版学赛，蒙版下的內(nèi)容不給點擊...
用到的庫
由于Egret年堆，它底下也分很多庫。所以盏浇，這里簡單說一下变丧。（初學的話，只看Egret Engine2D就可以了）
- 一般開發(fā)小游戲肯定用到了它的核心庫绢掰，也就是Egret Engine2D 痒蓬；
- 其次如果用到了列表、滾動列表等滴劲，那么需要用到EUI庫攻晒；
- 如果用到了動畫，那么就涉及Tween（這個最簡單）哑芹。
- 資源加載庫RES（這個不用學也可以）炎辨。
其中EUI庫中封裝了一些東西：
組件：像Label Image Button 等捕透。
布局類：像BasicLayout聪姿、TileLayout（多列布局時用到，常用于做圖鑒乙嘀、裝備格子之類的東西）末购。
新建項目
假設你已經(jīng)安裝好了Egret Wing和Egret Launcher這2個東西。那么下面新建一個項目試試看虎谢。
如下圖所示盟榴，你需要注意的地方主要有：
- 1、項目類型（這里其實你選游戲項目和EUI項目婴噩，都是一樣的）
- 2擎场、把egret核心庫 assetsmanager資源管理器 t ween緩動動畫庫 eui界面制作庫 game游戲庫都勾上即可。
- 3几莽、舞臺尺寸迅办，填375*667即可，也就是6s的默認尺寸（這個其實沒什么影響的章蚣。）
- 4站欺、縮放模式，這個可以點旁邊的纤垂？去具體查看詳情矾策，一般填noBorder就可以了（這個模式是等比例拉伸至最小的邊能顯示完全，不會存在黑邊峭沦。但作為背景贾虽，可能會一部分邊邊角角的圖片沒被顯示）。
-
5吼鱼、旋轉(zhuǎn)方式蓬豁，看你項目的了是豎屏還是橫屏了履磨。豎屏是portrait，橫屏是landscape庆尘，或者是橫豎屏都支持的話剃诅，就選auto。
image.png
所用語言
Egret使用的是TS開發(fā)（也就是TypeScript驶忌，但其實和用js差不多矛辕，沒什么值得注意的地方，這里不多講付魔。）
構(gòu)建聊品、調(diào)試、發(fā)布（發(fā)布為其他平臺的游戲）
進入到剛剛新建的界面几苍，主要是下方這樣翻屈。
由于默認創(chuàng)建的是WEB項目，所以此時妻坝，點擊 構(gòu)建 或者 調(diào)試的話伸眶，會彈出下面一個東西。
構(gòu)建和調(diào)試的區(qū)別：官方文檔中并沒有提到這一茬刽宪，所以我這邊也不知道它們之間有什么區(qū)別厘贼。
發(fā)布：發(fā)布為其他平臺的游戲，這里我們主要發(fā)布為微信小游戲圣拄，填appid和小游戲名稱即可嘴秸，這里的小游戲名稱是你用微信開發(fā)工具打開小游戲項目時里顯示的那個項目名字。
值得注意的是：
- 1庇谆、appid要在你填寫了游戲類目之后才有用岳掐。
- 2、每次發(fā)布都會覆蓋platform.js和openDataContext下的index.js文件饭耳，這2個串述，1個是和原生小游戲API交互的文件，1個是繪制排行榜的文件哥攘。所以剖煌，如果中途想要更換appid，編譯到其他小游戲賬號中時逝淹，記得先保存這2個文件８ⅰ（初次發(fā)布則沒有這個煩惱，因為默認就什么鬼東西都沒有）
然后點確定栅葡，Egret就會在你的項目目錄下茉兰，新建一個 EgretWxGame_wxgame的文件，把小游戲編譯到該目錄欣簇。
然后打開规脸，就可以在微信開發(fā)工具上預覽小游戲啦坯约。
這里還有個問題，就是在下方看到打印出js/egret.js和js/eui.js超過500K莫鸭。
這怎么能忍闹丐，小游戲的主要包就4M大小，egret2個庫就占用了1M多被因。所以卿拴，我們可以用Egret提供的命令去壓縮一下。
用命令行窗口梨与，進入到上面看到的EgretWxGame文件夾下（也就是你的項目的根目錄下）堕花，執(zhí)行以下代碼:
egret publish --target wxgame；
然后等再次編譯好粥鞋，就可以看到已經(jīng)沒有下方警告了缘挽。
修改配置
和微信小游戲原生API交互問題
Egret 框架和原生小游戲API交互，主要是通過platform.js進行的呻粹。
所以壕曼，日常開發(fā)的話是用Egret，然后編譯到微信小游戲尚猿，再通過微信開發(fā)工具來調(diào)試原生API窝稿。
在嘗試著進行兩者之間的交互前，我們先看下Egret項目中Platform.ts和微信小游戲項目中platform.js中2者的聯(lián)系凿掂。
可以看到流程是這樣的，在Platform.ts中的declare interface Platform中定義接口纹蝴，在 下方的DebugPlatform中也定義同樣的方法庄萎，然后在platform.js中實現(xiàn)該方法，這樣就實現(xiàn)了從2者之間的交互塘安。
下面來動手實現(xiàn)一次交互糠涛，通過點擊目前屏幕上的背景，傳遞參數(shù)name到platform.js中兼犯，在platform.js中輸出 hello + 參數(shù)name的值忍捡。
步驟如下：
1、在Main.ts中的createGameScene方法中加入如下語句：
sky.touchEnabled = true;
sky.addEventListener(egret.TouchEvent.TOUCH_TAP,this.clickMaskOnMain,this);
2切黔、實現(xiàn)clickMaskOnMain方法
private clickMaskOnMain(){
platform.clickMask('Egret');
}
3砸脊、在Platform.ts中定義如下接口和方法
4、在platform.js中實現(xiàn)該方法
clickMask(name){
console.log('hello ' + name);
}
然后構(gòu)建一下纬霞，點擊背景凌埂，可以看到控制臺有打印出，至此诗芜，交互這邊算是沒問題了瞳抓。
小結(jié)
篇幅過長了埃疫，所以就先到此結(jié)束。
本想寫一些值得注意的地方孩哑，沒想到還是寫成了教程類的文章栓霜。
