App Inventor智能手机编程与开发

admin管理员组

文章数量:1532656

2024年4月20日发(作者：)

广州市教育局”十二五“规划研究立项课题资助成果

AppInventor

智能手机编程与开发

图文教程

（电子简略版）

主编：吕超

编著：邓小华

等

广州市培正中学技术课程教程

2015年8月

1

使用说明

本书是广州市培正中学承担的2014年中央电教馆国家级课题《普通高中

校本课程的开发与应用的研究》及广州市教育局2014年十二五规划课题《高

中校本课程的开发与应用的研究》的研究成果之一。

麻省理工大学研究小组与谷歌（中国）公司于2014年正式在国内推出了

号称“不需要编程基础，会打字就会写程序”的AppInventor在线安卓手机编

程平台，用户只需要像拖拉积木一样把代码块拖入工作平台，输入必要的数字

或字符，开发平台就会自动把这些积木程序转化为智能手机可以识别和运行的

APK程序包！大大降低了手机编程的技术门槛。本书以AppInventor为基础，

尽量以简洁的文字和图片讲解主要操作，引导中学生通过模仿和改进来学习开

发自己的手机程序，促成“每个人都能开发自己的手机程序”愿望的实现！

AppInventor是一个很大程序上简化了用户编程基础的开发工具，不需要

记忆大量的程序代码、函数使人们能够将更多的时间和精力放在利用信息手段

解决实际问题的计算思想上，是一个很好的学习和应用的程序开发工具。但，

如果你是一个对计算机程序设计有兴趣、有天赋的高手，那么，更为规范的编

程平台，如C、C++、.NET、PHP等高级语言与开发平台会让你的想法实现得更

灵活、更强大！

学习的初期或许有人会觉得痛苦的，但学习过程中的喜悦同样是吸引人

的，特别是你花费了很长时间都没有解决的问题突然得到解决，那种幸福感和

满足感会让你欲拔不能！

现在开始写你自己的程序，让大家都喜欢你的程序吧！

邓小华

2015年9月2日

2

目录

序

第一章了解AppInventor2(AI2)................................邓小华

第二章AI编程基础.............................................邓小华

1

4

第一节注册与登录.....................................................4

第二节开发界面简介...................................................6

第三节第一个程序：猜数字............................................9

第四节安装PC端安卓模拟器...........................................15

第三章初级程序开发入门

22

28

32

37

例程1：会叫的青蛙............................................戚宇辰

例程2：生成指定个数的随机数..................................邓小华

例程3：钞票我来了....................................邓小华、李煜熙

例程4：10以内的加减法程序....................................邓小华

第四章中级进阶

例程1：打地鼠游戏.....................................张思涵、蔡敏灵40

作业

3节课后完成开发任务，10月7日前提交

设计、开发一个程序，达到以下最低技术要求：

1、3个屏幕以上；第一屏介绍程序功能，第2，3屏实现对应功能

2、使用到上述教程中的全部组件（如：标签、按钮、图片、布局、时钟），能够实现一

个赛事的程序功能。

3、填写程序开发规划表（第3次课发）

4、提交程序源代码文件（导出AIA文件上交）

1

第一章了解AppInventor2(AI2)

智能手机已经普及到几乎每一个人，之所以称之为智能手机是因为在手机的内部集成了

很多的传感器，并通过程序控制传感器做到一些单纯机械或电子设备不能实现的功能。安卓

系统是目前全球最普遍的开源手机系统平台，因此，只要遵循一定的程序规则就可以给它写

程序，利用手机的传感器进行程序开发和使用。

但是，一涉及到复杂的各种语言代码，许多人都会摇头兼叹气......

于是，一些创造家们就开始利用他们的高技术开发出一些不需要写代码的程序开发平台

来满足让每一个人都能写程序的愿望，AppInventor就是智能手机编程平台中不需要懂得什

么代码就能开发出手机程序的技术平台。

引用MIT麻省理工大学开发团队在微博中的定义是：【AppInventor是一款免费在线

移动应用(app)开发平台，基于所見即所得(WYSIWYG)的概念。老师们，同学们无需任何

编程基础，在可视化编程的界面下，通过模块拼接的方式(类似搭积木的形式)，制作app,并

能在手机上运行。】

这一“在线移动应用开发平台”指的是直接使用浏览器进行在线开发，官方推荐使用谷

歌的Chrome浏览器或火狐浏览器进行在线开发，个人推荐使用Chrome浏览器，问题少些。

图

1-1AppInventor

项目主导者HalAbelson教授与李伟华同学的合影

为了普及与推广AI这一工具平台，麻省理工大学的AI团队在中国多个省份开展了工作

坊培训活动，许多大、中、小学教育工作者参加了AI培训活动

2

为了吸引更多的青少年朋友了解和参与到AI平台手机开发的队伍中来，由麻省理工大

学、谷歌（中国）、广州市教育局联合举办了2015年第二届全国AppInventor应用开发全

国中学生挑战赛，从官方微博中截取比赛信息如下：

大赛主页:/GAIC2015/

大赛背景:

AppInventor由MIT（麻省理工学院）开发，是一款免费的在线开发工具。同学们无

需任何编程基础，在可视化编程界面下，通过模块拼接的方式，类似搭积木的形式，制作

Android手机程序，并可以在手机上运行。

大赛面向在校高年级小学生、初中生和高中生，分为初中组（含小学高年级）和高中组，

在AppInventor平台上锻炼计算思维，把创新的点子动手实践吧。独立制作一款手机APP？

你也可以！不用写代码，编程可以像搭积木一样简单又好玩！只要你有创意，就可以来挑战！

参赛对象:

在挑战赛提交截止日当天（2015年10月15日）须是在校小学五～六年级或初中生或

