App Inventor开发工具的使用

App Inventor（AI）是一款强大的可视化编程工具，其主要特点是通过组件和块代码设计，及拖拽抽屉方式，降低了记忆难度和开发难度。

关于App Inventor学习环境搭建，请参见https://blog.csdn.net/cnds123/article/details/105328277，在这篇博文中，App Inventor比较全面系统地App Inventor开发环境搭建及App Inventor程序的调试工具。

本文重点介绍如何使用App Inventor开发工具编写App Inventor程序。

进入开发工具（也称为进入开发平台或开发环境）后，界面和操作大同小异。在此以张路先生汉化的国内的服务器ai2.17coding.net为例介绍App Inventor开发工具的使用。

建议使用chrome浏览器打开ai2.17coding.net，如下登录：

随着时间的变化或版本的更新，你看到的页面也许有变化。ai2.17coding.net在线开发工具，没有设置用户的权限，所有人创建的项目放到一起，可以被所有人看见修改、删除，因此要注意导出你的项目保存到本地。

打开App Inventor的编程环境如下图所示：

注意视图切换部分，英语是

单击“设计”和“编程”按钮可以切换“设计视图“和“编程视图”之间切换。

单击“编程”按钮后切换到“编程视图”：

“设计视图“，是组件设计器，用于使用组件进行界面设计，根据你要实现的功能，选用合适的组件，来构成软件的界面。

组件是你用来创建应用的基本元素，有些组件非常简单，如“Label”（标签）组件，它用于在屏幕上显示文字；或者如“Button”（按钮）组件，轻按它则引起一个动作。其它组件则要更复杂：一个绘图的“Canvas”（画布）组件可以容纳静止图像或动画；“accelerometerSensor”（加速度传感器）组件是一种运动传感器，它的工作原理类似于Wii 控制器，它可以检测到设备的移动或摇晃；还有的组件用于编写并发送短信、播放音乐和视频以及从网站获取信息等等。

中部的白色区域称为工作区域【预览（Viewer）窗口】，用于放置应用中所需的组件，你可以按照自己的喜好来安排这些组件。预览窗口只能粗略地显示应用的外观，例如，与测试设备中的应用相比，在预览窗口中，一行文字可能会在不同的地方换行。如果想看到应用的实际外观，可以将应用下载到测试设备上（稍后我们会在“打包应用程序并下载”的部分详细介绍），或者下载App Inventor自带的模拟器。

预览窗口的左侧是组件面板（Palette），其中包含了可供选择的各类组件。该面板按类别划分为几个部分，默认情况下，只有用户界面（User Interface）组件可见，可以通过点击其他类别的标题，如Media（媒体）等，来查看其他组件。

预览窗口的右侧是组件列表（Components），显示了项目中的所有组件，拖动到预览窗口中的任何组件都将显示在该列表中。目前，该项目中只有一个组件：Screen1，它代表设备的屏幕。

组件列表下方是“素材”列表【媒体（Media）列表】，显示项目中的所有媒体（Media）资源（图像和声音），可以通过“上传”按钮添加。

最右边的部分用于显示组件的属性面板，在工作区域（预览窗口）中单击某个组件，将在属性（Properties）面板看到该组件的一系列属性。属性描述了组件的详细信息（如，单击Label组件可以看到它的颜色、文字内容、字体的属性。），可以修改属性值。当前显示的是屏幕（名为Screen1）的属性，包括背景颜色、背景图像及标题等。

App Inventor在新建一个项目就会默认创建一个组件，这个组件叫：Screen1，它是其它组件，如按钮，标签等的容器，这个Screen相当于手机的屏幕，是用户界面设计的地方。

可视组件（可以理解为应用中确实可见的组件），如：Label组件、Button组件；非可视的组件，如Sound（声音）组件、AccelerometerSensor（加速度传感器）组件，用于检测设备的移动或摇晃。可视组件可以添加到类似如手机的窗口中，；非可视组件被添加到类似如手机的窗口的下面。

如何进行界面设计（向类似如手机的窗口添加组件）呢？例如向类似如手机的窗口添加“Label”（标签）组件，在组件面板（Palette），单击Label（标签）组件，按下鼠标左键将其拖动到类似如手机的窗口中。在组件设计器右侧可以看到Label（标签）组件的Properties（属性）框，可以根据你的要求进行设置。

“编程视图”，用于编程设计，AI（App Inventor）编程语言被称为块语言。在块编辑器窗口中，可以为组件设定行为：做什么以及何时做。

在块编辑器窗口的左侧，“代码块”（Blocks）标题下面，可以看到许多分属不同类别的内置块，内置块分为8大类，是制作应用的重要支撑。内置块下方是我们在设计视图中创建的所用的所有组件，如：Screen1、标签1（Label1），点击它们就像打开抽屉，将看到一组适用于该组件的可选程序块。

如何使用代码块（编程设计）呢？

下图展示的是点击“按钮1”时的显示，就像打开了按钮1”这个“抽屉”，可以看到一组适用于该组件的可选代码块（Blocks）：

可以将“抽屉”中的代码块拖动到到工作区中。不同的代码块合理地拼接在一起就能构成一段程序。

