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

前言

大家好，我是安果！

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

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

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

準備

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

首先，設置 Xcode 的開發者賬號

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

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

這裏模版選擇 iOS App，輸入項目名稱，編程語言選擇「 Swift 」，點擊下一步完成項目的創建

PS：Swift 相比 OC，語法更加簡潔明瞭

最後，爲新創建的項目指定 Sign 簽名

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

實戰

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

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 = "...?user + self.pwd
                }else{
                   url = "...?user + 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()
        }

最後

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/7zRKUXTE94i63EAoMPT86w

猜你喜歡