者高中生；小学五～六年级和在校初中生纳入初中组；在校高中生为高中组；

个人或团队（团队人数不可超过两人）均可参加挑战赛，每人限参加一个团队，不得

跨组别组队；





参赛者仅可提交一个参赛方案

参赛者必须获得家长或合法监护人的同意才能参加本次挑战赛

更多参赛资格，请访问比赛规则/GAIC2015/

评审标准:

创新性（30%）用户体验（40%）技术复杂性（30%）

大赛奖项:

大赛分为初中组（含小学5～6年级）和高中组，各组别的奖项为：

特等奖（1名）：获奖学生获得一部Android智能手机，获奖学生所在学校获赠书籍100

本

一等奖（2名）：获奖学生获得一部Android平板电脑，获奖学生所在学校获赠书籍50本

二等奖（7名）：获奖学生获得一个电子阅读器

三等奖（30名）：获奖学生获得一个U盘

参与奖（按提交要求成功提交AppInventor应用程序）：Android纪念品

优秀组织奖：针对参赛者指导老师的奖项，获奖教师可获得奖牌一枚

3

大赛日程（2015年):

现在～10月15日：报名及提交参赛作品

10月底／11月初：公布晋级决赛名单

11月底／12月初：决赛现场评比，同时完成颁奖典礼

国内资源推荐：

国内最早引入AI，也是最早、最全中文教程的老巫婆博客：/jcjzhl

这是一个资料与资源非常齐全的AI教程博客，它最早将AI官方认可的教程全部翻译成

中文，免费放置于博客中供爱好者学习，并且将不断探索和实践的例子也做成图文教程共享

出来，是AI爱好者学习的最佳网站！

国内AI服务器：广州电教馆AI服务器/

图

1-3

广州市电教馆搭建的国内

AI

第一个服务器

广州市电教馆是获得麻省理工大学AI团队授权与技术支持的国内第一个官方事业单

位，在2015年AI国际研讨大会上，AI团队曾解释，因为项目技术人员时间与精力问题，短

期内，国内正式的AI服务器将只有广州市电教馆，而此服务器的性能与电教馆自身技术支

持力量也应该可以应付短期内国内AI爱好者们对AI开发平台使用的需求。

对AI感兴趣的同学们、朋友们可以进行这个网站注册自己的帐号体验手机开发的乐趣。

4

第二章

导读：在本章中，我们将学习以下内容：







AI编程基础

以个人邮箱在线注册国内AI开发网站帐号；

AI2开发界面介绍及PC端的手机模拟器安装；

利用AI在线开发平台编写一个“猜数字”的小游戏；

第一节注册AI开发帐号

使用AI平台推荐的谷歌Chrome浏览器或火狐FireFox浏览器打开网址：

，进入AI的登录界面：

图2-1国内首个AI在线开发服务器首页

广州市的一名编程高手已经将QQ帐号登录集成进了本服务器中，不想另外注册的同学

可以使用QQ帐号登录。如果注重帐号安全，则可以点击“登陆”按钮下的“申请新帐号/

重设密码”链接进入注册界面（图2-2）：

图2-2申请/修改帐号页面

5

注册操作非常简单，只需要输入自己一个可用邮箱，点击“发送链接”按钮，大约1分钟

后登陆刚才输入的注册邮箱，就会收到一封确认邮件，内容大致如下：

图2-3注册确认邮件截图

将邮件中的链接网址复制到浏览器地址栏中打开，按照个人的喜好设定在

上的个人帐号信息，确认后，就可以在此网站上使用刚才注册使用的信息登陆了！

操作小结：

1、进入网站，点击“注册新帐号”链接进入注册页面；

2、输入个人可用邮箱，收取注册确认邮件，获取注册链接；

3、完善个人信息（用户名、登陆密码等），完成注册；

4、回网站首页登陆！

6

第2节

要点导读：





AppInventor2开发界面介绍

下载和安装AI助手

开发界面与各组件介绍

图2-4第一次进入AI开发界面

一、选择平台语种

如果你想改变页面显示的语种，你可以点击右上角语言项，选择你喜欢的语种：

二、创建新的项目

点击“新建项目”，会弹出以下窗口：

图2-5新建项目窗口

7

注意！AI开发平台的项目名称规定只能输入字母、数字及下划线，不支持中文！

我们输入一个易记、易分辨的项目名称，如：sample_01；确定后，页面自动转入组件设计

界面：

组件面板工作面板组件列表组件属性

图2-6

三、功能区说明：

组件设计界面

组件面板区：在此区域上可以选择编程所需要的组件（如：闹钟、按钮、图像、声音等），

通过拖放的方式放置到工作面板上；

工作面板区：显示界面效果，容纳各种可见及不可见组件；但由于各种手机屏幕像素不

一致，这里所见的效果并不是手机上显示的效果，通常需要通过布局组件或其它方式实

现最终界面一致；

组件列表区：此区域显示的是使用到的组件名称列表；

组件属性区：显示当前选择的组件的属性内容，可作具体调整；

组件库主要有：用户界面、界面布局、多媒体、绘图动画、传感器、社交应用、数据

存储、通信连接、乐高机器人共9大类，具体组件如图2-7所示：

8

图2-7九大类组件库列表

9

第三节“猜数字”！我的第一个手机程序

接下来，我们就通过编写“猜数字”的手机小游戏来看看怎么使用AI来开发手机程序吧！

“猜数字”程序功能描述：

这是一个手机数字游戏，程序运行后会生成一个100以内的随机整数，用户通过输入

猜测的数字，通过程序的提示来修改数字大小，通过多次输入后确定正确的数字，输入次

数越少，猜测数字的准确性越高。是一个机率与数学思维结合的小游戏。

