手把手第一篇：寫出第一行 Hello World
地球上最流行的移動(dòng)操作系統(tǒng)，非蘋果公司的 iOS 與谷歌公司的 Android 系統(tǒng)莫屬了，那如何寫出自己的第一個(gè) App，并且能夠跑在 iOS 與 Android 系統(tǒng)上呢？快來(lái)看看本篇文章吧！
iOS 篇
開(kāi)發(fā)一個(gè) iOS 移動(dòng)應(yīng)用大致需要以下 4 步：
工具準(zhǔn)備
新建項(xiàng)目
認(rèn)識(shí) Xcode
添加代碼
運(yùn)行程序
0X00 工具準(zhǔn)備
工欲善其事必先利其器，一個(gè) Mac 設(shè)備必不可少（ iMac、MacBook皆可），接下來(lái)下載最新版本的 Xcode 作為 iOS 開(kāi)發(fā)的IDE（Integrated Development Environment ，集成開(kāi)發(fā)環(huán)境，就是編輯、編譯、鏈接、調(diào)試統(tǒng)統(tǒng)包含的一攬子開(kāi)發(fā)環(huán)境，移動(dòng)開(kāi)發(fā)的 IDE 一般還會(huì)包含移動(dòng)設(shè)備的模擬器）。
建議從 Mac App Store 進(jìn)行下載和安裝，免費(fèi)哦~
在 Mac App Store 搜索 Xcode，第一個(gè)就是了
0X01 新建項(xiàng)目
第一步，打開(kāi) Xcode，點(diǎn)擊首頁(yè)的 Create a new Xcode project
第一行，不要點(diǎn)錯(cuò)了
第二步，依次選擇界面中的 iOS - App - Next
其實(shí) Xcode 提供了非常多的應(yīng)用，比如游戲，虛擬現(xiàn)實(shí)，iMessage 應(yīng)用等等
第三步，在 Product Name 中輸入 hello, world 然后選擇 Next
每一個(gè)寫代碼的初學(xué)者，都精通于通過(guò)各種語(yǔ)言寫出第一個(gè) Hello, world
第四步，選擇一個(gè)存儲(chǔ)移動(dòng)應(yīng)用的文件夾，點(diǎn)擊 create
在這里我們把文件夾放在了桌面
第五步，一個(gè)初始的項(xiàng)目就建好了！
0X02 認(rèn)識(shí) Xcode
這就是 Xcode 的開(kāi)發(fā)界面
Xcode 開(kāi)發(fā)環(huán)境的默認(rèn)基本框架如上圖：
左側(cè)是項(xiàng)目的文件列表，或者叫項(xiàng)目導(dǎo)航（Project Navigator）（左側(cè)實(shí)際包含更多的內(nèi)容，切換左上角 8 個(gè)圖標(biāo)可以看到更多的頁(yè)簽）；
中間是我們的編輯區(qū)域（Editor），根據(jù)左側(cè)點(diǎn)擊的不同文件，中間會(huì)展示代碼、界面、項(xiàng)目設(shè)置、素材等等；
右側(cè)會(huì)有一些 Inspector 和 Library，這次暫時(shí)用不到。
0X03 添加代碼
第一步，點(diǎn)擊左側(cè)項(xiàng)目導(dǎo)航中的 ViewController.m
記住，不要點(diǎn)擊錯(cuò)了
在 ViewController.m 的代碼中找到一個(gè)函數(shù)叫做 viewDidLoad，這個(gè)函數(shù)里已經(jīng)有一行代碼：
[super viewDidLoad];
在這行代碼后面添加這一段代碼：
UILabel* label = [[UILabel alloc]init]; label.text = @"hello world"; [label sizeToFit]; label.center = self.view.center; [self.view addSubview: label];
//這一句創(chuàng)建了一個(gè)靜態(tài)文本控件，未指定內(nèi)容、大小和位置 UILabel *label = [[UILabel alloc]init]; //設(shè)置靜態(tài)文本顯示文字"Hello World" //"@"的作用是把一個(gè)c風(fēng)格的字符串"hello world"包裝成一個(gè)NSString對(duì)象 label.text = @"hello world"; //讓靜態(tài)文本的大小自適應(yīng)內(nèi)容 [label sizeToFit]; //讓靜態(tài)文本居于整個(gè)視圖的中央 label.center = self.view.center; //將靜態(tài)文本添加到主視圖中 [self.view addSubview: label];
0X04 運(yùn)行程序
第一步，回到 Xcode 界面中，選中蘋果機(jī)型模擬器，點(diǎn)擊左側(cè)的播放按鈕
我們?cè)趫D中選擇的是 iPhone 13 機(jī)型
第二步，你就會(huì)看到一個(gè)寫著“hello world” 的應(yīng)用跑起來(lái)了。
是不是很簡(jiǎn)單？快來(lái)試試吧
Android 篇
與開(kāi)發(fā) iOS 應(yīng)用的邏輯基本一致，開(kāi)發(fā) Android 應(yīng)用也需要以下 5 步：
開(kāi)發(fā)工具安裝和配置
搭建開(kāi)發(fā)環(huán)境
在 Android Studio 中，創(chuàng)建第一個(gè)項(xiàng)目
完成簡(jiǎn)單 Hello world 代碼編寫
編譯 APK 文件，讓應(yīng)用在手機(jī)上跑起來(lái)
0X00 開(kāi)發(fā)工具安裝和配置
第一步，需要先在 Android 官網(wǎng)下載 Android Studio（直接點(diǎn)擊 傳送門 進(jìn)入下載鏈接）， 如果你不會(huì)科學(xué)上網(wǎng)的話，也可以在 國(guó)內(nèi)鏡像 下載。
但想成為專業(yè)的安卓研發(fā)，還是要學(xué)會(huì)科學(xué)上網(wǎng)同意協(xié)議后選擇自己的機(jī)型
在這里可以根據(jù)你的電腦型號(hào)（瀏覽器會(huì)自動(dòng)根據(jù)機(jī)型推薦鏈接，比如我的就是 Intel 芯片的 MacBook ）下載安裝包，在下載完成后雙擊跟著提示一步一步完成安裝就行了。
0X01 搭建開(kāi)發(fā)環(huán)境
與 Xcode 不同，我們還需要在正式編寫 Android 應(yīng)用前，配置本地的開(kāi)發(fā)環(huán)境。
第一步，安裝 JDK 8
首先需要安裝 JDK 8，JDK 就是研發(fā) Android 應(yīng)用的官方環(huán)境，點(diǎn)擊 這里 下載（我的鏈接也是適用于 Mac 電腦，如果你的電腦不一樣需要切換一下）。
在第二個(gè)箭頭處，可以切換不同的操作系統(tǒng)
下載完成后，雙擊下載好的 jdk-8u311-macosx-x64.dmg ，單擊接受許可協(xié)議后，在新出現(xiàn)的“安裝類型窗口”中，點(diǎn)擊“安裝”。
此時(shí)會(huì)出現(xiàn)一個(gè)窗口，顯示“安裝程序正在嘗試安裝新軟件。輸入您的密碼以允許此操作”。
所以我們需要再輸入管理員密碼之后，再次點(diǎn)擊“安裝軟件”。等到顯示確認(rèn)窗口之后，即可完成安裝。
第二步，配置 JDK 環(huán)境
在第一步中，我們只是把 JDK1.8 的文件復(fù)制到操作系統(tǒng)上。但還需要讓其他應(yīng)用知道 JDK1.8 環(huán)境存在的具體位置，因此我們還需要配置系統(tǒng)的環(huán)境變量。
但首先，我們自己得先知道 JDK 目錄安裝在哪里，按照下面的路徑我們可以找到 JDK 的主目錄，如下圖所示：
JDK 安裝目錄 /Library/Java/JavaVirtualMachines
也就是說(shuō)，JDK 的真實(shí)目錄在這里 /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home，
既然知道了 JDK 的安裝目錄，那就讓我們打開(kāi)終端（同時(shí)按住鍵盤上的 command 和空格，并在之后的彈框中輸入 terminal.app 后敲擊回車）開(kāi)始配置：
vi ~/.zshrc or vi ~/.bash_profile
在文件的末尾加入這一行語(yǔ)句：
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home
然后用 source 命令更新環(huán)境配置
source ~/.zshrc or source ~/.bash_profile
配置完畢后，我們就可以驗(yàn)證 Java 環(huán)境配置是否正確了，依然在終端中輸入
java -version
如果正確顯示出了版本號(hào)，就代表配置成功了
0X02 在 Android Studio 中，創(chuàng)建第一個(gè)項(xiàng)目
打開(kāi) Android Studio ，Android Studio 第一次打開(kāi)需要下載 Android SDK 和 Gradle 等工具包， 所以第一次打開(kāi)可能比較慢（合理科學(xué)上網(wǎng)會(huì)快一些），Android Studio ?準(zhǔn)備好后，開(kāi)始創(chuàng)建第一個(gè)項(xiàng)目。
第一步，新建項(xiàng)目
點(diǎn)擊界面中的 New Project選擇中間的空模板 Empty Activity在這里輸入項(xiàng)目信息
之后，點(diǎn)擊 Finish 就可以完成項(xiàng)目的創(chuàng)建了。
0X03 完成簡(jiǎn)單 Hello world 代碼編寫
首先讓我們認(rèn)識(shí) Android 應(yīng)用的項(xiàng)目文件結(jié)構(gòu)：
Android 的頁(yè)面是由一個(gè)個(gè) Activity 組成的，頁(yè)面主要分為 UI 布局部分和邏輯處理部分， UI 布局部分需要由上圖中藍(lán)色 main 目錄下的 activity_main.xml 文件處理，而邏輯部分則是由 com.myname.myapplication 中的 MainActivity 文件處理。
所以我們也需要修改 UI 布局與邏輯 2個(gè)文件，首先編輯 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
0X04 編譯 APK 文件，讓應(yīng)用在手機(jī)上跑起來(lái)
第一步，打開(kāi)安卓手機(jī)的開(kāi)發(fā)者模式，在開(kāi)放者選項(xiàng)里面打開(kāi) USB 調(diào)試
一定要確保打開(kāi)了后面的開(kāi)關(guān)
第二步，通過(guò)數(shù)據(jù)線將電腦和手機(jī)連接在一起
Android Studio 會(huì)自動(dòng)識(shí)別你的手機(jī)型號(hào)，啟動(dòng)按鈕也會(huì)變成綠色可點(diǎn)擊的樣式讓我們選中這個(gè) apk 文件，并且點(diǎn)擊綠色的播放按鈕
Android studio 會(huì)完成整個(gè)項(xiàng)目的編譯打包，并且將 App 安裝到你的手機(jī)后開(kāi)始啟動(dòng) App 完成所有的流程。
第三步，大功告成，不出意外你會(huì)看到成功打開(kāi)了 App ！
點(diǎn)擊按鈕會(huì)出現(xiàn)下面的 toast 消息
如果正確按照教程，那相信你已經(jīng)成功的做出了屬于自己的第一個(gè) iOS 與 Android 應(yīng)用，本期教程基于 mac 電腦進(jìn)行實(shí)現(xiàn)，如果你的電腦是 Windows 或者其他操作系統(tǒng)，還需要進(jìn)行一些其他的靈活配置。
在下一期的文章中，我們將會(huì)一起聊聊如何寫出 SDK ，并且將 SDK 引入到移動(dòng)應(yīng)用中，敬請(qǐng)期待。
也可以登錄凡泰極客博客，查看更多技術(shù)干貨分享。
Android IDE 移動(dòng)開(kāi)發(fā)
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
