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

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

image.png

今天学习《前端篇》第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,在安装模块时指定明确的版本号。

  • 注册小游戏时使用的微信,与登录微信开发者工具使用的微信最好是同一个帐号,如果账号不一样,记得让管理员登录小游戏管理后台,添加你的微信为开发者。

小结


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


目录
相关文章
|
29天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
105 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
151 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
28 1
|
1月前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
41 2
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
2月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
45 0
|
2月前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
59 0
|
2月前
|
Web App开发 移动开发 前端开发
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
63 0
|
2月前
|
前端开发 API 开发者
🥇前端宝藏:多项目掌握技能的冒险之旅🏆
在前端开发的学习旅程中,实践是提升技能的关键。本文介绍了多个前端项目,包括计算器、天气应用、经典游戏等,涵盖了从React到Svelte的各种技术栈。每个项目都附有在线演示和源代码,旨在帮助读者深入理解实现细节,激励更多人参与实际项目开发。通过这些项目,读者可以将理论知识转化为实践,拓展职业机会。
22 0
|
2月前
|
前端开发 JavaScript
轻松上手:基于single-spa构建qiankun微前端项目完整教程
轻松上手:基于single-spa构建qiankun微前端项目完整教程
64 0