零游戏基础Cursor制作你人生中的第一款手游(4)drawImage画布的绘制 在上一篇教程中，我们探讨了如何创建游戏关卡，同时也意识到初始的游戏提示——黑屏上的文字，看起来非常简陋，与商业游戏应有的品质相差甚远。因此，我们决定将这一提示升级为一个更加符合游戏风格的弹窗提示。现在让我们来看看改进后的效果以及实现的具体步骤。改进效果展示原始提示界面：改进后界面：本来以为很简单，后面也是跟AI交互了很多次，才知道要从系统弹框，改为这种背景弹框，并不是那么容易首先看我怎么跟AI交互的实现步骤交互一,去掉wx.showModal：之前的wx.showModal 不需要了，显示自定义的 健康游戏忠告这里让他用素材要将之前的 wx.showModal 替换为自定义的健康游戏忠告框，你可以在 GameInfo 类中使用 drawHealthAdvice 方法来绘制这个框，并在游戏开始时显示它。以下是如何实现这一功能的步骤： 1. 移除 wx.showModal 首先，确保在 Main 类的 showHealthAdvice 方法中移除 wx.showModal 的调用，改为直接设置 showHealthAdviceFlag 为 true，以便在 render 方法中绘制忠告框。 2. 更新 Main 类 以下是更新后的 Main 类示例： 3. 更新 GameInfo 类 确保 GameInfo 类中的 drawHealthAdvice 方法能够正确绘制健康游戏忠告，并在 render 方法中调用它。 4. 触摸事件处理 在 GameInfo 类的 touchEventHandler 方法中，处理用户点击以开始游戏： 5. 整体逻辑 绘制忠告框：在 GameInfo 类中添加 drawHealthAdvice 方法，绘制一个半透明的框和文本。 控制显示状态：使用 showHealthAdviceFlag 控制是否显示忠告框。 在游戏开始时隐藏忠告：在用户确认后，设置 showHealthAdviceFlag 为 false。 通过这些步骤，你应该能够在游戏开始时绘制健康游戏忠告的框，并在用户确认后开始游戏。如果还有其他问题或需求，请随时告知！这里同意使用他的代码，交互二，修复还没点击开始，飞机就一直落下来进入游戏的时候，飞机先不要下来，等用户点击了“健康游戏，快乐生活” 再开始这里又说了一堆，我使用了他的代码然后刷新游戏黑屏了，应该是他没执行游戏开始按钮，这里我不说复杂指令交互三，修复黑屏：目前进入游戏黑屏，什么都没显示问题可能出在游戏循环和初始化的时序上。在 Main 类中，我们需要确保游戏循环在构造函数中就开始运行，只是在健康忠告显示期间不更新玩家状态。以下是修复建议： 主要修改点： 在构造函数中添加了 init() 方法的调用，确保游戏循环立即开始。 将游戏循环逻辑从 startGame 移到了构造函数中。 在 update 和 render 方法中添加了条件判断，只有在健康忠告确认后才更新和渲染玩家、子弹和敌机。 移除了重复的游戏循环代码。 这样修改后，游戏应该能够正常显示背景和健康忠告提示，但玩家飞机和敌机会在用户确认健康忠告后才开始活动。交互四：还没开始就完成第一关提示应该是遇到逻辑bug，我继续提示他目前问题目前有bug，进入游戏他就提示我关卡一已经完成，其实我还没开始这个问题是因为在游戏初始化时就开始检查关卡完成状态了。我们需要修改 checkLevelCompletion 方法，确保只有在健康忠告确认后才开始检查关卡完成状态。 主要修改点： 在 update 方法中，将 checkLevelCompletion 的调用移到了健康忠告确认后的逻辑块中。 在 checkLevelCompletion 方法中添加了对 showHealthAdviceFlag 的检查，确保只有在健康忠告确认后才检查关卡完成状态。 这样修改后，游戏应该只会在玩家确认健康忠告并开始游戏后才会检查关卡完成状态。交互五：点击开始画面卡住，飞机不下来目前尽量提示对了，但点击提示，他游戏画面暂停了，也没有敌机出来问题出在 Main 类中的游戏初始化和开始逻辑。当点击健康忠告时，我们需要正确地开始游戏循环并生成敌机。以下是修复后的代码： 主要修改点： 在 start 方法中确保游戏循环继续运行。 在 enemyGenerate 方法中先清空现有敌机数组。 确保在点击健康忠告后正确调用 startLevel 方法。 移除了 cancelAnimationFrame 的调用，避免游戏循环被意外停止。 这些修改应该能解决游戏画面暂停和敌机不出现的问题。游戏现在应该能在点击健康忠告后正常开始，并显示敌机。交互六：之前点击文字开始事件不对目前点击了开始游戏，没有反应反而是点击文字，开始了游戏这是因为点击区域的判断有问题。在 touchEventHandler 方法中，我们需要修改健康忠告按钮的点击区域判断，使其与游戏结束时的重启按钮区域判断保持一致。以下是修复后的代码：然后就达到了，最终上面效果，虽然有些错误，这里调整下坐标，最终效果我们看下核心代码： // 弹窗绘制 drawHealthAdvice(ctx) { this.drawHealthAdviceBackground(ctx); this.drawHealthAdviceText(ctx); this.drawHealthAdviceButton(ctx); } drawHealthAdviceBackground(ctx) { ctx.drawImage( atlas, // 图像源 270, // 源图像的x坐标 120, // 源图像的y坐标 119, // 源图像的宽度 108, // 源图像的高度 SCREEN_WIDTH / 2 - 150, // 目标图像的x坐标 SCREEN_HEIGHT / 2 - 100, // 目标图像的y坐标 300, // 目标图像的宽度 300 // 目标图像的高度 ); } drawHealthAdviceText(ctx) { this.setFont(ctx); // 绘制标题 ctx.fillText( '健康游戏忠告', SCREEN_WIDTH / 2 - 60, SCREEN_HEIGHT / 2 - 100 + 50 ); // 绘制忠告内容 ctx.fillText( '健康游戏，快乐生活。', SCREEN_WIDTH / 2 - 80, SCREEN_HEIGHT / 2 - 100 + 90+8 ); ctx.fillText( '合理安排时间，享受游戏乐趣', // 文本内容 SCREEN_WIDTH / 2 - 160+24, // x坐标，调整以居中 SCREEN_HEIGHT / 2 - 100 + 120+8 // y坐标，调整以居中 ); ctx.fillText( '避免沉迷。', SCREEN_WIDTH / 2 - 40, SCREEN_HEIGHT / 2 - 100 + 150+8 ); } drawHealthAdviceButton(ctx) { ctx.drawImage( atlas, 120, 6, 39, 24, SCREEN_WIDTH / 2 - 60, SCREEN_HEIGHT / 2 - 100 + 180, 120, 40 ); ctx.fillText( '开始游戏', SCREEN_WIDTH / 2 - 40, SCREEN_HEIGHT / 2 - 100 + 205 ); }通过以上步骤和代码，我们成功地将原始的黑屏提示升级为一个具有游戏风格的提示窗口，提升了用户的首次体验感受。希望这些信息对你有所帮助，如果你有任何疑问或者需要进一步的帮助，请随时提问！

