手把手教学

手把手第一篇：写出第一行 Hello World

如何在 iOS 或 Android 应用中写出第一行属于自己的 Hello World？

胡健辉, 岑晓中

2021年12月3日 • 11 min read

分享到微信

地球上最流行的移动操作系统，非苹果公司的 iOS 与谷歌公司的 Android 系统莫属了，那如何写出自己的第一个 App，并且能够跑在 iOS 与 Android 系统上呢？快来看看本篇文章吧！

本期文章属于《手把手系列教学》的第一篇，如果你还不太了解这一系列，可以点击这里查看详情。

iOS 篇

开发一个 iOS 移动应用大致需要以下 4 步：

工具准备
新建项目
认识 Xcode
添加代码
运行程序

0X00 工具准备

工欲善其事必先利其器，一个 Mac 设备必不可少（ iMac、MacBook皆可），接下来下载最新版本的 Xcode 作为 iOS 开发的IDE（Integrated Development Environment ，集成开发环境，就是编辑、编译、链接、调试统统包含的一揽子开发环境，移动开发的 IDE 一般还会包含移动设备的模拟器）。

建议从 Mac App Store 进行下载和安装，免费哦~

0X01 新建项目

第一步，打开 Xcode，点击首页的 Create a new Xcode project

第二步，依次选择界面中的 iOS - App - Next

其实 Xcode 提供了非常多的应用，比如游戏，虚拟现实，iMessage 应用等等

第三步，在 Product Name 中输入 hello, world 然后选择 Next

第四步，选择一个存储移动应用的文件夹，点击 create

第五步，一个初始的项目就建好了！

0X02 认识 Xcode

Xcode 开发环境的默认基本框架如上图：

左侧是项目的文件列表，或者叫项目导航（Project Navigator）（左侧实际包含更多的内容，切换左上角 8 个图标可以看到更多的页签）；
中间是我们的编辑区域（Editor），根据左侧点击的不同文件，中间会展示代码、界面、项目设置、素材等等；
右侧会有一些 Inspector 和 Library，这次暂时用不到。

0X03 添加代码

第一步，点击左侧项目导航中的 ViewController.m

在 ViewController.m 的代码中找到一个函数叫做 viewDidLoad，这个函数里已经有一行代码：

[super viewDidLoad];

在这行代码后面添加这一段代码：

UILabel* label = [[UILabel alloc]init];
label.text = @"hello world";
[label sizeToFit];
label.center = self.view.center;
[self.view addSubview: label];

在这里我们简单解释下这五行代码是干什么的：

//这一句创建了一个静态文本控件，未指定内容、大小和位置
UILabel *label = [[UILabel alloc]init];

//设置静态文本显示文字"Hello World"
//"@"的作用是把一个c风格的字符串"hello world"包装成一个NSString对象
label.text = @"hello world";

//让静态文本的大小自适应内容
[label sizeToFit];

//让静态文本居于整个视图的中央
label.center = self.view.center;

//将静态文本添加到主视图中
[self.view addSubview: label];

0X04 运行程序

第一步，回到 Xcode 界面中，选中苹果机型模拟器，点击左侧的播放按钮

第二步，你就会看到一个写着“hello world” 的应用跑起来了。

Android 篇

与开发 iOS 应用的逻辑基本一致，开发 Android 应用也需要以下 5 步：

开发工具安装和配置
搭建开发环境
在 Android Studio 中，创建第一个项目
完成简单 Hello world 代码编写
编译 APK 文件，让应用在手机上跑起来

0X00 开发工具安装和配置

第一步，需要先在 Android 官网下载 Android Studio（直接点击传送门进入下载链接），如果你不会科学上网的话，也可以在国内镜像下载。

在这里可以根据你的电脑型号（浏览器会自动根据机型推荐链接，比如我的就是 Intel 芯片的 MacBook ）下载安装包，在下载完成后双击跟着提示一步一步完成安装就行了。

0X01 搭建开发环境

与 Xcode 不同，我们还需要在正式编写 Android 应用前，配置本地的开发环境。

第一步，安装 JDK 8

首先需要安装 JDK 8，JDK 就是研发 Android 应用的官方环境，点击这里下载（我的链接也是适用于 Mac 电脑，如果你的电脑不一样需要切换一下）。

下载完成后，双击下载好的 jdk-8u311-macosx-x64.dmg ，单击接受许可协议后，在新出现的“安装类型窗口”中，点击“安装”。

此时会出现一个窗口，显示“安装程序正在尝试安装新软件。输入您的密码以允许此操作”。

所以我们需要再输入管理员密码之后，再次点击“安装软件”。等到显示确认窗口之后，即可完成安装。

第二步，配置 JDK 环境

在第一步中，我们只是把 JDK1.8 的文件复制到操作系统上。但还需要让其他应用知道 JDK1.8 环境存在的具体位置，因此我们还需要配置系统的环境变量。

但首先，我们自己得先知道 JDK 目录安装在哪里，按照下面的路径我们可以找到 JDK 的主目录，如下图所示：

JDK 安装目录 /Library/Java/JavaVirtualMachines

也就是说，JDK 的真实目录在这里 /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home，

既然知道了 JDK 的安装目录，那就让我们打开终端（同时按住键盘上的 command 和空格，并在之后的弹框中输入 terminal.app 后敲击回车）开始配置：

vi ~/.zshrc or vi ~/.bash_profile

在文件的末尾加入这一行语句：

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home

然后用 source 命令更新环境配置

source ~/.zshrc or source ~/.bash_profile

配置完毕后，我们就可以验证 Java 环境配置是否正确了，依然在终端中输入

java -version

0X02 在 Android Studio 中，创建第一个项目

打开 Android Studio ，Android Studio 第一次打开需要下载 Android SDK 和 Gradle 等工具包，所以第一次打开可能比较慢（合理科学上网会快一些），Android Studio 准备好后，开始创建第一个项目。

第一步，新建项目

之后，点击 Finish 就可以完成项目的创建了。

0X03 完成简单 Hello world 代码编写

首先让我们认识 Android 应用的项目文件结构：

Android 的页面是由一个个 Activity 组成的，页面主要分为 UI 布局部分和逻辑处理部分， UI 布局部分需要由上图中蓝色 main 目录下的 activity_main.xml 文件处理，而逻辑部分则是由 com.myname.myapplication 中的 MainActivity 文件处理。

所以我们也需要修改 UI 布局与逻辑 2个文件，首先编辑 activity_main.xml ：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击我"
        android:id="@+id/button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后编辑 MainActivity ：

package com.myname.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        this.findViewById<Button>(R.id.button).setOnClickListener {
            Toast.makeText(MainActivity@this,"hello world",Toast.LENGTH_LONG).show()
        }
    }
}

这段代码的逻辑大致是这样的，首先通过按钮的 id 找到这个按钮的对象（findViewById(R.id.button)），然后给 button 按钮增加一个点击监听器（setOnClickListener），当按钮被用户触发后，就会回调这个方法。而一旦这个匿名方法被触发，通过 Toast 弹出一串 hello world 的文字内容。