今天学习《前端篇》第4章移植及优化的第12课，移植音频和事件。
学习目标
- 处理getElementById is not a function错误；
- 处理Audio is not defined错误；
- 处理Audio错误：canPlayType is not a function；
- 处理currentTime错误：currentTime是只读属性，完成音频移植；
- 处理Image is not defined错误；
- 学习条件运算符和短路评估表达式；
- 认识小游戏的触摸事件：TouchStart、TouchMove、TouchEnd和TouchCancel；
- 了targetTouches、touches和changedTouches的区别；
- 改写click事件与mousemove事件；
- 了解小游戏的运行环境；
主要知识点/技能点
- 在微信小游戏中是没有DOM API的，原来在HTML5中我们使用getElementById查询Canvas对象，现在getElementById接口不能使用了，但我们可以用wx.createCanvas代替。
- 原来由getElementById获取预置的img对象的代码，可以改用wx.createImage创建。
- 微信小游戏/小程序接口均是以wx开头的，并且可以在任何一个JS文件中使用，无须事先引入。
- 在小游戏中，Audio无法通过new关键字实例化，但可以使用wx.createInnerAudioContext这个方法创建一个InnerAudioContext 对象，用其代替HTML5中的Audio对象。
- 小游戏不需要像浏览器那样做音频格式兼容，Android与iOS支持的音频类型有4类：m4a、aac、mp3和 wav。
- 微信小游戏的Canvas API尽管与HTML5很像，但还是有差异的。在HTML5中，Audio的currentTime是一个读取属性，在小游戏中，InnerAudioContext对象的currentTime属性是只读的。
- 在小游戏开发中，与Audio对象一样，Image也不能直接使用new关键字实例化，new Image()可以由wx.createImage()方法代替。
- 两种短路评估表达式：（1）a && b；（2）a || b。
- 小游戏有自己的事件体系，HTML5这种以addEventListener方法添加事件监听的方式，是不被支持的。在小游戏中，当用户手指触屏时，会产生TouchStart、TouchMove、TouchEnd和TouchCancel这 4类事件，分别对应了触摸开始、移动、完成触摸事件和取消触摸。
- targetTouches、touches和changedTouches都是触摸事件的触摸点列表，但不同的是：（1）touches是当前屏幕上所有触摸点的集合；（2）targetTouches是绑定事件的那个元素上的触摸点的集合；（3）changedTouches是触发事件时发生改变的触摸点的集合。
- 与HTML5中的鼠标事件不同的是，小游戏中与触摸事件相关的对象不是一个对象，而是一个事件对象的数组。
- 一般用touchEnd改写click事件，用touchMove改写mousemove事件。
实践疑难点
- 注意changedTouches与touches的区别，对于wx.onTouchEnd监听，我们要从changedTouches中取事件对象；对于wx.onTouchMove监听，我们才可以从touches中取事件对象。
小结
小游戏三端的脚本执行环境以及用于渲染环境是各不相同的。由于三端执行JS及渲染视图的环境存在差异，所以在模拟器中正常的代码，在手机上不一定正常，这在测试中要注意。手机上的非正常效果如下所示：