任何程序开发都包含两大内容：用户界面与后台处理程序。通常，我们都要先设计给

用户的界面，再完善后台处理程序。“猜数字”程序的屏幕设计如下：

图2-8

程序功能描述：

第一屏组件设计图2-9第二屏组件设计

1、用户启动程序后，在第一页屏幕中显示游戏规则，点击“开始”按钮进入第二页；

2、点击“数字，来吧！”按钮后，程序将自动生成一个随机数字，用户可以在输入框中输入

推测的数字，点击确定后，结果提示栏会对每次输入的数字作出“大了”、“小了”或“猜对

了”的提示；

3、为了避免有的人一直猜不中随机数，设置了一个“查看随机数”按钮，能显示这个随机数。

要试试程序的效果，请从/s/1c0ubqA8下载“猜数字”APK（1.4MB）

及猜数字aia源码文件（5.6KB，可直接导入AI在线开发平台）。

10

开发步骤：

第一部分：组件设计（界面设计）

首先，构思好这个程序在手机上的显示界面，如图2-8，2-9；第一个屏幕旋转了一个水

平布局组件，一个标签显示提示文字，一个按钮供用户确认进入正式界面，属性设置如下：

序号

1

2

组件名称

垂直布局

标签

所属功能区

布局界面

用户界面

默认

背景颜色：绿色

字号：16

宽度：300像素

文本：“猜数字”游戏规则游

戏开始后，在输入框输入一个数字，根

据提示修正数字大小，直到正确为止，

猜的次数越少，猜数字的能力越强！

文本：开始游戏

属性

3

按钮用户界面

其次，实现当用户点击“开始游戏”后，程序进入下一屏幕的操作：

图2-10增加屏幕的操作按钮

在浏览器开发页面的左上角，找到“增加屏幕”的按钮，点击它，就会打开新的屏幕。

注意：

AI2没有设定默认启动界面的功能，程序执行的首页面是当前编译的页面。

因此，当所有程序编写完毕，要记得手动把屏幕点击回到你设定的第一个页面，否则，

它就会为用户显示当前屏幕内容。当然，这个“漏洞”对于检查程序效果来说是好事。

然后，我们在第2屏上放置以下内容：

序号

1

2

3

4

5

6

7

组件名称

标签1

按钮1

标签2

水平布局

文本输入框1

按钮2

按钮3

所属功能区

用户界面

用户界面

用户界面

布局界面

用户界面

用户界面

用户界面

组件属性

文本：请点击下面按钮生成随机数。

文本：数字，来吧!

文本：结果提示：

默认

提示：请输入您的“心水”数字

文本：确定

文本：查看随机数

11

第二部分：逻辑设计

上一部分的操作是用户看见的界面设计，一个良好的界面设计是吸引用户的关键！但再

漂亮的外观设计，也要有对应的后台程序代码来实现相对的功能，在AppInventor中，不需

要输入C语言或其它语言的代码，只需要在功能区拖动对应的代码模块就行了！这对于不想

深入学习编程，又想写出自己的手机程序的人来说是一个很实用的工具。

图2-11逻辑设计操作按钮

设计好界面后，点击右上角的“逻辑设计”，进入图形代码模块界面，

图2-11代码模块区图2-12代码图形显示示意

在逻辑设计界面中，左边是代码模块，当鼠标点击“控制、逻辑…“等任一模块时，就会

在旁边显示具体的代码图形块，如图2-12所示。

12

图2-13工作面板区（图形程序放置区）

工作面板区左下角的这个图示，实时提醒设计者程序是否正确。

工作面板右下角的垃圾桶图标，用来将错误的、不要的图形代码拖放到此删除。

（也可以在要删除的代码块上点击右键，选择”删除代码块“）

试一试：根据形状及颜色，请将以下图形代码放置在各自屏幕的逻辑设计界面中

提示：根据代码块颜色到对应颜色的模块中寻找！形状对应才能自动粘附到主程序块中。

第一屏逻辑代码图：

图2-14第一屏代码块

第二屏逻辑代码图：

13

图2-15第二屏游戏主屏代码块（1）

图2-16第二屏游戏主屏代码块（2）

当上面的代码块都已经放好，请检查一下工作面板左下方的

上面的两个数字都是“0”，说明代码的逻辑没有问题，可以进行测试了！

14

，如果

关键代码讲解：

1、生成随机数；在”数学“模块中，由电脑随机获得

一个整数，整数的范围可以通过修改代码块中的数字来改变。

2、变量的使用：与变量相关的代码块都在”变量“模

块中，每个变量在程序中都是唯一的，这个唯一性通过变量名来确定（如var1，也可

以是bianliang1），变量名的起名应该简单易懂，让人一看就知道这个变量有什么用。

3、代码解释：

*

设定一个变量

var1,

程序首次运行时

把它的值设为数字

0

；

*

当按钮

1

被点击时，把

var1

设为

0

；

*

生成一个

1~100

范围内的整数，并将

它赋值给变量

var1;

注：设

……

为

…….

是赋值语句



只允许用户输入数字



将变量值用按钮的文本显示出来

合并文本代码块，将2个以上文本合并为1个文本；

组件属性”启用“，使用“逻辑“中的”是、否“来控制；

15

第4节手机程序调试的方法

方法1：在PC上安装安卓手机模拟器

这个方法最大的好处是：进入模拟手机界面后，如果在平台上修改了界面或程序，在

模拟界面上能够实时反映出来，不需要关掉模拟手机界面哦！

一般情况下，我们是先在电脑上设计好界面和逻辑代码，最方便的还是在电脑上测试我

们的程序效果，所以，我们要安装AI的PC模拟器，首先我们要下载安装一个最新的AI开

发助手，它的文件名通常为MIT_App_Inventor_Tools_2.***.exe，可以百度搜索下载。也可以

