5 分鐘，帶你快速擼一個 iOS App
點(diǎn)擊上方“AirPython”，選擇“加為星標(biāo)”
第一時間關(guān)注 Python 原創(chuàng)干貨！
1. 前言
大家好，我是安果！
使用 Python 寫完爬蟲后，有時候我們需要在手機(jī)上實(shí)時對爬蟲進(jìn)行調(diào)度，或?qū)崟r展示爬蟲的結(jié)果
面對這種場景，我們可以將爬蟲邏輯寫成 API 部署到服務(wù)器，然后在移動端編寫 App，通過界面元素控件直接調(diào)用接口即可
本篇文章，將和大家聊聊如何快速編寫一款 iOS 原生 App
2. 準(zhǔn)備
要實(shí)現(xiàn)原生 iOS 應(yīng)用，我們需要在 Mac 上使用 Xcode 編寫并進(jìn)行編譯
首先，設(shè)置 Xcode 的開發(fā)者賬號
打開 Xcode，左上角選擇 Xcode - Preferences - Accounts，點(diǎn)擊左下角的 + 號，添加一個開發(fā)者賬號
然后，使用 Xcode 創(chuàng)建一個項(xiàng)目
這里模版選擇 iOS App，輸入項(xiàng)目名稱，編程語言選擇「 Swift 」，點(diǎn)擊下一步完成項(xiàng)目的創(chuàng)建
PS：Swift 相比 OC，語法更加簡潔明了
最后，為新創(chuàng)建的項(xiàng)目指定 Sign 簽名
這部分如果有疑惑，可以點(diǎn)擊文末的閱讀原文去了解
3. 實(shí)戰(zhàn)
實(shí)戰(zhàn)部分，我們以一個簡單的登陸頁面來進(jìn)行講解
3-1 安裝依賴庫
由于項(xiàng)目使用 Swift 開發(fā)，這里推薦使用 SPM（ Swift Package Manager ）來安裝依賴
比如，網(wǎng)絡(luò)請求庫「 Alamofire 」
項(xiàng)目地址：https://github.com/Alamofire/Alamofire
安裝方式：File - Swift Packages - Add Package Dependency - 輸入項(xiàng)目地址（ Github / Gitee ）- 選擇安裝版本
3-2 頁面布局
打開項(xiàng)目根目錄下的「 ContentView.swift 」文件，在 body 下編寫具體的視圖
首先，使用 VStack 定義一個垂直的布局盒子，并定義子控件水平居中展示
PS：SwiftUI 常見的 3 種布局方式為 VStack、HStack、ZStack，它們分別代表垂直布局、水平布局、深度布局
import SwiftUI
import Combine
struct ContentView: View {
...
//構(gòu)建頁面View
var body: some View {
VStack(alignment: HorizontalAlignment.center){
...
}
}
}
然后，子元素依次添加一張本地圖片、兩個輸入框、一個選擇框、一個按鈕
其中，
圖片控件 Image
文本輸入框控件 TextField
選擇框控件 Toggle
按鈕控件 Button
import SwiftUI
import Combine
struct ContentView: View {
//構(gòu)建頁面View
var body: some View {
VStack(alignment: HorizontalAlignment.center){
Image("WechatIMG5")
TextField("用戶名", text: $username).textFieldStyle(RoundedBorderTextFieldStyle())
.keyboardType(.numberPad)
.padding()
TextField("密碼", text: $pwd).textFieldStyle(RoundedBorderTextFieldStyle())
.keyboardType(.numberPad)
.padding()
//是否為測試
Toggle(isOn: $isFavorited) {
Text("測試環(huán)境")
}.padding(.leading, 0.0).frame(width: 140, height: 40)
Button(action: {
//具體的操作}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
}
最后，定義變量和控件數(shù)據(jù)進(jìn)行雙向綁定
struct ContentView: View {
@State var username:String = "用戶名"
@State var pwd:String = "密碼"
@State var result:String = "結(jié)果"
@State var isFavorited:Bool = false
}
3-3 網(wǎng)絡(luò)請求及結(jié)果展示
為 Button 控件設(shè)置點(diǎn)擊事件，使用 Alamofire 進(jìn)行網(wǎng)絡(luò)請求，最后將結(jié)果展示寫入到結(jié)果控件綁定到數(shù)據(jù)中去即可
Button(action: {
//具體的操作
print("start")
var url = ""
if(self.isFavorited){
url = "...?username=" + self.username + "&password=" + self.pwd
}else{
url = "...?username=" + self.username + "&password=" + self.pwd
}
print("請求地址:"+url)
AF.request(url).responseJSON { response in
switch response.result {
case .success(let json):
//轉(zhuǎn)為Dictionary
let post_paramsValue = json as! Dictionary<String,Any>
//__NSCFString
let msg = post_paramsValue["msg"]!
//轉(zhuǎn)為String
let msg_pro = msg as! String
self.result = msg_pro
break
case .failure(let error):
print("error:\(error)")
self.result = "網(wǎng)絡(luò)異常，請稍后再試！"
break
}
}
}) {
Text("一鍵執(zhí)行")
.foregroundColor(Color.white)
.padding(10)
.background(Color.gray)
.cornerRadius(6)
.padding(10)
.frame(alignment: .center)
}
TextField("結(jié)果區(qū)域", text: $result)
.padding()
}4. 最后
文章通過一個簡單的例子描述了開發(fā)一個 iOS 原生應(yīng)用的詳細(xì)步驟；實(shí)際應(yīng)用中，可以結(jié)合具體的場景去定制開發(fā)不同的功能模塊
如果你覺得文章還不錯，請大家 點(diǎn)贊、分享、留言 下，因?yàn)檫@將是我持續(xù)輸出更多優(yōu)質(zhì)文章的最強(qiáng)動力！
