【小程序】快来开发你的第一个微信小游戏(详细流程)

这篇具有很好参考价值的文章主要介绍了【小程序】快来开发你的第一个微信小游戏(详细流程)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🥳 作者:伯子南
😎 坚信: 好记性不如乱笔头,独乐乐不如众乐乐
💪 个人主页:https://blog.csdn.net/qq_34577234?spm=1010.2135.3001.5421
👬🏻 觉得博主文章不错的话,请三连支持一下!如有需要我的支持,请私信!

本文通过开发一个简单的小游戏,来带领大家实操一下开发小游戏的基本流程👾

1️⃣注册账号

首先需要注册一个小游戏账号,复制打开右侧链接💁‍♂️ [https://mp.weixin.qq.com/wxopen/waregister?action=step1]

✍️填写基本信息

微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

🤳验证邮箱

  • 点击登录邮箱按钮打开邮箱
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 查看未读邮件中标题为《微信小程序账号激活》的邮件,点击验证链接激活账号
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

👉信息登记

  • 小游戏开发需要合法合规,因此需要信息登记。
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
    -填写相关信息后点击继续 提示成功。点击前往小程序按钮
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

🦴设置小游戏基本信息

小游戏的开发拥有规定的发布流程,需要按流程操作。

✍️填写小游戏基本信息

  • 先填写小程序基本信息
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 填写小游戏的名称、头像与简介 (简介需要合规,不能出现违规词汇)
    填写好后点击提交
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

设置小游戏类目信息

然后进行小游戏类目设置:
微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

  • 添加类目并选择游戏->休闲游戏
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 这样我们小游戏的发布流程的第一步就做好啦!

接下来就是开发了!我们选择自己开发
微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

🧶下载安装IDE

先不要心急,所谓磨刀不误砍柴工。

为了帮助开发者简单和高效地开发和调试,
微信小程序微信官方在原有的公众号网页调试工具的基础上,
推出了全新的 微信开发者工具
集成了公众号网页调试和小程序调试两种开发模式。

  • 首先我们需要下载并安装微信开发者工具
    [https://developers.weixin.qq.com/minigame/dev/devtools/download.html]
    开发者工具分为小程序版与小游戏版,这里推荐下载小游戏版。(小程序版开发小游戏有问题)
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 下载并安装好后微信扫描二维码登录
  • 登陆后,界面如下:
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

💁🏻‍♂️新建项目

开发者工具下载安装完毕后,打开并新建项目。

  • 选择小游戏并选择第一个空白项目。
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

✍️填写项目基本信息

微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

  • 其中AppID请到小程序管理页面,查看并复制填写到上面
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

💻初识IDE界面

创建好空白项目后,可以看到IDE场景如下:
目前我们最关系的是红框标记的三个,分别是:1.场景资源目录 ; 2.场景视图; 3.项目目录
微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
新打开的项目默认创建了一个3D场景(Scene)

对于场景视图,我们可以:
1.使用鼠标左键 进行 拖动查看,
2.使用鼠标滚轮 进行 放大缩小

⌨️创建一个正方体

  • 在场景资源目录中,选择Main Camera,右键选择-创建3D节点->Mesh->Cube.
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

  • 这样我们就在场景种创建了一个正方体 (如果看不到可以试试在场景视图中用鼠标滚轮缩小视图)
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

  • 在场景资源目录选择正方体资源Cube_2并双击,就可以在右侧Inspector窗口看到Cube_2的具体信息。

  • 这里的参数你都可以按需编辑,为了后续演示时能够看到正方体,我们编辑有右边参数中 position.z=5.
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

💾保存场景

  • 然后ctrl+s先保存下这个场景
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 可以看到项目目录中新增了一个scene格式的文件,双击demo.scene文件,就能重新打开场景视图。
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

📝加点脚本让正方体动起来

小游戏框架推荐使用 TypeScript 来编写小游戏逻辑。

📃新建脚本

  • 我们在项目目录新增一个脚本文件:
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 命名并选择该文件,可以看到右侧Inspector窗口显示了脚本内容
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

🔗绑定脚本

  • 按住右键拖动脚本demo.ts到正方体Cube_2,即可将脚本绑定
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 双击Cube_2,即可在右侧看到绑定的脚本信息
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

📑编辑脚本

  • 选择刚刚创建好的demo.ts,右键选择内置编辑器打开
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 这样更方便我们的编辑
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
    可以看到该脚本主要有三个方法onAwake,onUpdate,onDestroy
  • 我们修改其中的onUpdate方法如下,并ctrl+s保存
public onUpdate(dt) {
  this.entity.transform.rotate(engine.Vector3.createFromNumber(15*dt, 30* dt, 45 * dt), true, false)
}

微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

  • 然后关闭编辑器,并切换到之前的窗口,双击demo.ts,可以在右侧窗口查看到修改后的脚本
    这时候需要再次ctrl+s保存
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 如果右侧未显示,可以先关闭Inspector标签,然后重新打开 (如下操作),感觉是一个bug
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

🤳🏿预览效果

  • 在工具界面上方有个播放按钮,点击后工具开始初始化小游戏容器,完成后即可进行预览
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 这时候你就可以看到正方体动起来了!!!
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 点击停止按钮就可以停止预览,回到编辑状态

🖨编译构建

回到编辑态后,我们开始进行编辑构建

  • 如下,选择构建工程打开Build窗口
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • Build窗口,点击选择任务
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 然后勾选我们正在编辑的游戏工程,并点击开始构建
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 填写基本的构建信息,并点击确定
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 对于确认后的一切弹窗信息,都点击确定。过程比较耗时,请耐心等待
  • 最后会提示构建成功
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 你可以选择点击本地调试,在本地浏览器中进行查看
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

📲真机调试

  • 构建面板中,有真机调试按钮
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 点击后会加载预览二维码
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

请使用微信客户端扫描打开

  • 首先在你会在手机端看到熟悉的小游戏界面
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 并且PC端会弹出真机调试窗体 (很像浏览器的开发者有木有)
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序
  • 移动端加载完成后,就可以看到啦!
    微信小游戏开发,微信小游戏开发,基础学习,工作实践,小程序,微信,微信小程序

👋🏿和我一起?

  *到这里我们的第一个小游戏就完成了!!!是不是很简单!*😎
  *最近正在学习如何开发小游戏,接下来会持续学习并第一时间在CSDN更新博客。*💪
  如果你也对小游戏开发感兴趣的话,不妨关注我,关注博主的小游戏开发专栏,一起体验小游戏开发的乐趣!!

学习内容计划:文章来源地址https://www.toymoban.com/news/detail-778111.html

  • 小游戏开发申请流程
  • 小游戏开发环境搭建与工具使用
  • 小游戏开发原理与基础
  • 小游戏常用API
  • 小游戏开发实战

到了这里,关于【小程序】快来开发你的第一个微信小游戏(详细流程)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • GPT应用开发:运行你的第一个聊天程序

    本系列文章介绍基于OpenAI GPT API开发大模型应用的方法,适合从零开始,也适合查缺补漏。 本文首先介绍基于聊天API编程的方法。 很多机器学习框架和类库都是使用Python编写的,OpenAI提供的很多例子也是Python编写的,所以为了方便学习,我们这个教程也使用Python。 Python环境

    2024年01月16日
    浏览(84)
  • 创造你的第一个微信小程序:简单易懂的入门指南

    1.1 介绍 小程序是一种新的开放能力,开发者可以快速地开发一个小程序。可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 官方网址 :https://mp.weixin.qq.com/cgi-bin/wx?token=lang=zh_CN 小程序主要运行微信内部,可通过上述网站来整体了解微信小程序的开发。 首先 ,

    2024年02月05日
    浏览(88)
  • 小程序开发:如何从零开始建立你的第一个小程序

    你可能有一个小程序的想法,但它仍然是一个想法。对于开发人员来说,这是一项艰巨的任务,因为你必须确保你有足够的时间来开发你的第一个小程序。如果你决定使用小程序,那就有很多事情要做。创建一个小程序可能是一件非常耗时的事情。除了创建一个自己的小程序

    2024年02月10日
    浏览(73)
  • 微信开发者工具-导入小程序项目会自动切换到小游戏打开出错的解决方案

    微信开发者工具导入小程序项目会自动切换到小游戏打开出错, 提示appid错误,如下图 错误 Error: INVALID_TOKEN... 表示网络已断开, 检查开发工具是否连接到网络, 或注销重新登录开发工具试试 如果提示缺少 game.json ,表示当前打开的不是小游戏项目,要选小程序项目后再导入

    2024年02月11日
    浏览(89)
  • 用python开发一个炸金花小游戏

    众所周知扑克牌可谓是居家旅行、桌面交友的必备道具, 今天我们用  Python  来实现一个类似 炸金花 的扑克牌小游戏,先来看一下基本的游戏规则。 炸(诈)金花又叫三张牌,是在全国广泛流传的一种民间多人纸牌游戏。游戏使用一副除去大小王的扑克牌,共 4 个花色

    2024年02月09日
    浏览(44)
  • 从零基础开始开发自己的第一个微信小程序

    通过本篇blog,你可以熟悉从零开始,搭建小程序开发环境,并运行起自己的第一个小程序。 1、 注册账号 2、 下载开发工具搭建开发环境 3、 创建工程,编写代码 4、 手机上查看效果 通过以上四步就能创建属于自己的小程序了。 注册完成后是这样的 小程序开发工具下载地址

    2024年02月14日
    浏览(75)
  • Unity微信小游戏使用微信云开发记录

    最近项目上架微信小游戏,首先使用了微信官方sdk转成微信小游戏,官方地址如下: https://github.com/wechat-miniprogram/minigame-unity-webgl-transform 官方给了各种指导,虽然都有但是都不太精哈哈 因为要做排行榜,云存档,而我司没服务器,那只能用微信云开发了。具体开通啥的初始

    2023年04月09日
    浏览(52)
  • 微信小程序猜数字小游戏

     我的首页(效果图)使用的是index03 开始游戏使用的是index 游戏规则使用的是index01 关于其他使用的是index02 (创建文件在app.json里面,这是我的app.json创建的文件) (由于我的首页效果图使用的是index03,所以要放在前面) WXML代码 WXSS代码 WXML代码 WXSS代码 index.js代码 WXML代码 WX

    2023年04月10日
    浏览(49)
  • Python开发小游戏:写一个飞机大战只需要500行代码!

    ‘’’ :param background_image_path: 背景图片的路径地址 :param size: 游戏窗口的大小 :param title: 游戏窗口的标题 :param font_name: 指定字体 :param font_size: 指定字体大小 :param speed: 背景图滚动整个窗口一次所用时间,单位为ms ‘’’ self.size = size self.screen = pygame.display.set_mode(size) self.tit

    2024年04月11日
    浏览(45)
  • Unity项目转微信小游戏 微信小程序保姆教程,繁杂问题解决,及微信小游戏平台简单性能测试

    借着某人需求,做了一波简单的技术调研:将Unity项目转换为微信小游戏。 本文主要内容:Unity转换小游戏的步骤,遇到问题的解决方法,以及简单的性能测试对比 微信小游戏的限制 微信小游戏对程序包体大小有严格限制:首包必须小于2M,首包加分包(后加载)不得大于

    2024年02月05日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包