Egret社区
本帖最后由 Nasus 于 2018-9-7 09:53 编辑

很多新手都喜欢一个人完成项目,从项目的规划、搭建,到实施、debug、验收,一整套流程都是自己独立完成,对于提高自己的整体开发能力和自适应能力很有帮助,是一件很有成就感的事情。ok,不废话,下面开始介绍小白如何快速发布一个微信小游戏。
本文章使用的是以Egret官网示例demo的栗子。
提前准备工具
工具是非常重要的,当然,也是很简单的。。。
项目分析列表
在这个例子中,我们只分析小游戏调试时的步骤:Egret项目快速发布为微信小游戏,并且可以在本地调试,加载资源为服务器。
本教程原因
首先,微信小游戏分为“游戏包”和“本地缓存”两个存储空间,当开发者将微信小游戏在微信开发者工具中发布时,微信开发者工具会将所有微信工程中的源码和资源进行压缩打包,既“游戏包”,该包体积不能超过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。就不会生成二维码而是会提醒如下
)进行修改代码,然后进行编译,又报错了,别着急,我们仔细看看错误,原来刚刚修改的代码是添加了一个插件,现在又找不到了,噢,我们好像没有引入这个插件
那我们引一下吧,如下图
到了这一步,我们的项目中加载的资源还是在从文件中加载的,并没有解决实际问题,别急,我们这一步要做的就是把资源放在服务器上,按照url的方式去加载
接下来按照我的思路一步一步来
先修改加载的url为http://127.0.0.1:8080/resource(如果有线上服务器的填自己的url)
打开项目的目录,查看是否有如图三个文件夹,如果不正确的话,请重头往下再阅读一遍文档
我们切到微信开发者界面看到应该是和我效果一样的黑屏
我们接下来要做的就是打开第三个项目文件夹 ,名称为项目名_wxgame_remote中,架设一台端口为 8080 的本地服务器 ,我这里是使用的node.js服务器,一个文件几行代码就跑起来了,大家也可以使用其他的本地服务器,不过服务器的根目录一定得设置为这个目录哦,然后我们再看看效果(线上服务器需使用FTP等工具将resource文件夹上传到服务器)
我们再编译一下,发现可以了(我这里换了张图片),我们看看打印的数据,图片加载的资源确实是从服务器上加载的,到这里还没有完哦,因为本地资源还在我们的项目内,我们需要把本地的资源从文件夹中把它给删除掉,按下图快速打开文件夹,顺便看看最后一个选项不检查https证书校验是否勾选
选择 项目名_wxgame文件夹将resource文件夹下的图片直接删除
我们再重新编译一下,预览二维码就可以了
时间匆忙,版式有点勉强,大家凑合着看,能解决问题就好啦。

分享到 :
23 人收藏

35 个回复

倒序浏览
哈森森  圆转纯熟 | 2018-7-12 17:10:53
666666666666666,感情大神的分享!!!
huxiaolan  初学乍练 | 2018-7-25 18:27:21
你好你能发一下你server.js 文件的内容吗?
Nasus  初窥堂奥 | 2018-7-25 18:30:48
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]
文字  登堂入室 | 2018-7-26 17:55:09
Nasus 发表于 2018-7-25 18:30
[mw_shl_code=javascript,true]const PORT = 8888; //访问端口号8888   //端口号最好为6000以上
var http ...

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

额。。 你百度一搜node.js本地服务器代码一大堆啊
ivanmrt  初学乍练 | 2018-7-28 21:27:09
大神,wx.getUserCloudStorage()获取的数据可以在主域用吗?
哈森森  圆转纯熟 | 2018-7-31 16:12:07
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' }

大神,发布的时候,报这个是什么原因导致勒??
Nasus  初窥堂奥 | 2018-7-31 16:36:06
哈森森 发表于 2018-7-31 16:12
开始发布 wxgame 版本:
{ Error: ENOENT: no such file or directory, open 'E:\egret_workSpace\WXgame ...

重新执行egret build 命令 ,game.js没找到,重启项目,清除缓存,重新编译发布
哈森森  圆转纯熟 | 2018-8-1 11:17:15
Nasus 发表于 2018-7-31 16:36
重新执行egret build 命令 ,game.js没找到,重启项目,清除缓存,重新编译发布 ...

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

是什么原因会引起,game.js丢失勒??
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Nasus

初窥堂奥

积分: 689 帖子: 490 精华: 1

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部