微信小游戏的环境搭建

笔记内容:微信小游戏的环境搭建
笔记日期:2018-02-01


下载官方工具

首先需要去微信公众平台下载官方的开发工具,官网的下载地址:

https://mp.weixin.qq.com/debug/wxagame/dev/devtools/devtools.html

下载开发工具:

下载完成后就安照提示,一步步安装就可以了,安装很简单这里就不赘述了。

然后最好有一个编码体验更友好的IDE,比如WebStorm、HBuild、Sublime等,我们这里用的是WebStorm。官方的开发工具很很很难用,所以我们一般只用于调试,不用于编码。

下载好后,我们先来创建一个小游戏的模板项目:

我这里选择的是无Appid:

然后选择一个项目目录进行创建:

可以看到会创建一个小游戏的模板:

如果你不要这个模板,就在创建时项目时不勾选那个选项即可。



然后在WebStorm中打开这个小游戏工程:

如上,可以看到,WebStorm不认识这些代码,所以报语法错误,这是因为WebStorm默认的js代码是ES5的标准,而这里的js代码是ES6的,所以我们需要设置js代码为ES6的标准,打开setting界面进行设置:

保存设置后就不报错了:

但是这时候WebStorm会提示,是否让文件监视器使用babel将ES6格式的代码转换为ES5:

所以我们还需要安装node和babel等前端工具链。

babel是js的编译器,能帮我们把ES5的代码编译成ES6标准的js代码,官网地址如下:

https://babeljs.io/

安装babel前我们需要先安装node,然后通过npm来安装babel:

https://nodejs.org/zh-cn/

我这里下载的node是8.9.4 LTS版本的。

安装完node后,在cmd中使用npm安装babel,但是由于npm使用的源是国外的,下载起来比较慢,所以我们需要更换成淘宝的源:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装这个源后,就可以使用cnpm 命令来代替npm 命令,例如使用cnpm 来安装babel:

cnpm install -g --save-dev babel-cli babel-preset-env

安装完成之后回到WebStorm上,打开setting,把我们安装的babel配置进去:

会自动帮我们找到babel.cmd文件的位置,所以我们点击ok即可

如果配置完后,报以下错误:

Error: Couldn‘t find preset "env" relative to directory "."

就在WebStorm的终端里执行以下这句命令:

cnpm i babel-preset-env --save-dev

然后这时工程目录就会多出一个dist目录,而里面的js文件就是转译后的ES5标准的js代码:

如果使用以上方式还是不行,依旧报错的话,则不使用全局的babel,而是在项目中安装babel,同样的也是打开WebStorm的终端,然后在里面执行以下的安装命令:

cnpm install --save-dev babel-cli babel-preset-env

安装完之后重新配置babel.cmd所在的路径:

并在项目的根目录下创建一个.babelrc文件,我这里创建的是babel.babelrc,然后编辑内容如下:

{
  "presets": [
    "env"
  ]
}

成功的情况下,也是会多出一个dist目录。

原文地址:http://blog.51cto.com/zero01/2069915

时间: 2024-10-01 22:02:02

微信小游戏的环境搭建的相关文章

微信小程序开发环境搭建

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 微信已于9月23号晚发布了最新开发工具,以及官方文档,新版开发工具支持无appid登录开发者工

【开发记录】微信小游戏开发入门——俄罗斯方块

叨叨 我在前一阵子,打算做一个微信小游戏,当然是单机的,只是为了了解小游戏开发的过程,最终选择了俄罗斯方块这一经典小游戏作为demo,源代码已托管值github,当然,这个游戏demo对用不并不友好,但是已经可以让我入门小程序开发了XD. demo地址:https://github.com/nbclw/Laya_Brick 准备 在任何开发前都需要对要开发的东西有一定的了解.准备: 小游戏原理:微信小游戏是属于H5游戏的一种吧,我是这样理解的:在H5中,有一个叫Canvas(画布)的存在,与电脑

微信小游戏入门与实战 引爆朋友圈

