微信小游戏的环境搭建
笔记内容:微信小游戏的环境搭建 笔记日期: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代码,官网地址如下:
安装babel前我们需要先安装node,然后通过npm来安装babel:
我这里下载的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目录。
- Silverlight button 图片切换样式
- 【腾讯云CDB】教你玩转MyRocks/RocksDB—STATISTICS与后台线程篇
- Caliburn.Micro学习笔记(一)----引导类和命名匹配规则
- SpringMVC下Excel文件的上传下载
- Spring-AOP之aspectj注解方式
- wpf键盘记录器
- WPF之TreeList的实现方法(一)
- Silverlight 2 Beta 2的Isolated Storage
- hive安装部署
- java匿名内部类简介
- 精典算法之详解 河内之塔
- 精典算法之二分查找法
- 指针数组和数组指针
- 用sp_change_users_login消除Sql Server的孤立用户
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【STM32H7】第9章 RL-TCPnet调试方法(Event Recorder和串口两种)
- 【STM32F429】第9章 RL-TCPnet调试方法(Event Recorder和串口两种)
- 【STM32F407】第9章 RL-TCPnet V7.X调试方法(Event Recorder和串口两种)
- CentOS7的udev的绑定规则
- 案例:记录一则强制开库遭遇ORA-16433的处理过程
- mybatis升级为mybatis-plus踩到的坑
- Treepath
- linux 远程ssh免密登录
- npm 安装 electron taobao镜像 404错误 自用 实践笔记
- Asp.net Core 使用Jenkins + Dockor 实现持续集成、自动化部署(二):部署
- 队列的一种实现:循环队列
- StackExchange.Redis .net core Timeout performing 超时问题
- G1 垃圾回收器简单调优
- Docker安装官方Redis镜像并启用密码认证 实践笔记
- Asp.net Core 使用Jenkins + Dockor 实现持续集成、自动化部署(四):发布与回滚