第04步《前端篇》第1章创建第一个小游戏项目第1课

今天学习《前端篇》第1章创建第一个小游戏项目的第1课，接下来用2课的时间了解一下如何在微信开发者工具中创建和开发一个小游戏项目，这部分内容方便初学者快速建立对微信小游戏开发的感官认知，也适合非开发人员作为拓展了解的内容使用。

学习目标

• 了解微信小游戏/小程序宿主环境的底层运行机制。
• 注册小游戏开发账号，这是免费的，个人、企业皆可注册。
• 安装官方发布的微信开发者工具，这是一个集成的一站式IDE开发环境。
• 在PC电脑上与手机设备上学会测试小游戏项目。
• 了解一个小游戏项目的一般性目录结构。
• 了解在微信开发者工具中调试小游戏项目的基础知识。
• 学会在电脑上安装Node.js与Babel，这是再造了一个可以执行JS代码的宿主环境。
• 了解面向对象编程有关的基础术语，认识这些术语对于第三篇的重构实践很有帮助，但也可以只作为非开发人员的一般性知识。
• 安装Babel工具，编写基本的.babelrc配置文件，只需要一行配置： { "presets": ["@babel/preset-env"] }

主要知识点/技能点

• WeixinJSBridge 可以看作是小游戏与微信 App 之间的一个桥梁，小游戏通过它访问手机操作系统的本地存储、网络、罗盘、陀螺仪等硬件设备能力。
• 在逻辑层的 JS 代码中，像 setData 这样的方法是通过 WeixinJSBridge 调用底层的 evaluateJavaScript 函数发挥作用的；在视图层，如果有用户输入，例如单击了一个按钮，这个按钮上我们事先绑定过一个函数，那么这个函数也是通过 evaluateJavaScript 间接被调用的。
• 有一点需要特别注意，evaluateJavaScript 方法的执行效率太低，它是先将数据对象转换为字符串，再将字符串与 JS 代码拼接成一份脚本文本后才执行的。从逻辑层到底层，及从底层到逻辑层，往来调用都是这样一种模式，重复且低效。
• 在注册过程中有一项是选择服务类目，此处一定要选择游戏类目。如果选择了非游戏类目，则该账号只能用于小程序开发，微信是以服务类目区分小程序和小游戏的。
• 打开微信开发者工具，选择菜单“设置”→ “编辑器设置”，如图1-3所示，将“文件保存”下除“修改文件时自动保存”之外的其他选项全部选中。这样在开发时，如果对文件进行了修改，就不需要频繁的手动保存了，文件会自动保存；当需要预览效果时，直接单击工具栏区的“编译”按钮就可以了。
• 若一个空目录作为目标目录被选用，并且 AppID 是小游戏账号的 AppID，那么此时点击“确定”，微信开发者工具将自动基于默认模板创建一个“小飞机”游戏项目。
• “预览”主要是预览代码改动后的效果，是将改动后的软件包推上去看整体运行效果；而“真机调试”侧重于调试，打开后会弹出一个独立于已有调试区的调试窗口，远程手机上的Console输出会传输到本地微信开发者工具中，便于开发者定位问题。
• 在小游戏项目中，game.json 是游戏配置文件，project.config.json 是项目配置文件。
• 在小游戏的配置中，deviceOrientation 属性用于设定屏幕方向，有 portrait 竖屏、landscape 横屏两个选项，默认为 portrait。showStatusBar 设置是否显示系统状态栏，默认为 false，即全屏。
• 在手机上如何使用打印功能？在手机上运行小游戏后，点击屏幕右上角胶囊按钮组中的三个点菜单按钮，选择“打开调试”。此时小游戏会退出重启，待重新打开后，屏幕右下角会有一个绿色的 vConsole 按钮。点击这个 vConsole 按钮，便可以看到Console 面板以及代码中使用 console.log 打印的内容了。
• 在微信开发者工具的调试区如何使用断点调试功能？在Sources面板的右边栏，有断点控制按钮，包括恢复执行（快捷键为F8）、跳过（快捷键为F10）、跳进（快捷键为F11）、跳出（快捷键为Shift+F11）等按钮。
• 在面板Storage中，可以看到通过HTML5的localStorage.setItem接口或小游戏中的wx.setStorage接口设置的本地缓存。
• 所有的网络请求，包括接口请求、静态资源请求都会出现在这个Network面板中。在这个面板中，既可以查看每个请求的请求时长，也可以在整体上查看所有请求的先后顺序。

实践疑难点

• 安装微信开发者工具十分简单，下载、双击执行安装包即可。在终端中安装Babel工具时可能会有一点麻烦，有两个办法可以避免麻烦：1，先在Windows上安装Git SCM;2，在安装模块时指定明确的版本号。
• 注册小游戏时使用的微信，与登录微信开发者工具使用的微信最好是同一个帐号，如果账号不一样，记得让管理员登录小游戏管理后台，添加你的微信为开发者。

小结

这一课全是事务性的操作，细心一点不会有什么问题。

2022年12月27日

关于公众号推文的统一说明——

欢迎读者朋友转发、点赞、在看、转发朋友圈。如果有问题，在这里有以下三种解决途径。

• 除训练营学生以外，请不要以微信私信的方式问我任何问题，消息太多了根本回不过来。我会在朋友圈分享计算机技术前沿思考，如果对此不感兴趣，在加群后可以将我删除。
• 在下一篇公众号文章推送之前，可以在公众号文章的评论区提问。 提问时请注意将问题描述清楚，如果是软件问题最好有代码链接，这样有助于快速复现和查证问题。对于优质问题我看到后，如果我有解决方法且别人没有问过，我会认真回复并把问题精选放出来。
• 在评论区查看其它读者有没有问过相同或相似的问题。

新人一半的问题都是因为粗心大意所致，遇到问题时不妨先认真自检一下，或者使用谷歌搜索一下，大部分问题谷歌都能给出建议或线索。

最后说明一下，这个公众号主要是我业余用于辅助编写PBL实战教学内容的，关于计算机编程学习方面，你有什么想了解的，都可以在最新推文的评论区留言告诉我。

感谢读者朋友的理解与支持。