第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,在安装模块时指定明确的版本号。

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

小结


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


目录
打赏
0
0
0
0
2
分享
相关文章
|
29天前
|
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
120 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
21 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
131 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
34 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
82 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
40 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
96 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
84 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
30 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    33
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    4
  • 4
    详解智能编码在前端研发的创新应用
    20
  • 5
    巧用通义灵码,提升前端研发效率
    17
  • 6
    智能编码在前端研发的创新应用
    16
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    12
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    25
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    13
  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    21
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    58
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    4
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    65
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    29
  • 7
    巧用通义灵码,提升前端研发效率
    96
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    148
  • 9
    详解智能编码在前端研发的创新应用
    106
  • 10
    智能编码在前端研发的创新应用
    83