为了账号安全,请及时绑定邮箱和手机立即绑定

微信小游戏个人开发环境思考与整合

2018.02.02 11:37 10462浏览

刚刚接触微信小游戏开发的同学,大抵会直接去使用微信官方退出的开发者工具,具体呢就是这里 微信开发者工具链接 。其实吧,之前写小程序的商城的时候,也使用过一段时间这个工具,后来索性转投WebStorm安装了各种插件和调整了后缀名的识别,写起来反倒比自带的工具舒适。
  不过这里不妨来做个知识的扩展,不知道大家有没有使用过著名编辑器Atom,或者微软的编辑器Visual Studio Code,不过这俩是同一个技术框架演变出来的,那就是Electron,大家可以去看看官网 Electron | 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。
也就是说,这俩编辑器其实就是个浏览器,然后呢,里面所有的文字界面等等的一切元素都是DOM,咱来看个截图
图片描述

没有错,这就是个浏览器,基于chromium的Web技术。看到这里其实很多用了小程序开发者工具的同学也就知道了,其实丫的那也是个浏览器……并且是体验很差的那种……,当然啦,微信官方开发者工具使用的是nw.js这种类似的技术,大家可以去看看https://nwjs.io/。WebStorm有非常强的代码补全能力,还能查看每个JS方法的参数和使用,并且可以帮你检查很多不规范的写法,比如哪些变量命名不规范啦,哪些写法会有潜在的问题啦之类的,总之真的是前端神器。
说到开发环境的话,小游戏使用的可是纯纯的JavaScript哦,并且是先进的ES6,并没有小程序那些自定义的语法,也就是说,我们可以无痛的在WebStorm上书写,只要大家用WebStorm打开小游戏官方开发者工具创建的项目就行啦,写完了再在工具上编译和跑起来,上传和预览就行。
说到ES6,我们不得不提一个工具叫做babel,这个是地址http://babeljs.io/
它是一个很方便的JS编译工具,大家通过npm安装,然后WebStorm上进行自动的配置,就能一遍写ES6一遍看到转译后的ES5代码了,并且是安装JavaScript最佳实践转译的。配置参照图片
图片描述

哦顺带一提,如果国内觉得npm慢的话,试试阿里巴巴的cnpm,是npm的绝佳替代品,http://npm.taobao.org/
这里有个非常非常重要的两点要说明,在浏览器调试的时候ES6语法和微信中是有一些不同的。

  1. 浏览器中对于import的识别,其后缀必须要加上.js,而微信小游戏不需要,写上文件名就好
  2. 微信端不能提前声明类属性变量,否则会报错,而浏览器不会,这个是很重要的

至于其它的,真没太大差别,babel+WebStorm+微信官方的开发者工具,结合起来,就可以很惬意的书写自己的小游戏啦

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

26人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
架构师
手记
粉丝
1.6万
获赞与收藏
230

关注TA,一起探索更多经验知识

作者相关文章
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消