打开我的百度网盘下载链接获取（/s/1jG7xMYi）：

下载的安装包：

1、双击运行安装包：

，安装PC端的安卓手机模拟器操作步骤如下：

同意其安全及安装请求：

16

图2-17安装AI助手

一路点击“next”、“Agree”，记得开放给所有用户使用：

这一步，记得勾选“DesktopIcon”，要不安装后都不知道支哪里打开这个模拟器程序！

17

图2-19勾选生成桌面图标

通常使用默认的安装位置，然后连续点击”next”，直到安装完成。

18

安装完成后，在桌面上应该有一个：图标，双击打开，就在windows系统中运

行了AI助手，这时会打开一个黑黑的DOS窗口，它提示按键盘上的Ctrl+C可以退出助手：

图2-20AI助手后台运行窗口

经测试，可以直接将已经安装好的AI伴侣程序所在的Appinventor文件夹复制到

C:Programfiles文件夹下，把到桌面生成一个快捷方式，也能达到上述安装的

效果！

这时，回到我们的在线开发平台，点击左上角”连接“—”模拟器“，就能够自行与AI助手

连接，进行模拟操作；

19

图2-21用AI助手模拟运行程序

图2-22模拟器进行调试的等待画面

提示：如果测试中遇到问题或要退出模拟测试，同样点击”连接“—”重置连接“就可以关闭当

前程序模拟，如图2-21紫色圈示。

图2-23AI助手安装不成功的画面

初次运行AI助手，可能会遇到以下提示”过期“的情况，通常是因为MIT对AI助手进行

了更新，有更完整和更真实的仿真功能，必须更新后才能正常使用AI模拟功能；

20

注意：当浏览器弹出下面的对话框时，一定要点击“确定”！不然不能正常使用模拟

器！

图2-24AI助手更新提示

点击“确认”后，浏览器自动下载升级组件，如下图所示：

图2-25AI助手更新进度提示

下载完成后会出现“升级完成”提示，这时不要点击这个按钮，转看模拟手机屏幕:

图2-26模拟器上也要进行更新确认

在模拟的手机屏幕上依次点击”OK”，“Install”，，更新模拟手机端的AI助手；直到

模拟手机提示“applicationinstalled”以及Open，Done两个按钮，

21

点击“DONE”，在浏览器编程界面点击“升级完成”；

然后在浏览器的平台界面点击“连接”--“重置连接”；完成整个AI升级操作。

要测试程序，就要再点击“连接”--”模拟器“，再来一次2分钟的等待就可以了！

注意：使用AI助手在电脑端进行模拟安卓手机程序的调试只需要运行一次模拟器，后

续更改了程序的界面或代码，甚至打开另一个项目都不需要重置模拟器，所有修改即时在模

拟器中体现的！除非长时间不操作后，模拟器可能断开连接，才需要重置连接，再次运行模

拟器。

22

重要提示：

初学者如果不细心的话，通常会在AI助手更新的步骤中出问题，导致后续学习不能进

行！因此，安装好AI助手后，首次运行时要认真看清楚弹出的提示框，按提示操作。

如果不断遇到”需要更新“的操作，一般是因为手机模拟器端没有同时更新，这时，注意

观察左边白色提示框的提示内容，及时在右边手机模拟端安装和更新；一次更新可能不成功，

重置连接后再进行模拟器模拟操作，只要细心一点，2-3次尝试后就能够成功。

二、方法2：手机实时调试（AI伴侣）

据说，可以通过USB数据线连接电脑，然后在手机上安装AI伴侣程序就可以使用第一

个选项进行实时调试，但作者尝试了两台联想手机：安卓4.4及5.0系统，可以安装AI伴侣，

但系统却以签名不对的提示不允许升级操作，而不能升级最新的AI伴侣就不能实时调试，

所以一直未能成功。不知其它品牌的手机系统是否可行。

三、

最麻烦的方法3

：

使用二维码扫描下载安装或下载到电脑再复制到手机上安装进行调试

这个方法比较麻烦，只有当程序涉及到多媒体内容（声音、动画、视频等）及传感器应

用时才使用，具备WIFI条件时可以使用。

23

初级程序开发入门

AppInventor是一个容易使用的在线开发工具，我们通过几个简单程序来熟悉开发界面

和相关组件。

请注意：依照图文教程开发出可以执行的手机程序只是开始，你需要理解程序的过程和

原理后开发出自己的程序才是学会学习的精髓！

第一个例程：“会叫的青蛙”

作者：戚宇辰（初一级）

一、程序功能描述：

启动程序后，当用户点击屏幕上的青蛙图片（实际为按钮）就会听见青蛙发出“呱”的一

声，可以用于幼儿认识动物与其叫声的程序开发。

二、程序屏幕设计：

图

3-1

用户界面设计

序号

1

2

3

功能区

用户接口

用户接口

多媒体

组件名称

标签1

按钮

1

音效

1

组件属性

文本：我是会叫的青蛙

图像：青蛙

.jpg

宽度：

200

高度：

300

源文件：青蛙

.wav

表3-1使用组件列表

24

三、代码设计：

1、设计好界面后，点击右上角的“逻辑设计”，

口。

进入图形代码模块接

2、点击左边模块中的“按钮1”，在“工作面板”上选择第一个按钮点击动作代码模块：

图3-2代码块选择

3、在模块面板点击“音效1”，在出现的工作面板上选择第二个“播放”代码模块，

25

4、将音效播放代码模块拖到右边工作区的按钮点击代码模块中：

当上面的代码块都已经放好，请检查一下工作面板左下方的

如果上面的两个数字都是“0”，说明代码的逻辑没有问题，然后，我们就可以点击左上方

