5 分鐘，帶你快速撸一個 iOS App

1. 前言

大家好，我是安果！

使用 Python 寫完爬蟲後，有時候我們需要在手機上實時對爬蟲進行排程，或實時展示爬蟲的結果

面對這種場景，我們可以将爬蟲邏輯寫成 API 部署到伺服器，然後在移動端編寫 App，通過界面元素控件直接調用接口即可

本篇文章，将和大家聊聊如何快速編寫一款 iOS 原生 App

2. 準備

要實作原生 iOS 應用，我們需要在 Mac 上使用 Xcode 編寫并進行編譯

首先，設定 Xcode 的開發者賬号

打開 Xcode，左上角選擇 Xcode - Preferences - Accounts，點選左下角的 + 号，添加一個開發者賬号

然後，使用 Xcode 建立一個項目

這裡模版選擇 iOS App，輸入項目名稱，程式設計語言選擇「 Swift 」，點選下一步完成項目的建立

PS：Swift 相比 OC，文法更加簡潔明了

最後，為新建立的項目指定 Sign 簽名

這部分如果有疑惑，可以點選文末的閱讀原文去了解

3. 實戰

實戰部分，我們以一個簡單的登陸頁面來進行講解

3-1 安裝依賴庫

由于項目使用 Swift 開發，這裡推薦使用 SPM（ Swift Package Manager ）來安裝依賴

比如，網絡請求庫「 Alamofire 」

項目位址：https://github.com/Alamofire/Alamofire

安裝方式：File - Swift Packages - Add Package Dependency - 輸入項目位址（ Github / Gitee ）- 選擇安裝版本

3-2 頁面布局

打開項目根目錄下的「 ContentView.swift 」檔案，在 body 下編寫具體的視圖

首先，使用 VStack 定義一個垂直的布局盒子，并定義子控件水準居中展示

PS：SwiftUI 常見的 3 種布局方式為 VStack、HStack、ZStack，它們分别代表垂直布局、水準布局、深度布局

import SwiftUI
import Combine

struct ContentView: View {
    
    ...
    
    //建構頁面View
    var body: some View {
        VStack(alignment: HorizontalAlignment.center){
           ...
        }
    } 
}

複制

然後，子元素依次添加一張本地圖檔、兩個輸入框、一個選擇框、一個按鈕

其中，

圖檔控件 Image
文本輸入框控件 TextField
選擇框控件 Toggle
按鈕控件 Button

import SwiftUI
import Combine

struct ContentView: View {
    
    //建構頁面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("測試環境")
                }.padding(.leading, 0.0).frame(width: 140, height: 40)

            Button(action: {
                //具體的操作         }       struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }   
    
}

複制

最後，定義變量和控件資料進行雙向綁定

struct ContentView: View {
    
    @State  var username:String = "使用者名"
    @State  var pwd:String = "密碼"
    @State  var result:String = "結果"
    @State  var isFavorited:Bool = false
        
}

複制

3-3 網絡請求及結果展示

為 Button 控件設定點選事件，使用 Alamofire 進行網絡請求，最後将結果展示寫入到結果控件綁定到資料中去即可

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):
                        //轉為Dictionary
                        let post_paramsValue = json as! Dictionary<String,Any>
                        
                        //__NSCFString
                        let msg = post_paramsValue["msg"]!
                        //轉為String
                        let msg_pro = msg as! String
                        
                        self.result = msg_pro
                        
                        break
                    case .failure(let error):
                        print("error:\(error)")
                        self.result = "網絡異常，請稍後再試！"
                        break
                    }
                }
                
            }) {
                Text("一鍵執行")
                    .foregroundColor(Color.white)
                    .padding(10)
                    .background(Color.gray)
                    .cornerRadius(6)
                    .padding(10)
                    .frame(alignment: .center)
            }
            
            TextField("結果區域", text: $result)
                .padding()
        }

複制

4. 最後

文章通過一個簡單的例子描述了開發一個 iOS 原生應用的詳細步驟；實際應用中，可以結合具體的場景去定制開發不同的功能子產品