3-2 小游戏API初探-1

打开开发者工具，添加项目，快速启动模板。

小游戏开发文档：

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

看一下配置，比如在game.json里面添加一个showStatuBar:ture ，就可以实现出现状态栏。进行全局配置。

canvas创建的API：

web上创建canvas，需要getElementById 获得节点，微信这里创建，也是基于这个原理。只不过是做了一个封装。基架里有一个文件，可以看到：这是一个适配器文件，里面已经有了wx.createCanvas() 操作。

如果不删除这个文件，再做一次createCanvas，就成了离屏的canvas，

离屏canvas是不可见的，怎么操作都是无效的。

readme，项目说明。把东西都删掉。就剩一个game.js和game.json 

有很多不严谨的地方，官方文档代码，如果在webstorm打开，有很多报错和提示。很多写法是不严谨的。如分号。

官方文档这么创建canvas：

创建 Canvas

调用 wx.createCanvas() 接口，可以创建一个 Canvas 对象。

varcanvas = wx.createCanvas()

在 Canvas 上进行绘制

但是由于没有在 canvas 上进行绘制，所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制，可以在屏幕左上角看到一个 100x100 的红色矩形。

var context = canvas.getContext('2d')

context.fillStyle ='red'

context.fillRect(0,0,100,100)

由于微信开发者工具用的没有webstorm方便，所以可以在webstorm中进行操作。

微信小游戏的编程语法完全是和canvas一致的。 也就是说我们在webstorm里面通过html写的canvas，做的一系列逻辑操作，把我们HTML文件移除掉，再把js中的canvas创建换成微信的canvas创建的语句，就可以平滑的移植了。比如在webstorm中创建一个空项目，新建一个html文件，在里面写一个canvas，给它一个宽，一个高，id是game_canvas。用严格模式。把微信上的四行代码复制过来，alt+enter，会有程序自动修补。然后进行调试，wx is not defined ，这个api是没有的。只需要把wx换成getElementById("game_canvas")，刷新后，跟微信开发者工具没有任何区别。

不用纠结使用什么开发工具，用更好的就行了。

而且微信开发者工具代码同步比较慢。刷新比较慢。之后项目在在webstorm中开发。之后只需要一换就OK了。