“连接”--“模拟器”进行测试了！

26

测试结果：没有声音！！

怎么会这样！！？？

原来，由于windows系统与安卓系统的跨平台技术等原因，AI的PC模拟器是不支持声

音、媒体等音效的，因此，要测试多媒体效果，还是需要我们把程序下载到手机进行安装和

测试。

点击屏幕上方：“打包APK”，可以看到2个选项，我们可以选择把服务器生成的APK

程序以扫描二维码的形式下载安装，或者直接下载到电脑中再通过手机管理程序进行安装，

如果有WIFI的话，建议使用第一种方法，否则使用第二种方法。

27

入门程序第2例：生成指定个数的随机数

作者：邓小华

学习要点：

1、使用变量储存数据；

2、循环结构的使用；

一、例程说明：

在此例中，我们使用一个叫“循环结构”的算法来生成指定个数的随机数，所谓循环就

是重复做同样的一些事。循环有两种：一种是有限循环，一种是无限循环；有限循环是有条

件的循环，一旦达到条件就会自动跳出循环；而无限循环则是一直重复某一个或一些动作，

没有结束。

比如我们画一个正方形，是先画一条指定长度的线段，然后转90度，再画第2条线段，

再转90度......如此反复4次，如果以一个动作一个动作来写代码，我们要写7，8条语句才

能完成，但如果用循环，我们可以用一半的语句就能完成！下面，我们一起来写一个简单的

生成5个100以内的随机数的手机程序：

界面设计很简单：在“用户界面”放入一个标签，一个按钮：

标签除了显示提示之外，也可以显示生成的随机数的结果，当然，也可以使用按钮的文

字来显示，看个人的习惯，但不建议使用文本输入框来显示。

它的代码块可以这样实现：

28

二、主要代码讲解：

（一）变量使用

1、定义变量并给变量赋值：

初始化的动作通常放在逻辑设计的最前面，这里设定一个名为“i”的全局变量（注：

全局变量是指在整个程序运行过程中都有效的变量，局部变量则只是在某一个动作中有效，

在其它动作中无效。），并设定它的初始值是数字“1”（也可以是字符或其它类型的内容，

平台会自动识别和定义）。另外说一下，“i”是在所有高级编程语言中用得最多的变量名。

通常，我们可以设定很多全局变量或局部变量，但变量用得越多，消耗的机器内存越大，

所以，最好尽量使用尽可能少的变量来运行程序。

2、获取变量值：

在变量模块中选择：

3、变量自身增加1：

变量i都加1；通过对i大小的判断来决定是否跳出循环；

，就可以使用变量中存储的内容了。

，在此程序中，每一次循环，

（二）循环语句

//

循环执行的条件是变量i≤5，一旦大于5则结束循环

!

//

变量

i

自身加

1

运算；

//用标签5显示随机数结

果，合并本身内容及新

的随机数。

29

循环的工作流程是这样的：

循环开始

是否

i

≤5

是

否

生成随机数并显示

i=i+1

循环结束

在此程序中，我们的目的是要获得5个随机数，而随机数每次只能生成1个，所以要循

环5次才能生成5个随机数；所以，我们用变量i来作循环的计数器：每生成1个随机数，

计数器（变量i）就加1，当i等于5的时候说明已经获得5个随机数，则结束循环；程序自

动执行下一段代码。

如果想让这个循环无限工作下去，我们只需要把条件i≤5替换成:1<2这种类似的永远

成立的逻辑条件就可以了。不过，如果一个程序只是单纯的无限生成随机数而没有其它内容，

那这个作者以后的程序作品可能都没有人会去下载了！所以，请记住：

程序要吸引人，必须考虑别人都用得到的功能！

30

四、强化程序功能的改进

如果我们要写一个程序实现两个控制：1、可以生成指定数目的随机数；2、可以指定

随机数的最大值；该怎么做呢？

1、界面设计参考：

2、代码块参考：

31

入门程序第3例：抢钞票手速挑战

作者：邓小华、李煜熙

一、程序功能描述：

1.用户启动程序后，在第一页屏幕中显示游戏规则，点击“开始游戏”按钮进入第二页；

2.点击“图片”按钮，每点击一次，你的钱数将会增加100元，点的次数越多，得到的

钱就越多。

3.30秒内点击次数超过180次的将显示奖励话语：哇！你是抢钱快手！

二、开发步骤：

1、第一屏组件设计：

在第一屏“Screen1”里放入2个标签，在两个标签下再放1个按钮组件，

属性设置如下，效果图见图3-5：：

序号

1

功能区

用户界面

组件名称

标签1背景颜色：绿色

组件属性

字号：14

文本对齐：居中文本：“钞票我来了”游戏规则

2

用户界面标签

2

宽度：

300

高度：

200

文本：游戏开始后，“钞票我来了”游戏规则游戏

开始后，在限定的时间内狂点钞票，看看谁的钞票最

多。点的越多，说明你的钱越多！

3

用户界面按钮

1

文本：游戏开始

图

3-5

第一屏效果图

32

2、第二屏组件设计；

添加屏幕，默认屏幕名称为“Screen2”，改名为“GO”，在用户界

面里找出

“文本输入框”，在里面写上，接着在用户界面

拖出“按钮”，在按钮的组件属性栏的“图像”属性中点击“上传文件”按钮，

将钞票图片作为按钮来响应后续的点击动作，使用的组件如下表所示：

序号

功能区

用户界面

用户界面

组件名称

组件属性

1

2

文本输文本：点击下面的钞票，开始游戏

入框1

按钮1图像：钞票图片

3

4

5

6

用户界面

用户界面

传感器

用户界面

标签1

标签2

文本：钱数:30

文本：（清空）

计时器1启用计时：false

计时间隔：1000