第1章 准备工作(需要ES5,ES6基础)学员作品演示:https://pan.baidu.com/s/1gEMWzujg72soj0cEUOtJ2A 密码:uy2n,本章首先介绍课程目标,学习收获等,然后通过与APP.小程序的对比,让大家知道什么是微信小游戏以及微信小游戏前景如何,有哪些特点,然后带大家搭建微信小游戏的开发环境和调试环境,之后会对微信小游戏开发前注意事项与准备工作进行讲解,目...1-1 课程导学1-2 小游戏官方开发工具快速体验1-3 小游戏开发测试环境搭建和工具链使用1-4

使用Laya引擎开发微信小游戏(上)

本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现了越来越多的以小游戏作为载体运营的活动类型,比如游戏预约,抢先试完等等,都收到了非常良好的效果. 在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一下

微信小游戏入门与实战 刷爆朋友圈

第1章 课程介绍与准备工作本章首先介绍课程目标,学习收获等,然后通过与APP.小程序的对比,让大家知道什么是微信小游戏以及微信小游戏前景如何,有哪些特点,然后带大家搭建微信小游戏的开发环境和调试环境,之后会对微信小游戏开发前注意事项与准备工作进行讲解,目的是为了让大家在开发微信小游戏的时候可以跳过不必要遇到的坑,为后面的小游戏... 第2章 微信小游戏开发原理与JS面向对象初步填坑本章会带大家快速创建第一个微信小游戏项目,并跑起来,让大家快速的体验和熟悉小游戏开发和运行的整体流程,之后会对微信小

TODO:小程序开发环境搭建

1.第一步当然是要先注册小程序了 2.登录到小程序 a)完善小程序信息,如名称,图标,描述 3.绑定开发者 4.获取AppID,并设置服务器信息 5.下载并安装开发者工具 a)使用管理员或者绑定到开发者微信号扫描登录,选择本地小程序项目 b)创建或打开项目,需要填写AppID.项目名称和本地开发目录.开发者工具左边是模拟器可模拟不同尺寸的手机,目前只可模拟iPhone和Android的机型,网络可模拟wifi,2g,3g,4g:右侧是调试工具,可编码,可调试,如果要选择界面上的元素需要切换到"W

.net开发 微信小游戏跳一跳辅助程序

一次巧合我看到了一篇关于微信小游戏跳一跳的辅助开发源码,链接:http://mp.weixin.qq.com/s/qGpoHNEf1A2AlofKFVdE2w 然后我试着下载下来跑一遍看能不能运行,显然是不能的,我总结了让能跑起来的几个步骤. 1.adb 环境变量配置 在网上下载 adb工具 1.0.32版本(比这个高或低的版本的可能连接不上),解压到某个文件夹下: 右击计算机——属性——高级系统设置——环境变量: 弹出”环境变量“对话框,单击”新建“一个环境变量. 在新建系统变量里,配置变量名

CocosCreator如何制作OA信用盘源码下载微信小游戏

CocosCreator在1.8版本开始,就支持一键发布微信小程序,下面是详细的发布步骤:1.在微信公众平台下载微信开发者工具;OA信用盘源码下载 地址:haozi-bbs.com 2.打开cocoscreator,选择Cocos Creator --> 偏好设置 --> 原生开发环境,配置WechatGame程序路径,点击保存并关闭. 3.在cocoscreator中点击项目-->构建发布看到下面的界面:游戏名称根据需要自己写入,发布平台悬着Wechat Game,appid可以暂时不

提取微信小游戏代码

微信小游戏会 打包成 .wxapkg 文件. 前提 root后的android手机,安装 re文件管理器 微信. 安装好nodejs环境的电脑 步骤 使用 root后的android手机 打开微信小游戏,记录下当时的时间. 然后使用 re文件管理器 到 /data/data/com.tencent.mm/MicroMsg/ 这个目录, 记为目录 A. 目录 A 下可能有多个 32位字符串的文件夹,依次打开,找到包含 appbrand 文件夹的那个目录,记为目录B. 如:/data/data/co