【原】5 分钟，带你快速撸一个 iOS App

AirPython 2021-10-28

展开全文

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()
        }