按钮2文本：游戏开始

完成的效果图如下所示：

33

3、逻辑设计：



在屏幕的左上角“Screen“位置点击回到第一屏，





再点击右上角的“逻辑设计”

在左边的“模块”列表中，点击，

34





选择并放入：

回到“模块”面板，点击“控制”，选择“打开屏幕-”：



从“模块”找到并放入刚才“屏幕名称”后，在“”中输

入第二屏的名称“GO”；

切换到第二屏“GO”的逻辑设计，按下图编程：

代码块解释

//设置两个全局变量，一个记录点击次数，一个记录秒数；

//点击“开始抢”按钮才开始计时；

//用标签1显示点击次数，开始时清零；

//两个全局变量确保清零

//游戏开始后，时间结束才能重新开始

//点一次加100数值

//用标签1显示点击次数，是总金额除以100

35

36

//计时变量每秒钟增加1；

//用标签2显示计时数值；

//计时达到30秒进行动作；

//停止计时，并停止钞票按钮响应；

//判断手速是否达到180次；

//达到显示奖励语句；

//不达显示总金额；

//“重新开始”按钮生效；

挑战：

30秒内，我的手速达到170下，你的有多少呢？

试一试：按鼠标应该比屏幕点击速度快，写好程序下载到手机上试试吧！

排雷解题：

这个程序还有个小问题，如果重新开始，计时是从30秒开始算起，限时判断语句将会

完全失效！请你找出相关语句并修改，让它在大于或等于30秒时能够正确动作吧！

37

入门例程四：10以内的加、减法学习程序

在本节内容中，我们将开发一个给小学一年级以下的小朋友使用的10以内的加、减法

学习程序，通过本例子的学习，我们将学习到以下要点：







增加及进入下一个屏幕(Screen)；

利用循环生成2个随机函数；

自定义和调用过程函数；

第一部分：界面设计

一、首页设计：

如果想界面变得更吸引小朋友，可以增加背景图片或在按钮的属性中使用合适的图片来

代替常规按钮的样子！这个美化工作就交给大家自己完成了。

二、加法练习界面设计

1、增加一个屏幕

2、使用默认的屏幕名称或输入较明显的区别名称，如Screen_jiafa：

38

3、放入组件如下：

4、修改相关字体大小、文本内容，结果如下：

三、减法练习界面设计

减法练习的界面可以使用与加法练习界面相同的布局，但为了区别两种法则，建议使

用一些明显的提示在不同的界面，如加法界面使用一张加法卡通图片，而减法界面则是另

一张图片。

提醒：

由于是随机出题，有可能会出现第一个随机数比第二个随机数要小的情况，如生成

“4-6”的情况，由于小学一年级还没有学习“负数”的概念，所以这一题会让小学生产生

疑惑，因此，要在产生2个随机数后，在用标签显示之前要对两个数的大小进行比较，并

确定把大的随机数放在第一个数字的位置上，小的随机数放在第二个数字的位置，确保练

习内容在对应的学习水平上。

39

四、程序功能拓展练习：

1、增加用户自定义出题范围；用户可以在首页输入出题范围多大（默认是：10）；

2、在屏幕2、3中增加显示正确率提示；

3、增加每题的“正确”、“错误”语音提示及语音开关功能；

4、增加乘、除法运算功能；

40

手机“打地鼠”程序

教程整理：培正中学初二级张思涵、蔡敏灵

打地鼠这款街机游戏，大家应该都不陌生吧？今天我们就来学习用AppInventor制作

一个手机上的“打地鼠”游戏。

一、本程序学习使用的主要组件有：

1、图像精灵组件：具有触感的可移动图像；

2、画布组件：容纳图像精灵的平台；

3、计时器组件：用来计时，控制图像精灵移动频率；

4、音效组件：在此游戏里，用于击中地鼠时产生震动；

5、按钮组件：在此游戏里，用于开始新游戏；

6、定义过程：定义过程用来实现一系列的指令，可以重复调用，如本游戏中的“地鼠移动”；

7、产生随机数；

8、使用加法块（+）及减法块（-）

二、程序实现效果：

1、一只地鼠随机出现在屏幕上，每秒钟移动一次；

2、如果手指触碰到地鼠，则让设备震动，显示命中数加1，

同时地鼠随机移动到一个新位置；没有点中地鼠，则显

示失败数加1；

3、点击“重新开始”按钮，则命中和失败的计数归零，游戏

重新开始。

41

首先，登录AppInventor开发平台（中文版），新建一个项目，命名为“MoleMash”，

在右边的属性栏中将屏幕标题设为“打地鼠”；

然后，上网下载一张喜欢的地鼠图片，上传到组件列表下面的“素材”；

注意：素材文件大小必须控制尽可能小，不然程序运行会很慢，且占用大量手机内存！

通常可以用QQ截图来保存需要的图片，这样的文件体积会相对小一些。

三、组件设计

1、在组件面板中找到“绘图动画”，再找到“画布”，拖入预览窗口，采用其默认名称“画

布1”，设置宽度为充满，即与屏幕等宽，设置高度为300像素；

（画布的作用：作为图像精灵的容器，就是限制地鼠的活动范围）

检查一下，你的屏幕是像上面这样的吗？如果是，那么恭喜你，你已经成功地完成

了第一步！也证明你拥有完成的能力！下面我们就加快速度吧

~

42

2、同样在“绘图动画”中找到“图像精灵”，将“图像精灵”组件拖入到“画布1”中的

任何位置，在组件列表底部单击重命名，改名为“地鼠”，设置其图片属性为之前上传

的地鼠图片。（示例为：）

（图像精灵：作为用户点击的目标，就是地鼠）

3、在组件面板中找到“用户界面”的“按钮”，拖动“按钮”放在“画布1”的下面，改

