Egret项目快速发布为微信小游戏——Nasus

很多新手都喜欢一个人完成项目，从项目的规划、搭建，到实施、debug、验收，一整套流程都是自己独立完成，对于提高自己的整体开发能力和自适应能力很有帮助，是一件很有成就感的事情。ok,不废话，下面开始介绍小白如何快速发布一个微信小游戏。

本文章使用的是以Egret官网示例demo的栗子。

提前准备工具

工具是非常重要的，当然，也是很简单的。。。

备用链接：http://www.wangpengli.cn/2018/06/28/egret_nasus/

• 引擎及编辑器（Egret Wing）：@ Egret Launcher @egret Wing
• 微信web开发者工具下载：@微信web开发者工具
• https://developers.weixin.qq.com/minigame/dev/devtools/download.html?scene=21#wechat_redirect
• 电脑（买不起MAC）：win10
• Js（或者别的本地服务器，线上服务器也可以）
  

项目分析列表

在这个例子中,我们只分析小游戏调试时的步骤：Egret项目快速发布为微信小游戏，并且可以在本地调试，加载资源为服务器。

本教程原因

详细请查看文档http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/usingcache/index.html

首先，微信小游戏分为“游戏包”和“本地缓存”两个存储空间，当开发者将微信小游戏在微信开发者工具中发布时，微信开发者工具会将所有微信工程中的源码和资源进行压缩打包，既“游戏包”，该包体积不能超过4M，这就很蛋疼，我们的游戏很好玩，只有4M连一半图片都不够存放，资源优化又不会做，只有靠删除素材资源才能维持代码运行这样子。

但是，前段时间白鹭引擎已经提供了动态加载机制，将游戏资源放置在一个外部CDN服务器上。这样就可以适当的解决体积不超过4M的这个问题了，不过，今天我们只是教大家如何在本地测试，所以没有购买服务器的小伙伴也不需要担心了，接下来开始实际操作

STEP1：新建一个项目 注意：项目名称不可用使用大写字母(wxgamedemo)

STEP2:在浏览器中运行

STEP3：在Launcher 中发布为微信小游戏

但是有的小伙伴到这一步就出现报错的问题了，如下图

出现这种情况也别担心，我们直接打开微信开发者工具（大家需提前下载好微信开发工具），扫码登录

点击小游戏后可以不用AppID然后选择项目目录（此处为打包发布为微信小游戏后的文件夹）

确定

第一步就报错了，不支持showAll适配模式，推荐我们使用缩放模式为fixedwidth，

这里是因为我们最开始新建项目的时候缩放默认模式为showAll我们没有进行修改，在项目根目录下index.html中按下图修改即可

接下来我们顺便修改一下egretProperties.json中需要注意的点，将current 本来的web改为wxgame，然后在命令行中执行egret publish –-target wxgame重新编译一下项目 如下图

此处我们的微信开发者工具会自动进行刷新，进行预览，如果我们的资源没有超过4M的话就会出现二维码了。微信扫描二维码就可以在手机上预览调试自己的项目了

但是有的小伙伴项目，资源超过4M。就不会生成二维码而是会提醒如下

这时候我们按照官方文档（http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/usingcache/index.html

）进行修改代码，然后进行编译，又报错了，别着急，我们仔细看看错误，原来刚刚修改的代码是添加了一个插件，现在又找不到了，噢，我们好像没有引入这个插件

那我们引一下吧，如下图

到了这一步，我们的项目中加载的资源还是在从文件中加载的，并没有解决实际问题，别急，我们这一步要做的就是把资源放在服务器上，按照url的方式去加载

接下来按照我的思路一步一步来

先修改加载的url为http://127.0.0.1:8080/resource（如果有线上服务器的填自己的url）

打开项目的目录，查看是否有如图三个文件夹，如果不正确的话，请重头往下再阅读一遍文档

我们切到微信开发者界面看到应该是和我效果一样的黑屏

我们接下来要做的就是打开第三个项目文件夹 ，名称为项目名_wxgame_remote中，架设一台端口为 8080 的本地服务器 ，我这里是使用的node.js服务器，一个文件几行代码就跑起来了，大家也可以使用其他的本地服务器，不过服务器的根目录一定得设置为这个目录哦，然后我们再看看效果（线上服务器需使用FTP等工具将resource文件夹上传到服务器）

我们再编译一下，发现可以了（我这里换了张图片），我们看看打印的数据，图片加载的资源确实是从服务器上加载的，到这里还没有完哦，因为本地资源还在我们的项目内，我们需要把本地的资源从文件夹中把它给删除掉，按下图快速打开文件夹，顺便看看最后一个选项不检查https证书校验是否勾选

选择 项目名_wxgame文件夹将resource文件夹下的图片直接删除

我们再重新编译一下，预览二维码就可以了

时间匆忙，版式有点勉强，大家凑合着看，能解决问题就好啦。

666666666666666，感情大神的分享！！！

你好你能发一下你server.js 文件的内容吗？

huxiaolan 发表于 2018-7-25 18:27
你好你能发一下你server.js 文件的内容吗？

