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

本系列文章由 FinClip 研发团队耗时半年打造，团队成员均有超过 5 年的一线研发教训，咱们心愿通过借助于总结本人在工作中的理论教训，切实帮忙那些想要学习挪动利用研发的老手敌人，意识并理解小程序开发这一新的技术畛域。
本系列文章形容的内容简略易懂，能够作为前端研发初学者的开发入门读物。即便是初学开发的读者敌人，也能够在本人的挪动利用中从零到一嵌入一个本人编写的小程序。
本篇重点：做出一个 iOS / Android 利用

iOS 篇

开发一个 iOS 挪动利用大抵须要以下 4 步：

工具筹备
新建我的项目
意识 Xcode
增加代码
运行程序

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

倡议从 Mac App Store 进行下载和装置，收费哦~

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

第一步，关上 Xcode，点击首页的 Create a new Xcode project

第一行，不要点错了

第二步，顺次抉择界面中的 iOS – App – Next

其实 Xcode 提供了十分多的利用，比方游戏，虚拟现实，iMessage 利用等等

第三步，在 Product Name 中输出 hello, world 而后抉择 Next

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

第四步，抉择一个存储挪动利用的文件夹，点击 create

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

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

这就是 Xcode 的开发界面

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

左侧是我的项目的文件列表，或者叫我的项目导航（Project Navigator）（左侧理论蕴含更多的内容，切换左上角 8 个图标能够看到更多的页签）；
两头是咱们的编辑区域（Editor），依据左侧点击的不同文件，两头会展现代码、界面、我的项目设置、素材等等；
右侧会有一些 Inspector 和 Library，这次临时用不到。

第一步，点击左侧我的项目导航中的 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];

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

咱们在图中抉择的是 iPhone 13 机型

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

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

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

开发工具装置和配置
搭建开发环境
在 Android Studio 中，创立第一个我的项目
实现简略 Hello world 代码编写
编译 APK 文件，让利用在手机上跑起来

第一步，须要先在 Android 官网下载 Android Studio（间接点击传送门进入下载链接），如果你不会迷信上网的话，也能够在国内镜像下载。

但想成为业余的安卓研发，还是要学会迷信上网

批准协定后抉择本人的机型

在这里能够依据你的电脑型号（浏览器会主动依据机型举荐链接，比方我的就是 Intel 芯片的 MacBook）下载安装包，在下载实现后双击跟着提醒一步一步实现装置就行了。

与 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

如果正确显示出了版本号，就代表配置胜利了

关上 Android Studio，Android Studio 第一次关上须要下载 Android SDK 和 Gradle 等工具包，所以第一次关上可能比较慢（正当迷信上网会快一些），Android Studio 筹备好后，开始创立第一个我的项目。

第一步，新建我的项目

点击界面中的 New Project

抉择两头的空模板 Empty Activity

在这里输出我的项目信息

之后，点击 Finish 就能够实现我的项目的创立了。

首先让咱们意识 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 的文字内容。

第一步，关上安卓手机的开发者模式，在凋谢者选项外面关上 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 引入到挪动利用中，敬请期待。

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

写在后面的话：

iOS 篇

0X00 工具筹备

0X01 新建我的项目

0X02 意识 Xcode

0X03 增加代码

0X04 运行程序

Android 篇

0X00 开发工具装置和配置

0X01 搭建开发环境

0X02 在 Android Studio 中，创立第一个我的项目

0X03 实现简略 Hello world 代码编写

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