名为“重新开始按钮”，并设置其文本为“重新开始”；

（重新开始按钮：重新设置得分）

4、在组件面板中找到“传感器”中的“计时器”，拖入，它将落在预览窗口下方的“非可

视组件”区域；

（计时器：控制地鼠的移动频率）

5、在组件面板中找到“多媒体”中的“音效”，拖入，它也将落在“非可视组件”区域。

（音效：当地鼠被击中时震动或发出响声）

6、在组件面板中找到“界面布局”中的“水平布局”拖动组件放在“重新开始”按钮的下

方，保留“水平布局1”的默认名称；

（水平布局1：放置“命中”和“命中数量”两个标签）

7、在组件面板中找到“用户界面”中拖动两个“标签”组件到水平布局1”中；

将左侧标签改名为“命中”，设置其文本为“命中：”（确保冒号后有一个空格）；将

右侧标签改名为“命中数量”，设置其文本为“0”；

（两个标签：分别显示“命中”和“命中数量”）

8、拖入第二个“水平布局”将其放在“水平布局1”下面，将两个

标签拖放在“水平布局2”中，左侧标签改名为“失误”，设置

其文本为“失误：”（确保冒号后有一个空格），右侧标签改

名为“失误数量”，设置其文本为“0”。

（水平布局2：放置“失误”和“失误数量”两个标签；

两个标签：分别显示“失误”和“失误数量”）

43

现在，你的屏幕是不是这样的呢？（地鼠的位置和图片可能不同）

现在所有的组件都大功告成了，让我们喘口气，将屏幕切换到逻辑设计版，然后进入下

一步：

四、逻辑设计（为组件添加行为）

还记得刚刚说过的我们最终要达到的效果吗？看起来是不是很复杂？别担心，我们一步

一步来——

第一步：地鼠随机位置出现的实现

地鼠移动的内在原理有些繁琐，请耐心地看完，这对我们移动地鼠来说很关键。

要理解地鼠如何移动，需要了解安卓的图形定位机制:

(0,0)X

Y

画布（以及屏幕）可以看作是由x（水平）坐标和y（垂直）坐标织成的网格，就像平

面直角坐标系（如果你知道的话），只不过，数学中的直角坐标系的原点（0，0）是在左下

44

角，但是在手机中，零点坐标为（0,0）是在左上角！！x坐标向右为增大，y坐标向下为

增大。

一个“图像精灵”的x、y属性表示它距离左上角的位置，因此当地鼠位于屏幕左上角

时，他的x和y值都是0。

为了将地鼠的移动限制在屏幕之内，（要不它要确定x和y的最大值，这要用到地鼠和

画布的宽度及高度属性。（地鼠的宽度和高度属性值与上传的图片的大小相同，而在创建画

布1时，你设置的高度是300像素，宽度为“充满”，即等于屏幕的宽度）如果地鼠图片的

宽度是36像素，画布宽度是200像素，那么地鼠的x坐标最低可以为0（靠近屏幕左侧边

缘），而最大为164（200-36，或画布宽度-地鼠宽度），这样才能保证地鼠不超出屏幕的

右侧边缘。同样，地鼠顶部的y坐标范围可从0到画布高度-地鼠高度。

你可能会想，假如AppInventor中有一个内置过程，可以自动将图像精灵移动到屏幕上

的某个随机位置，那岂不是很好？可惜没有，不过我们可以自己来创建一个过程！（就叫地

鼠移动吧）就像内置过程一样，自己创建的过程会显示在“过程”抽屉中，需要时可以随时

调用它。

如果你看懂了上面的解释，那么做起来应该不难，如果没有理解得很清楚，那也没关系，

按照下面的图从对应颜色的抽屉找出相应的块吧~

已经完成了“地鼠移动“的过程，现在该调用它了。如右图

所示：

1、点击Screen1抽屉，并拖出“当screen1初始化”块；

2、单击“过程’抽屉，你会看到一个“调用地鼠移动”块，

把它拖入“当

screen1

初始化”块。

（太神奇了！你自己创建了一个新的过程代码块，不是吗

?!

）

45

小知识：过程抽象

过程抽象是计算机科学的重要手段之一，就是命名然后调用一组指令（如

这里的地鼠移动）。之所以叫做“抽象”，是因为过程的调用者（在实际项目

中，调用者很有可能不是过程的开发者）只需要知道过程的功能（如移动地鼠），

而不需要知道过程的实现方法（生成两个随机整数）。就像在实际生活中，不

同的工程师设计出汽车的不同部件，没有人了解所有的细节，而司机只需要如

何使用（例如，踩下制动踏板把车停下来），而无需了解如何制造这些接口。

如果没有过程抽象，不可能实现那些大型程序，因为它们的代码量太大，

对个人来说是力所不及的。

与复制和粘贴代码相比，过程抽象的优势在于：

1、由于过程的代码独立于其它部分的程序，因此更易于对过程的测试；

2、如果代码中有错误，只需要对局部进行修改；

3、如果需要改变过程的实现（或功能），如确保地鼠不连续出现在同一个位

置，只需要修改一处的代码；

4、将大块代码拆分成代码片段，有助于对应用做深入剖析，并加以实现（“分

而治之”）。

5、给过程一个有意义的命名，将有助于提高代码的可读性，更易被别人（或

一个月后的自己）读懂；

接着，我们要让地鼠每一秒移动一次，这就需要用到

Clock

组件。设置“计时器

1

”的

“计时间隔”为其默认值

1000

（毫秒），即

1

秒，（如右图，其实也不用设置）在“当计

时器计时”块中，无论设定什么动作，它都会每秒钟执行一次,

除非你想让它以其它时间间隔来执行动作。以下是具体做法：

