FinClip手把手教学:如何从零开始编写一个app
地球上最流行的移动操作系统,非苹果公司的 iOS 与谷歌公司的 Android 系统莫属了,那如何写出自己的第一个 App,并且能够跑在 iOS 与 Android 系统上呢?FinClip的工程师给大家带来了详细的教学,快来看看本篇文章吧!
iOS 篇
开发一个 iOS 移动应用大致需要以下 4 步:
- 工具准备
- 新建项目
- 认识 Xcode
- 添加代码
- 运行程序
0X00 工具准备
工欲善其事必先利其器,一个 Mac 设备必不可少( iMac、MacBook皆可),接下来下载最新版本的 Xcode 作为 iOS 开发的IDE(Integrated Development Environment ,集成开发环境,就是编辑、编译、链接、调试统统包含的一揽子开发环境,移动开发的 IDE 一般还会包含移动设备的模拟器)。
建议从 Mac App Store 进行下载和安装,免费哦~
在 Mac App Store 搜索 Xcode,第一个就是了
0X01 新建项目
第一步,打开 Xcode,点击首页的 Create a new Xcode project
第一行,不要点错了
第二步,依次选择界面中的 iOS - App - Next
其实 Xcode 提供了非常多的应用,比如游戏,虚拟现实,iMessage 应用等等
第三步,在 Product Name 中输入 hello, world 然后选择 Next
每一个写代码的初学者,都精通于通过各种语言写出第一个 Hello, world
第四步,选择一个存储移动应用的文件夹,点击 create
在这里我们把文件夹放在了桌面
第五步,一个初始的项目就建好了!
0X02 认识 Xcode
这就是 Xcode 的开发界面
Xcode 开发环境的默认基本框架如上图:
- 左侧是项目的文件列表,或者叫项目导航(Project Navigator)(左侧实际包含更多的内容,切换左上角 8 个图标可以看到更多的页签);
- 中间是我们的编辑区域(Editor),根据左侧点击的不同文件,中间会展示代码、界面、项目设置、素材等等;
- 右侧会有一些 Inspector 和 Library,这次暂时用不到。
0X03 添加代码
第一步,点击左侧项目导航中的 ViewController.m
记住,不要点击错了
在 ViewController.m 的代码中找到一个函数叫做 viewDidLoad,这个函数里已经有一行代码:
[super viewDidLoad];
在这行代码后面添加这一段代码:
UILabel* label = [[UILabel alloc]init];
label.text = @"hello world";
[label sizeToFit];
label.center = self.view.center;
[self.view addSubview: label];
在这里我们简单解释下这五行代码是干什么的:
//这一句创建了一个静态文本控件,未指定内容、大小和位置
UILabel *label = [[UILabel alloc]init];//设置静态文本显示文字"Hello World"
//"@"的作用是把一个c风格的字符串"hello world"包装成一个NSString对象
label.text = @"hello world";//让静态文本的大小自适应内容
[label sizeToFit];//让静态文本居于整个视图的中央
label.center = self.view.center;//将静态文本添加到主视图中
[self.view addSubview: label];
0X04 运行程序
第一步,回到 Xcode 界面中,选中苹果机型模拟器,点击左侧的播放按钮
我们在图中选择的是 iPhone 13 机型
第二步,你就会看到一个写着“hello world” 的应用跑起来了。
是不是很简单?快来试试吧
Android 篇
与开发 iOS 应用的逻辑基本一致,开发 Android 应用也需要以下 5 步:
- 开发工具安装和配置
- 搭建开发环境
- 在 Android Studio 中,创建第一个项目
- 完成简单 Hello world 代码编写
- 编译 APK 文件,让应用在手机上跑起来
0X00 开发工具安装和配置
第一步,需要先在 Android 官网下载 Android Studio(直接点击 传送门 进入下载链接), 如果你不会科学上网的话,也可以在 国内镜像 下载。
但想成为专业的安卓研发,还是要学会科学上网
同意协议后选择自己的机型
在这里可以根据你的电脑型号(浏览器会自动根据机型推荐链接,比如我的就是 Intel 芯片的 MacBook )下载安装包,在下载完成后双击跟着提示一步一步完成安装就行了。
0X01 搭建开发环境
与 Xcode 不同,我们还需要在正式编写 Android 应用前,配置本地的开发环境。
第一步,安装 JDK 8
首先需要安装 JDK 8,JDK 就是研发 Android 应用的官方环境,点击 这里 下载(我的链接也是适用于 Mac 电脑,如果你的电脑不一样需要切换一下)。
在第二个箭头处,可以切换不同的操作系统
下载完成后,双击下载好的 jdk-8u311-macosx-x64.dmg ,单击接受许可协议后,在新出现的“安装类型窗口”中,点击“安装”。
此时会出现一个窗口,显示“安装程序正在尝试安装新软件。输入您的密码以允许此操作”。
所以我们需要再输入管理员密码之后,再次点击“安装软件”。等到显示确认窗口之后,即可完成安装。
第二步,配置 JDK 环境
在第一步中,我们只是把 JDK1.8 的文件复制到操作系统上。但还需要让其他应用知道 JDK1.8 环境存在的具体位置,因此我们还需要配置系统的环境变量。
但首先,我们自己得先知道 JDK 目录安装在哪里,按照下面的路径我们可以找到 JDK 的主目录,如下图所示:
JDK 安装目录 /Library/Java/JavaVirtualMachines
也就是说,JDK 的真实目录在这里 /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home,
既然知道了 JDK 的安装目录,那就让我们打开终端(同时按住键盘上的 command 和空格,并在之后的弹框中输入 terminal.app 后敲击回车)开始配置:
vi ~/.zshrc or vi ~/.bash_profile
在文件的末尾加入这一行语句:
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home
然后用 source 命令更新环境配置
source ~/.zshrc or source ~/.bash_profile
配置完毕后,我们就可以验证 Java 环境配置是否正确了,依然在终端中输入
java -version
如果正确显示出了版本号,就代表配置成功了
0X02 在 Android Studio 中,创建第一个项目
打开 Android Studio ,Android Studio 第一次打开需要下载 Android SDK 和 Gradle 等工具包, 所以第一次打开可能比较慢(合理科学上网会快一些),Android Studio 准备好后,开始创建第一个项目。
第一步,新建项目
点击界面中的 New Project
选择中间的空模板 Empty Activity
在这里输入项目信息
之后,点击 Finish 就可以完成项目的创建了。
0X03 完成简单 Hello world 代码编写
首先让我们认识 Android 应用的项目文件结构:
Android 的页面是由一个个 Activity 组成的,页面主要分为 UI 布局部分和逻辑处理部分, UI 布局部分需要由上图中蓝色 main 目录下的 activity_main.xml 文件处理,而逻辑部分则是由 com.myname.myapplication 中的 MainActivity 文件处理。
所以我们也需要修改 UI 布局与逻辑 2个文件,首先编辑 activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="点击我"android:id="@+id/button"android:textAllCaps="false"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
然后编辑 MainActivity :
package com.myname.myapplicationimport androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.Toastclass MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)this.findViewById<Button>(R.id.button).setOnClickListener {Toast.makeText(MainActivity@this,"hello world",Toast.LENGTH_LONG).show()}}
}
这段代码的逻辑大致是这样的,首先通过按钮的 id 找到这个按钮的对象(findViewById(R.id.button)),然后给 button 按钮增加一个点击监听器(setOnClickListener),当按钮被用户触发后,就会回调这个方法。而一旦这个匿名方法被触发,通过 Toast 弹出一串 hello world 的文字内容。
0X04 编译 APK 文件,让应用在手机上跑起来
第一步,打开安卓手机的开发者模式,在开放者选项里面打开 USB 调试
一定要确保打开了后面的开关
第二步,通过数据线将电脑和手机连接在一起
Android Studio 会自动识别你的手机型号,启动按钮也会变成绿色可点击的样式
让我们选中这个 apk 文件,并且点击绿色的播放按钮
Android studio 会完成整个项目的编译打包,并且将 App 安装到你的手机后开始启动 App 完成所有的流程。
这些流程都是自动化完成的,开发者不需要介入。编译打包完成后会在**/MyApplication/app/build/outputs/apk/debug 目录下出现 app-debug.apk 文件,这也是可以在安卓手机中安装移动应用的安装包。
第三步,大功告成,不出意外你会看到成功打开了 App !
点击按钮会出现下面的 toast 消息
如果正确按照教程,那相信你已经成功的做出了属于自己的第一个 iOS 与 Android 应用,本期教程基于 mac 电脑进行实现,如果你的电脑是 Windows 或者其他操作系统,还需要进行一些其他的灵活配置。
FinClip手把手教学:如何从零开始编写一个app相关推荐
- 从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
- 从零开始编写一个上位机(串口助手)QT Creator + Python
提示:本博客作为学习笔记,有错误的地方希望指正,此文可能会比较长,作为学习笔记的积累,希望对来着有帮助. 绪论:笔者这里使用的是QTCreator和Python来实现一个简单的串口上位机的开发的简 ...
- 从零开始编写一个宠物识别系统(爬虫、模型训练和调优、模型部署、Web服务)
心血来潮,想从零开始编写一个相对完整的深度学习小项目.想到就做,那么首先要考虑的问题是,写什么? 思量再三,我决定写一个宠物识别系统,即给定一张图片,判断图片上的宠物是什么.宠物种类暂定为四类--猫. ...
- QT案例实战1 - 从零开始编写一个OCR工具软件 (3)创建项目
一.创建项目 打开Qt Creator,点击Create Project. 可以看到项目类型有应用.应用for python.类库等等,这里选择第一个QT应用,然后第二个栏中选择QT Weidgets ...
- Linux驱动开发(从零开始编写一个驱动程序)
1.系统整体工作原理 (1)应用层->API->设备驱动->硬件 (2)API:open.read.write.close等 (3)驱动源码中提供真正的open.read.write ...
- 从零开始编写一个上位机(串口助手)QT Creator + C++
提示:本博客作为学习笔记,有错误的地方希望指正,此文可能会比较长,作为学习笔记的积累,希望对来着有帮助. 绪论:笔者这里使用的是QTCreator和C++来实现一个简单的串口上位机的开发的简单过程 ...
- 从零开始编写一个微信小程序(微信开发者工具+JS+WuxUI组件库+云开发)万字整理,建议收藏!
微信小程序-魔镜 笔记&源码(微信开发者工具+JS+UI组件库+云开发) 效果展示 视频演示 经历了一次升级之后,我的小程序怎么样了? 文章目录 微信小程序-魔镜 笔记&源码(微信开发 ...
- QT案例实战1 - 从零开始编写一个OCR工具软件 (8) Pdf读取展示/截图/文字识别
一.PDF读取展示功能 QT提供了pdf.PdfWidgets模块,需要安装模块,然后在项目的CMakeLists.txt文件内,添加如下代码,以便在项目中使用. 官方提供了完整的pdf展示示例,示例 ...
- QT案例实战1 - 从零开始编写一个OCR工具软件 (6) 关于QThread线程的使用
一.为什么用线程 在这里将ocr识别的这个耗时的操作放在新线程内,这样是为了主线程/UI界面不会卡在那里没有响应.如果说不在乎用户体验,ocr识别也可以放在主线程,卡住就卡住,就是会被骂. 不过关于线 ...
- 从零开始编写一个js插件
什么是js插件 首先我们必须要明白什么是js插件,说的简单点,类似于 function add(a, b){ return a+b; } 这就是一种插件的雏形,因为它还没有封装起来, 它会影响到工作区 ...
最新文章
- Linux 系统上的库文件生成与使用
- DNN安装报错-The stored procedure 'dbo.GetPortalAliasByPortalID' doesn't exist.如何解决
- hdu -4284 Travel(状态压缩)
- Java黑皮书课后题第5章:**5.28(显示每月第一天是周几)编写程序,提示用户输入年份和代表概念第一天是周几的数字,然后在控制台显示该年各个月份的第一天是周几
- 反射学习系列3-反射实例应用
- Teradata Expression 12 在Windows 2003上Connection Reset 问题的解决方法
- openwrt多拨插件_折腾小日记三:爱快PKopenwrt多拨实测
- 如何防止 Safari 使用来自 iOS 15 和 macOS Monterey 的网站着色?
- Linux中的Page cache和Buffer cache详解
- centos7 mysql安装_CentOS7安装MySQL(详解)
- 数据挖掘:Bloom filter
- 泛微云桥e-Bridge-任意文件读取漏洞
- CTO、技术总监、首席架构师的区别
- glTexSubImage2D的使用详解
- MySQL 那些监控参数 问 答 (4)REDO AHI latch 锁
- reset.css normalize.css,normalize与css reset的区别
- MATLAB2018a Simulink生成CCS代码教程
- java 开源 聊天机器人_用Java实现基于Web端的AI机器人聊天
- Kubernetes学习之Deployment控制器
- photoshopcs5 win7安装报错的解决