[mw_shl_code=javascript,true]const PORT = 8888; //访问端口号8888   //端口号最好为6000以上
var http = require('http'); //引入http模块
var fs = require('fs'); //引入fs模块
var url = require('url');//引入url模块
var path = require('path');//引入path模块


// req : 从浏览器带来的请求信息
// res : 从服务器返回给浏览器的信息
var server = http.createServer(function(req,res){
    var pathname = url.parse(req.url).pathname;;
     //客户端输入的url，例如如果输入localhost:8888/index.html，那么这里的url == /index.html
     //url.parse()方法将一个URL字符串转换成对象并返回，通过pathname来访问此url的地址。

    var realPath = path.join('C:/...本地路径',pathname);
    //完整的url路径
    console.log(realPath);  


    fs.readFile(realPath,function(err,data){
        /*
        realPath为文件路径
        第二个参数为回调函数
            回调函数的一参为读取错误返回的信息，返回空就没有错误
            二参为读取成功返回的文本内容
        */
        if(err){
            //未找到文件
            res.writeHead(404,{
                'content-type':'text/plain'
            });
            res.write('404,页面不在');
            res.end();
        }else{
            //成功读取文件
            res.writeHead(200,{
                'content-type':'text/html;charset="utf-8'
            });
            res.write(data);
            res.end();
        }
    })
});
server.listen(PORT); //监听端口
console.log('服务成功开启')[/mw_shl_code]

Nasus 发表于 2018-7-25 18:30
[mw_shl_code=javascript,true]const PORT = 8888; //访问端口号8888   //端口号最好为6000以上
var http ...

作为一个纯前端，研究了一两天，最后用xmapp搞出来了，楼主，以后多照顾下只会前端的童鞋罗，谢谢，哈哈哈

文字 发表于 2018-7-26 17:55
作为一个纯前端，研究了一两天，最后用xmapp搞出来了，楼主，以后多照顾下只会前端的童鞋罗，谢谢，哈 ...

额。。 你百度一搜node.js本地服务器代码一大堆啊

大神，wx.getUserCloudStorage()获取的数据可以在主域用吗？

Nasus 发表于 2018-7-26 21:07
额。。 你百度一搜node.js本地服务器代码一大堆啊

开始发布 wxgame 版本：
{ Error: ENOENT: no such file or directory, open 'E:\egret_workSpace\WXgame_project\yinding20180718_wxgame\game.js'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.readFileSync (fs.js:508:33)
    at WxgamePlugin.<anonymous> (E:\egret_workSpace\WXgame_project\yinding20180718\scripts\wxgame\wxgame.ts:90:36)
    at step (E:\egret_workSpace\WXgame_project\yinding20180718\scripts\wxgame\wxgame.ts:32:23)
    at Object.next (E:\egret_workSpace\WXgame_project\yinding20180718\scripts\wxgame\wxgame.ts:13:53)
    at E:\egret_workSpace\WXgame_project\yinding20180718\scripts\wxgame\wxgame.ts:7:71
    at __awaiter (E:\egret_workSpace\WXgame_project\yinding20180718\scripts\wxgame\wxgame.ts:3:12)
    at WxgamePlugin.onFinish (E:\egret_workSpace\WXgame_project\yinding20180718\scripts\wxgame\wxgame.ts:86:16)
    at r.<anonymous> (C:\Users\Administrator\AppData\Roaming\Egret\engine\5.2.2\tools\lib\resourcemanager\index.js:4362:39)
    at r (C:\Users\Administrator\AppData\Roaming\Egret\engine\5.2.2\tools\lib\resourcemanager\index.js:4455:27)
    at Object.next (C:\Users\Administrator\AppData\Roaming\Egret\engine\5.2.2\tools\lib\resourcemanager\index.js:4408:28)
    at C:\Users\Administrator\AppData\Roaming\Egret\engine\5.2.2\tools\lib\resourcemanager\index.js:4403:45
    at s (C:\Users\Administrator\AppData\Roaming\Egret\engine\5.2.2\tools\lib\resourcemanager\index.js:4383:20)
    at r.d [as _flush] (C:\Users\Administrator\AppData\Roaming\Egret\engine\5.2.2\tools\lib\resourcemanager\index.js:4336:24)
    at r.<anonymous> (C:\Users\Administrator\AppData\Roaming\Egret\engine\5.2.2\tools\lib\resourcemanager\index.js:3851:57)
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'E:\\egret_workSpace\\WXgame_project\\yinding20180718_wxgame\\game.js' }

大神，发布的时候，报这个是什么原因导致勒？？

哈森森 发表于 2018-7-31 16:12
开始发布 wxgame 版本：
{ Error: ENOENT: no such file or directory, open 'E:\egret_workSpace\WXgame ...

重新执行egret build 命令 ，game.js没找到，重启项目，清除缓存，重新编译发布

Nasus 发表于 2018-7-31 16:36
重新执行egret build 命令 ，game.js没找到，重启项目，清除缓存，重新编译发布 ...

大神，不行勒。怎么重启，清理都不得行。

是什么原因会引起，game.js丢失勒？？