1、单击“多媒体”-“计时器

1

”，找到并并拖出“当计时器计时”

2、单击“过程”抽屉，将“调用地鼠移动”块拖到“当计时器计时”块中，如下图所示。

（如果你觉得地鼠移动得太快或太慢，可以在组件设计器中设置“计时间隔”，来增加或

减小地鼠的移动频率，这个间隔频率其实可以用来改进程序实现游戏的简单、困难程度）

第二步：记录成绩

刚才我们创建了四个标签，其中初始值为

0

的“命中数量”和“失误数量”，希望以此

来记录用户的成绩：当用户命中地鼠一次，或失败一次（直接触碰到屏幕）时，对应标签中

46

的数字增加，为此要用到“当画布1被触碰”块，它表示画布被触摸到，并记录了触摸点的

x和y坐标（我们不必关心），以及是否碰到了图像精灵，也就是地鼠（这是我们关心的），

如下图所示。

可以理解为：当触碰到画布时，检查图像精灵是否也被碰到。应用中只有一个图像精灵，

就是地鼠，如果碰到地鼠，则“命中数量”中的数字在原本的基础上+1，否则“失误数量”

中的数字在原本的基础上+1，

请发挥你的聪明才智，自己试着创建这些块吧！

注意：

1、“如果，则，否则”的创建方法：先拖入“如果，则”块，然后为其添加“否则”块

（点击“如果”左边的蓝色方块，在弹出框中将“否则”块拖入“如果”块），如下图所

示。

2、数字块“1”可以在“数学”抽屉中拖出“0”块再改为“1”，还可用复制粘贴，也可

以直接打出“1”再按回车键。就像这样：

第三步：重置分数

我们要在“当重新开始按钮被点击”块中设置“命中数量”和“失误数量”的值为0。

如下图所示：

47

刚刚的技巧也可以用上，直接输入“0”并回车，看看什么神奇的事情发生了？

第四步：添加震动效果

我们希望在触碰到地鼠时，设备能够振动，这里需将“调用音效1震动”块加入“当画

布1被触碰”块，如下图所示。

这里设置的是震动100毫秒，如果你觉得振动时间过长或过短，可以修改毫秒数。完整

的程序代码块就是下面图片显示的，就这么简单！对吗？

（基础篇示例链接/share/link?shareid=2235068860&uk=3911675544）

如果你的屏幕上所有的块都完全正确，并且在测试设备上也运行成功，那么恭喜你！你

优秀地完成了基础篇的学习！如果你还想继续改进“打地鼠”的游戏的话，那就让我们一起

进入提高篇吧！

48

四、提高篇

在这里，是对上面程序一些完善打地鼠游戏的建议与指引：

1、添加音效

不仅仅是震动，我们也可以添加音效，如，上网下载两段较短的音效，一段是“哇哦”，

在命中地鼠时播出，一段是“哎呀”，在失误时播出。

可以按以下步骤操作：

（1）

（2）

（3）

（4）

上传音频文件到素材

拖拽多一个音效到屏幕，保留“音效2”的默认名称

将“哇哦”添加到音效1，“哎呀”添加到音效二

然后再将“调用音效播放”块插入到“当画布1被触碰”

2、设置两个模式，分难易级别

因为每个人的能力不同，有些人可能会觉得这个游戏太难，有些人可能觉得太简单，所

以我们可以设置两个模式：简单模式和复杂模式

首先，我们要在组件设计的屏幕上加多两个按钮，用一个水平布局框起来，然后再重命

名并更改文本，就像这样：

接着，去到逻辑设计的屏幕进行设置，就像这样：

于是，复杂模式时，地鼠会以简单模式的两倍速度移动，给用户增加难度。

49

3、设置干扰物

当然，如果你觉得还不够难的话，还可以设置干扰物，如一个钉子之类的，如果碰到就

会减少得分或结束游戏，至于具体怎么操作，我想你肯定会的。

4、把它做成闯关游戏

你可以设置一个个的关卡，用户要达到每个关卡设定的目标才可以过关，如在10秒内

击中8次地鼠；40秒内失误不超过十个等等……还可以设置分享功能，和qq或微信的好

友炫耀一下你的成绩，邀请他们来玩……如果做得好的话，打地鼠也可能会变成一个大型

的手机游戏哦！

当然这只是些建议，具体能做成什么样还要看你的聪明才智和创造能力，不过我相信，

通过不懈的努力，你一定会成功的！

五、教程小结：

通过这个游戏，我们学到了：

•画布组件使用了直角坐标系，其中x表示水平方向，y表示垂直方向。从画布的高度

和宽度中减去某个图像精灵的高度和宽度，这个范围可以确保图像精灵在画布上完整地显

示；

•

•

利用画布和图像精灵组件的触摸，来实现对设备触感的应用；

创建实时交互应用：不仅可以对用户的操作做出实时响应，也可以对设备内部的计

时器做出响应。具体地说，计时器的计时间隔也可以用于控制图像精灵（或其它）组件

的移动；

•

•

•

标签可用于显示得分，根据玩家的操作结果，得分会相应升高（或下降）；

通过“调用音效震动”块对用户的触摸事件进行反馈，让设备震动一定的毫秒数；

不仅可以调用内置过程，也可以通过给一组块设定名称（如地鼠移动），来创建自

己的过程，这些过程也可以像内置过程一样被调用，这就是所谓的过程抽象，在计算机科

学中这是一个非常重要的思想，可以实现代码的复用，也使得创建复杂应用成为可能；

•利用数学抽屉中的随机整数块，可以产生不可预知行为，让游戏每次开始时都有所

不同。

不积跬步，无以至千里；不积小流，无以成江海。同学们，继续加油吧！

50

本文标签： 程序组件点击地鼠