关于前端:保姆级教程写出自己的移动应用和小程序篇一

写在后面的话：

• 本系列文章由 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：

<?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 的文字内容。

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 引入到挪动利用中，敬请期待。