零游戏基础Cursor制作你人生中的第一款手游(3)游戏关卡的制作 上章我们说了，让AI把战绩保存到数据库，本来最开始要把战绩给游戏用户列出来，增加一个查看战绩按钮的先看这章最终效果实现查看战绩对AI说：飞机大战游戏目前正常运行了，我想界面上增加一个查看战绩按钮，点击展示战绩，字段，时间，分数AI回复： 在游戏界面上增加一个查看战绩的按钮，并在点击时展示战绩（包括字段、时间和分数），你需要进行以下修改： 在 GameInfo 类中添加一个按钮和相应的事件处理函数。 创建一个新的方法来展示战绩。 更新 Main 类以处理战绩的显示。 以下是你需要的代码更新： 更新说明： 在 GameInfo 类中添加了一个按钮，点击后会调用 showScore 方法展示战绩。 showScore 方法会弹出一个包含当前时间和分数的提示框。 在 Main 类的构造函数中，添加了对 showScore 事件的监听。 请确保 GameInfo 类的相关代码能够正确处理按钮的创建和事件绑定。如果 GameInfo 类的实现不在你提供的代码中，可能需要相应地调整点击应用继续目前页面并未看到按钮，也没报错AI回复 如果页面上没有看到“查看战绩”按钮，可能是由于以下几个原因： 按钮的样式问题：按钮可能被其他元素覆盖，或者没有正确显示。可以尝试为按钮添加一些基本的样式。 按钮的添加位置：确保按钮被添加到正确的 DOM 元素中。 事件绑定问题：确保事件绑定正确，按钮的点击事件能够被触发。 以下是一些可能的解决方案： 1. 添加按钮样式 在 GameInfo 类的构造函数中，添加一些样式来确保按钮可见： 2. 确保按钮添加到正确的 DOM 确保按钮是在游戏开始后添加到 document.body 中的。如果游戏的渲染逻辑在某个特定的容器中，可能需要将按钮添加到那个容器中。 3. 检查事件绑定 确保 showScore 方法能够被正确调用。可以在 showScore 方法中添加一个 console.log 来确认是否被触发： 4. 检查浏览器控制台 打开浏览器的开发者工具，查看控制台是否有任何错误信息，可能会提供更多线索。 5. 确保游戏逻辑正常 确保游戏逻辑正常运行，特别是 GameInfo 类的实例是否被正确创建并渲染。 通过以上步骤，你应该能够找到并解决按钮未显示的问题。如果问题仍然存在，请提供更多的上下文信息，以便进一步帮助你。这里继续交互了N次，没我想象的那么简单，在游戏画面中要实现网页中的数据展示，复杂度有点高，而我完全没游戏开发经验，这个战绩展示，等后面上线了，再加上吧，我们优先完成微信的要求，实现关卡功能，与背景切换实现关卡增加关卡功能有些复杂，这里跟AI 交互了N次，才达成我要的效果，这里描述下整个过程对AI说目前游戏比较简单，如果我想实现关卡，应该怎么实现要在你的游戏中实现关卡系统，可以按照以下步骤进行设计和实现：1. 定义关卡结构首先，你需要定义关卡的结构。每个关卡可以包含以下信息：关卡编号敌人数量敌人类型生成间隔其他特定于关卡的设置（如背景、音乐等）2. 创建关卡管理类创建一个新的类来管理关卡的逻辑，例如 LevelManager。这个类将负责加载关卡、跟踪当前关卡、处理关卡的开始和结束等。3. 更新 Main 类在 Main 类中，添加对 LevelManager 的引用，并在游戏开始时初始化关卡。4. 示例代码以下是一个简单的实现示例：1. 创建 LevelManager 类代码他生成了一个新文件levelManager.jsexport default class LevelManager { constructor() { this.currentLevel = 0; // 当前关卡 this.levels = [ { enemies: 5, enemyType: 'easy', interval: 30, background: 'images/bg1.jpg' }, { enemies: 7, enemyType: 'easy', interval: 28, background: 'images/bg2.jpg' }, { enemies: 9, enemyType: 'medium', interval: 26, background: 'images/bg3.jpg' }, { enemies: 11, enemyType: 'medium', interval: 24, background: 'images/bg4.jpg' }, { enemies: 13, enemyType: 'hard', interval: 22, background: 'images/bg5.jpg' }, { enemies: 15, enemyType: 'hard', interval: 20, background: 'images/bg6.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg7.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg8.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg9.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg10.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg11.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg12.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg13.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg14.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg15.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg16.jpg' }, { enemies: 17, enemyType: 'hard', interval: 18, background: 'images/bg17.jpg' }, // 可以继续添加更多关卡 ]; } getCurrentLevel() { return this.levels[this.currentLevel]; } nextLevel() { this.currentLevel++; if (this.currentLevel >= this.levels.length) { this.currentLevel = this.levels.length - 1; // 防止超出范围 } } reset() { this.currentLevel =0; // 重置到第一个关卡 GameGlobal.databus.currentLevel = 1 } } 这里出现了一个问题，我直接口语化跟AI说我点击重新开始，关卡没有重新计算AI自己修复了这个问题继续增加需求每一个关卡结束，提示他，让他点击进入下一关要在每个关卡结束时提示玩家，并让他们点击进入下一关，你可以在 Main 类中实现一个提示框，使用 wx.showModal 来显示关卡完成的消息，并在用户确认后进入下一关。1. 更新 checkLevelCompletion 方法在 checkLevelCompletion 方法中，当关卡完成时，使用 wx.showModal 提示玩家，并在用户确认后进入下一关。2. 示例代码以下是更新后的 checkLevelCompletion 方法示例：main.js3. 整体逻辑检查关卡完成：在 checkLevelCompletion 方法中检查当前关卡的敌机数量。显示提示框：如果敌机数量为零，使用 wx.showModal 提示玩家关卡完成。进入下一关：在用户确认后，调用 this.levelManager.nextLevel() 进入下一关，并调用 this.startLevel() 开始新关卡。继续增加需求关卡完成有bug，点击确认一直卡在哪里，好像是弹出了无数个框，可能代码写错地方了它再次修复了继续增加需求每过完一关，切换一次背景程序报错，继续说明自己需要的背景有这7张图片，images/bg(1-7).jpg，提示 Image is not defined如此，就实现了，这里为了好看，我们给程序成绩下面，增加显示一个当前关卡对AI说定义一个函数，绘制当前关卡，位置放在当前分数下面最终效果为了尽量审核通过，这里我找了十几个背景图片bg17.jpg ，然后截图每一个画面，提交给给微信审核对了，这里的背景也是AI生成的，暂时先实现功能，没怎么注意美观，用的百度AI图片生成，实在太傻了，大部分图片特别不匹配，让不要出现天空画面，他非要出现天空，已经尝试了无数次方案。 听不懂汉语（国产生成图片还有一段很长的路）审核又一次没过，说进入游戏必须提示健康游戏忠告， 这个简单，直接跟AI说进入游戏先不要开始，先提示进入小游戏第一张含有48字《健康游戏忠告》要在进入游戏时显示一条包含48字的《健康游戏忠告》，你可以在游戏的初始化阶段使用 wx.showModal 来展示这条信息。以下是如何实现这一功能的步骤：1. 在 Main 类中添加提示逻辑在游戏的主类（通常是 Main 类）中，在构造函数或初始化方法中添加代码，以在游戏开始前显示提示。2. 示例代码以下是如何在 Main 类中实现这一功能的示例代码：class Main { constructor() { // 其他初始化代码... // 显示健康游戏忠告 this.showHealthAdvice(); } showHealthAdvice() { wx.showModal({ title: '健康游戏忠告', content: '健康游戏，快乐生活。合理安排时间，享受游戏乐趣，避免沉迷。', showCancel: false, // 不显示取消按钮 success: (res) => { if (res.confirm) { console.log('用户确认了忠告'); // 这里可以继续游戏的初始化逻辑 this.startGame(); // 开始游戏 } } }); } startGame() { // 游戏开始的逻辑 console.log('游戏开始'); // 其他游戏初始化代码... } }项目代码实时提交源码地址：https://github.com/magic007/PlaneBattleMiniGame再一次提交，等待微信审核，游戏我也继续用AI优化体验，后面有空把战绩功能给做出来。

零游戏基础Cursor制作你人生中的第一款手游(2)Cursor工具保存游戏数据到云数据库 想发布一款游戏， 因为没有游戏编程经验，找个Demo直接提交给微信审核就可以上线，不想游戏上线有些复杂。下载开发工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html本来计划把官方Demo 飞机大战直接提交微信审核，微信答复游戏太简单，无非通过审核。因为小游戏名称已经取名飞机大战，也没机会改了，也只能根据官方的Demo扩展各种功能继续开发了，看能否上线，因为有Cursor ，编程方面不用太担心。 当然这里还有特别重要的一点是，每做一个新功能，用Git记录下来，这样AI改错了，也好回退，当出现一个稳定版本，我们就Git提交既然已经决定加功能，做复杂，就先实现一个记录每个玩家的成绩吧Cursor介绍Cursor AI编辑器是一款基于人工智能的文本编辑器，旨在通过智能化的功能提升用户的编辑效率。它具有以下特点：智能语法检查：自动检测和修正语法错误，提高文档质量。内容生成：根据用户输入的主题，生成相关内容，帮助用户快速完成写作任务。语言翻译：支持多语言翻译，方便用户处理不同语言的文档。自动完成：根据上下文预测并自动完成用户的输入，减少重复劳动。等等。。。简单理解，Cursor 是一个万能的编程软件，市面上的主流语言没有他不会的，只需要口语化说明你的需求，他就能生成对应的代码。下载Cursor进入官网，点击Download根据你的操作系统（Windows、macOS、Linux）选择相应的版本。安装 CursorWindows运行安装包：双击下载的 .exe 文件，启动安装程序。按照安装向导的提示完成安装。启动 Cursor：安装完成后，你可以在开始菜单或桌面上找到 Cursor 的快捷方式，点击启动。macOS运行安装包：双击下载的 .dmg 文件，将 Cursor 拖动到应用程序文件夹中。启动 Cursor：打开 Launchpad，找到 Cursor 图标，点击启动。我们先给游戏加用户登录注册，以及记录每局游戏成绩的功能。直接Cursor打开代码,快捷键command+I打开composer这是微信示例打飞机游戏，帮忙引入Bmob sdk，打开游戏执行auth登录函数composer 可以理解为全局修改代码，他会阅读你整个项目代码，在合适的位置插入你的需求。除了这个还有另外2个，一个我称之为块级修改，一个我称为文件级修改项目级：command+I ，直接提要求，自动给项目里面写代码（对新手最友好）文件级：command+L， 修改某个文件里面的代码块级别：command+K ，修改某一块代码虽然command+I 是最强大的，无视逻辑，无视文件，随便提问题，他基本都能写好代码， 但这里颗粒度越细，精度也就越高，所以我们等熟悉项目结构了，尽量用小颗粒级别。具体每个的详细说明，后面如果出Cursor详细教程，再写给大家，给出各种示例区别，我们这次核心就是上线这个飞机大战游戏这里可以看到他引入了一个sdk，然后初始化，然后执行一键登录后端平台操作：注册Bmob创建一个应用，填写小程序id，秘钥这里我们把sdk文件放到目录下，sdk下载https://github.com/bmob/hydrogen-js-sdk/tree/master/dist这里我们下载Bmob-1.7.1.min.jsBmob.initialize("xxx", "xxxx"); *// 请根据实际情况替换*我们去控制台看下可以看到，很简单就实现了用户openid写入到表中第二步：我们实现把每次成绩写写入到表中继续command+I：对AI说我想把游戏成绩保存到Bmob，这个是保存语法const query = Bmob.Query('tableName'); query.set("name","Bmob") query.set("cover","后端云") query.save().then(res => { console.log(res) }).catch(err => { console.log(err) })可以看到他不但写好了代码，还增加了中文注释。我们运行看下表里效果这样就实现了每个用户进来，他的用户信息保存在用户表，游戏成绩都保存到表里。项目代码实时提交源码地址：https://github.com/magic007/PlaneBattleMiniGame经过2天，微信的审核结果出来，说游戏内容太简单，让增加背景，关卡。 看来微信官方这个Demo还是还简单， 我们下一章节让AI 写关卡功能加背景切换。

零游戏基础Cursor制作你人生中的第一款手游(1)准备工作 最近想上线一款微信小游戏，然后由于之前没有过任何游戏开发上线经验， 这次把这个游戏的整个开发，上线过程分享给大家。发布上线，有手可能就行，开发没有游戏开发基础，完全是Cursor给我的勇气。Cursor 用了有几个月了，几乎对他的特性都比较了解，正好以此把整个过程来分享给大家。微信小游戏备案过程，目前已经打回2次了，我把整个过程分享给大家，给后面需要上线一款游戏的一些经验时间预算:争取是最快时间上线，目标是30天内给上线，中途微信会有各种审核，时间计算从注册打款验证开始。目标用户: 有一定网页编程基础，零游戏开发基础，但对制作微信小游戏感兴趣的用户。预期效果:掌握Cursor的基本使用方法了解微信小游戏开发流程了解微信小游戏上架过程完成一款不简单的微信小游戏：飞机大战（不简单是因为目前微信规则更新，如果游戏太简单无法给你备案审核）教程特色:零基础入门: 从Cursor安装到微信小游戏发布，全程保姆级教学。实战项目驱动: 以飞机大战游戏开发为主线，边学边做，快速上手。图文并茂: 结合代码示例和图片演示，清晰易懂。持续更新: 根据微信小游戏平台更新和用户反馈，不断优化教程内容。这个过程，我会图文并茂把完整的技巧、开发、调试、找bug，都分享出来，当然这是开发过程2次上线失败后面的过程，最开始没记录，所以前面的过程，我尽量去复现写到教程里面。Cursor 里面使用了大模型，其实现在大模型也跟人一样，有些偷懒，尽量不去扩散思考，也就是大家说的偷懒，当然这也许只是我们普通民众用的版本，官方为了节约算力设定了规则。一些需求明显他能实现，就是说我是AI无法做到某某事，这时候鼓励他，暗示他，说你之前已经做过，完成的很棒。再次说明问题，让他去尝试。去鼓励AI，越聪明的人，越不自信，AI也一样。这是目前设想的内容，内容核心主要讲开发上线过程第一部分：微信小游戏开发准备第二部分：Cursor游戏开发过程第三部分：微信小游戏发布第一步：注册https://mp.weixin.qq.com填写账号密码相关资料这一步需要打款验证，微信审核认证，个人30，企业300，我这里注册企业的微信团队已经收到你用于微信认证审核服务的转账款项：300.00元，订单号：17110034234316340765。第二步：登录完善小程序名称信息这里本来取的名字叫飞机驾驶员，微信官方认为名称太好记了，要前面加一个品牌名称或昵称经审核，你提交的材料不完整，请按下述指引补充材料：1.建议您修改公众号/小程序认证昵称；昵称广泛，不支持命名，需要修改昵称哦建议加上单位简称2.认证通过需电话核对信息，您预留的联系号码无法与您取得联系，请留意接听我司来电，或看到后联系我司客服提供有效联系方式；3.建议在一个工作日内完成处理，并留意接听电话，以加快审核，疑问请致电0755-36615555、0755-26224288转工号841、邮件联系wx@ebs.org.cn、关注公众号“众信验证服务中心”进行咨询，感谢支持！主体：元素(深圳)软件有限公司；请在2024-12-01之前提交。你还有3次修改的机会。点此修改名称资料因为只有三次，这里不能再敢取比较好记的名字了，因为再被微信打回来， 就只有一次改名机会，如果一次用完，可能前面300元就白交了。 这里我们在飞机大战前面加上素素，名称叫素素飞机大战项目代码实时提交源码地址：https://github.com/magic007/PlaneBattleMiniGame这样我们小程序的准备工作就完全做好了，从注册-付费，打款验证-名称打回-再修改，这里已经用掉5天，我们以一篇内容讲完，下一篇我们讲解要开发的内容，以及目前开发的进度

Serverless实战驾校小程序数据库设计连载一 从今天开始，我会文字直播开发这个驾校小程序整个流程。 1. 项目要求小程序端WEB管理后台时间在最短的时间内上线2. 项目功能 参考驾考宝典、主栏目分为科目一、科目四、满分学习、注销恢复、资格证，包含小车、客车、摩托车等，功能包含视频讲解、章节练习、模拟考试、错题、收藏等等。 支持支付、分享、提成、提现等3. 项目选型 由于要求最快时间内上线，我们小程序选择 Serverless架构。 这里使用以下技术产品小程序端：Bmob后端云+iviewVUE + Bmob后端云Bmob后端云，自带了支付，生成二维码等接口，这里集成可以快速上线。VUE 有丰富的后台模板，可以更快的做出管理后台。第一步：清晰了解需求 因为已经很清楚自己要做的是驾校答题小程序，这里就不做多余的介绍了。 设计部分，由于这个项目比较小，没有专门的设计师。 尽量参考行业老大：驾校一点通与驾考宝典。第二步：数据库设计 数据库参考其他驾考类小程序，优先把核心字段建立出来，尽量考虑周全， 不够后面再补。 这里注意的是，Serverless架构，主要适合做一些中小型应用，如果应用数据量很大， 尽量提前考虑分表。1. 数据表 目前第一阶段暂时考虑一下表题目表题目类别表（题形）错题表收藏表成绩表用户表用户表，由于Bmob系统自带了，我就不建立了。2. 数据库文档 由于使用Bmob后端云数据库，默认每条记录都带id、创建时间与更新时间，此数据表说明不带这2个字段。 题目表（question）| 名称 | 类型 | 描述 | | --------- | ------ | ------------------------------------------------------------ | | title | string | 题目名称 | | choseList | Array | 选择列表 [{"item":"选选一"},{"item":"选选二","isChose":true}] | | type | int | 类型 1.单选 2.多选 3.判断 | | pic | string | 图片地址 | | video | string | 视频地址 | | help | string | 帮助描述 | | bSubjects | int | 所属科目 1.科目一 2.科目四 | | bModels | int | 所属车型 1.小车 2.货车 3.客车 4.摩托车 | | bType | string | 所属类别 关联类别表 | 设计好数据表之后，做准备工作拿到小程序的 AppID填写到Bmob控制台，应用设置-》应用配置把上面所有想好建立好的数据表添加到数据库小程序开发工具新建一个空白项目，复制BmobSDK，到utils目录引入SDK，初始化。引入SDK，初始化。文档在这里[https://bmob.github.io/hydrogen-js-sdk//?id\=初始化](https://bmob.github.io/hydrogen-js-sdk//?id\=初始化)看最终效果如下。效果一：所写代码➕预览 效果二：数据表变化 这样我们就实现了，整个小程序开发的第一步，自动注册登陆，获取openid。 第一节就到这里，下一步就是操作业务表。由于知乎对md支持不太好，大家如果觉得格式差，可以点击浏览器阅读模式。