打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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 ContentViewView {
    
    ...
    
    //构建页面View
    var body: some View {
        VStack(alignment: HorizontalAlignment.center){
           ...
        }
    } 
}

然后,子元素依次添加一张本地图片、两个输入框、一个选择框、一个按钮

其中,

  • 图片控件 Image

  • 文本输入框控件 TextField

  • 选择框控件 Toggle

  • 按钮控件 Button

import SwiftUI
import Combine

struct ContentViewView {
    
    //构建页面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_PreviewsPreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }   
    
}

最后,定义变量和控件数据进行双向绑定

struct ContentViewView {
    
    @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 asDictionary<String,Any>
                        
                        //__NSCFString
                        let msg = post_paramsValue["msg"]!
                        //转为String
                        let msg_pro = msg asString
                        
                        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 原生应用的详细步骤;实际应用中,可以结合具体的场景去定制开发不同的功能模块

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
App架构设计经验谈:技术选型
为你的 iOS App 构建分离测试
33 款主宰 2017 iOS 开发的开源库
33 个 2017 年必须了解的 iOS 开源库
Swift 网络请求+Json转model一套流程
开源项目分析(SwiftHub)Rxswift + MVVM + Moya 架构分析(一)第三方框架使用
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服