代码块的颜色和形状的含义。代码块的形状：下凹槽为逻辑块，左凹槽接收属性值；凹凸形状能否吻合决定代码块能否正确组合。代码块的颜色代表了不同的功能，触发事件代码块为土黄色，调用方法代码块为深紫色，设置属性代码块为深绿色，读取属性代码块为浅绿色。

垃圾桶图标的作用：将逻辑块拖动到右下角的垃圾桶图标，删除所拖动逻辑块。

背包图标的作用：将逻辑块拖动到右上角的背包图标，可以在多个屏幕中共享逻辑块，也就是逻辑块的“复制”与“粘贴”功能。

提醒：现在，对这些描述，先有个基本了解即可，如果你感到迷惑不解，先不用担心，随着学习的深入，你再回头来看这些概括描述，就能形成总体认识。

App Inventor开发流程

（一）功能设计

思考要实现什么功能，据此准备素材（图片文件、声音文件）等。对于小型软件（功能简单的软件）这一步可以省略，对于大型软件，这一步是不可缺少的。

（二）创建新项目

（三）在“设计视图“中进行界面设计

根据你要实现的功能，选用合适的组件，来构成软件的界面

（四）在“编程视图”中编程设计，

在块编辑器中使用“代码块”（Blocks）编程，为组件设定行为：做什么以及何时做。

（五）测试

上述环节可能需要反复循环，直至作品符合要求。

（六）发布

在App Inventor开发工具中使用“编译“菜单编译成apk文件，给用户使用。

下面，给出具体的例子。

功能设计

素材：kitty.png；meow.mp3

源文件：HelloPurr.aia

【功能描述】

单击图片，发出猫叫声，显示文字“我害羞，别碰我！”；摇晃手机，手机震动，显示文字“我头晕，别摇我！”。

创建新项目

界面组件设计:

Screen组件的属性，需要注意的指出一下：

图标（Icon ）属性，也必须要你的应用生成APK后，安装在手机和平板上，才可以看到你生成应用的图标，如果不设置图标，就会以默认的App Inventor应用图标代替。

垂直对齐（AlignVertical），要注意一点，如果“允许滚动”属性勾选了，那“垂直对齐”的“居下”的无法设置。

其他属性采用默认。

本项目中，需要你用拖动的方法添加4个组件：

Button1组件、Label1组件、Sound1组件、AcceleromerSensor1组件，它们的属性设置参见下图：

设置好后显示如下图：

编程设计

测试效果

例子比较简单，主要是让新手有一个直观易懂的了解，有了这些，深入学习就有了基础。

App Inventor开发工具的使用相关推荐

10款无需编程的App DIY开发工具
10款无需编程的App DIY开发工具你有一个很棒的创意但不会编程怎么办?外包.合伙开发还是从零学编程?这里提供另外一种方式--使用无需编程的App DIY开发工具.DIY开发工具不仅节省了开发时 ...
《推荐几个常用的H5+APP制作开发工具》
我们已经进入移动互联网时代,而app是移动互联网的载体.传统app开发面临成本高.周期长等问题,因此各类快速生成app的工具层出不穷.企业拥有了app才能实现互联网营销和互联网推广. 一.即速应用即 ...
推荐几个H5、app制作开发工具
我们已经进入移动互联网时代,而app是移动互联网的载体.传统app开发面临成本高.周期长等问题,因此各类快速生成app的工具层出不穷.企业拥有了app才能实现互联网营销和互联网推广.中国有近7000万 ...
【巴法云】开源安卓App控制ESP8266，通过MQTT协议，APP Inventor 开发
[巴法云]APP Inventor 开发安卓app,通过MQTT控制ESP8266 第一下载ESP8266示例(arduino ide 编程开发) 第二修改demo例程第三 app invent ...
1.App Inventor开发环境构建
1.App Inventor(环境构建)(转) App Inventor是一种网页(在线.离线均可)开发安卓手机应用的方式,2010年7月,由google开发2012年移交MIT,她无需编程基础,开发 ...
在线APP设计平台，APP在线开发工具有哪些？
在移动互联网时代,我们需要为自己的产品或服务创建一个APP.但是在人力,时间和金钱成本上面临许多障碍.这时我们该怎么办呢?在线APP设计平台解决你这些困扰!!现在进入移动市场不再需要成千上万的资金,也 ...
uniapp实战项目（仿知识星球App) - - 配置开发工具和全局css样式
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
推荐几款App跨平台开发工具
众所周知开发App比较复杂,不仅要懂多种编程语言还要考虑高额的成本.作为开发者需要找到一个既节省成本又能快速开发App的最佳解决方案.不少跨平台开发工具便应运而生,选择一款适合自己的工具尤为重要,下面 ...
重磅---基于App Inventor开发的蓝牙RSSI测量基站距离的手机应用软件
RSSI的测距技术是利用无线电信号随距离增大而有规律地衰减的原理来测量节点间的距离根据rssi强度计算距离公式:d=10^((abs(rssi)-A)/(10*n)); A代表在距离1m时候的信号 ...

App Inventor开发工具的使用

App Inventor开发工具的使用

App Inventor开发工具的使用相关推荐

最新文章

热门文章