保姆级教程：写出自己的移动应用和小程序（篇一）

写在前面的话：

• 本系列文章由FinClip研发团队耗时半年打造，团队成员均有超过 5 年的一线研发经验，我们希望通过借助于总结自己在工作中的实际经验，切实帮助那些想要学习移动应用研发的新手朋友，认识并了解小程序开发这一新的技术领域。
• 本系列文章描述的内容简单易懂，可以作为前端研发初学者的开发入门读物。即使是初学开发的读者朋友，也可以在自己的移动应用中从零到一嵌入一个自己编写的小程序。

• 本篇重点：做出一个 iOS / Android 应用

  iOS 篇

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

1. 工具准备
2. 新建项目
3. 认识 Xcode
4. 添加代码
5. 运行程序

0X00 工具准备

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

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

在 Mac App Store 搜索 Xcode，第一个就是了

0X01 新建项目

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

第一行，不要点错了

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

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

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

每一个写代码的初学者，都精通于通过各种语言写出第一个 Hello, world

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

在这里我们把文件夹放在了桌面

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

0X02 认识 Xcode

这就是 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 界面中，选中苹果机型模拟器，点击左侧的播放按钮

我们在图中选择的是 iPhone 13 机型

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

是不是很简单？快来试试吧

Android 篇

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

1. 开发工具安装和配置
2. 搭建开发环境
3. 在 Android Studio 中，创建第一个项目
4. 完成简单 Hello world 代码编写
5. 编译 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  准备好后，开始创建第一个项目。

第一步，新建项目

点击界面中的 New Project

选择中间的空模板 Empty Activity

在这里输入项目信息

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

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

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

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

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

然后编辑 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(R.id.button).setOnClickListener {
            Toast.makeText(MainActivity@this,"hello world",Toast.LENGTH_LONG).show()
        }
    }
}

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

0X04 编译 APK 文件，让应用在手机上跑起来

第一步，打开安卓手机的开发者模式，在开放者选项里面打开 USB 调试

一定要确保打开了后面的开关

第二步，通过数据线将电脑和手机连接在一起

Android Studio 会自动识别你的手机型号，启动按钮也会变成绿色可点击的样式

让我们选中这个 apk 文件，并且点击绿色的播放按钮

Android studio 会完成整个项目的编译打包，并且将 App 安装到你的手机后开始启动 App 完成所有的流程。

这些流程都是自动化完成的，开发者不需要介入。编译打包完成后会在**/MyApplication/app/build/outputs/apk/debug 目录下出现  app-debug.apk 文件，这也是可以在安卓手机中安装移动应用的安装包。

第三步，大功告成，不出意外你会看到成功打开了 App ！

点击按钮会出现下面的 toast 消息

---

如果正确按照教程，那相信你已经成功的做出了属于自己的第一个 iOS 与 Android 应用，本期教程基于 mac 电脑进行实现，如果你的电脑是 Windows 或者其他操作系统，还需要进行一些其他的灵活配置。

在下一期的文章中，我们将会一起聊聊如何写出 SDK ，并且将 SDK 引入到移动应用中，敬请期待。