写出第一行 Hello World

网友投稿 681 2022-11-23

本文原创内容发布在凡泰极客博客上:手把手第一篇:写出第一行HelloWorld

写出第一行 Hello World



iOS篇

开发一个iOS移动应用大致需要以下4步:


工具准备

新建项目

认识Xcode

添加代码

运行程序



0X00工具准备

工欲善其事必先利其器,一个Mac设备必不可少(iMac、MacBook皆可),接下来-最新版本的Xcode作为iOS开发的IDE(IntegratedDevelopmentEnvironment,集成开发环境,就是编辑、编译、链接、调试统统包含的一揽子开发环境,移动开发的IDE一般还会包含移动设备的模拟器)。

建议从MacAppStore进行-和安装,免费哦~


在MacAppStore搜索Xcode,第一个就是了


0X01新建项目

第一步,打开Xcode,点击首页的CreateanewXcodeproject


第一行,不要点错了

第二步,依次选择界面中的iOS-App-Next


其实Xcode提供了非常多的应用,比如游戏,虚拟现实,iMessage应用等等

第三步,在ProductName中输入hello,world然后选择Next


每一个写代码的初学者,都精通于通过各种语言写出第一个Hello,world

第四步,选择一个存储移动应用的文件夹,点击create


在这里我们把文件夹放在了桌面

第五步,一个初始的项目就建好了!


0X02认识Xcode


这就是Xcode的开发界面

Xcode开发环境的默认基本框架如上图:


左侧是项目的文件列表,或者叫项目导航(ProjectNavigator)(左侧实际包含更多的内容,切换左上角8个图标可以看到更多的页签);

中间是我们的编辑区域(Editor),根据左侧点击的不同文件,中间会展示代码、界面、项目设置、素材等等;

右侧会有一些Inspector和Library,这次暂时用不到。



0X03添加代码

第一步,点击左侧项目导航中的ViewController.m


记住,不要点击错了

在ViewController.m的代码中找到一个函数叫做viewDidLoad,这个函数里已经有一行代码:

[superviewDidLoad];

在这行代码后面添加这一段代码:

UILabel*label=[[UILabelalloc]init];

label.text=@"helloworld";

[labelsizeToFit];

label.center=self.view.center;

[self.viewaddSubview:label];


在这里我们简单解释下这五行代码是干什么的:


//这一句创建了一个静态文本控件,未指定内容、大小和位置

UILabel*label=[[UILabelalloc]init];


//设置静态文本显示文字"HelloWorld"

//"@"的作用是把一个c风格的字符串"helloworld"包装成一个NSString对象

label.text=@"helloworld";


//让静态文本的大小自适应内容

[labelsizeToFit];


//让静态文本居于整个视图的中央

label.center=self.view.center;


//将静态文本添加到主视图中

[self.viewaddSubview:label];


0X04运行程序

第一步,回到Xcode界面中,选中苹果机型模拟器,点击左侧的播放按钮


我们在图中选择的是iPhone13机型

第二步,你就会看到一个写着“helloworld”的应用跑起来了。


是不是很简单?快来试试吧


Android篇

与开发iOS应用的逻辑基本一致,开发Android应用也需要以下5步:


开发工具安装和配置

搭建开发环境

在AndroidStudio中,创建第一个项目

完成简单Helloworld代码编写

编译APK文件,让应用在手机上跑起来



0X00开发工具安装和配置

第一步,需要先在Android官网-AndroidStudio(直接点击传送门进入-链接),如果你不会科学上网的话,也可以在国内镜像-。


但想成为专业的安卓研发,还是要学会科学上网


同意协议后选择自己的机型

在这里可以根据你的电脑型号(浏览器会自动根据机型推荐链接,比如我的就是Intel芯片的MacBook)-安装包,在-完成后双击跟着提示一步一步完成安装就行了。


0X01搭建开发环境

与Xcode不同,我们还需要在正式编写Android应用前,配置本地的开发环境。

第一步,安装JDK8

首先需要安装JDK8,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~/.zshrcorvi~/.bash_profile

在文件的末尾加入这一行语句:

exportJAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home

然后用source命令更新环境配置

source~/.zshrcorsource~/.bash_profile

配置完毕后,我们就可以验证Java环境配置是否正确了,依然在终端中输入

java-version


如果正确显示出了版本号,就代表配置成功了


0X02在AndroidStudio中,创建第一个项目

打开AndroidStudio,AndroidStudio第一次打开需要-AndroidSDK和Gradle等工具包,所以第一次打开可能比较慢(合理科学上网会快一些),AndroidStudio准备好后,开始创建第一个项目。

第一步,新建项目


点击界面中的NewProject


选择中间的空模板EmptyActivity


在这里输入项目信息

之后,点击Finish就可以完成项目的创建了。


0X03完成简单Helloworld代码编写

首先让我们认识Android应用的项目文件结构:


Android的页面是由一个个Activity组成的,页面主要分为UI布局部分和逻辑处理部分,UI布局部分需要由上图中蓝色main目录下的activity_main.xml文件处理,而逻辑部分则是由com.myname.myapplication中的MainActivity文件处理。

所以我们也需要修改UI布局与逻辑2个文件,首先编辑activity_main.xml:

<?xmlversion="1.0"encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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">


<Button

android: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:

packagecom.myname.myapplication


importandroidx.appcompat.app.AppCompatActivity

importandroid.os.Bundle

importandroid.widget.Button

importandroid.widget.Toast


classMainActivity:AppCompatActivity(){

overridefunonCreate(savedInstanceState:Bundle?){

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)


this.findViewById<Button>(R.id.button).setOnClickListener{

Toast.makeText(MainActivity@this,"helloworld",Toast.LENGTH_LONG).show()

}

}

}


这段代码的逻辑大致是这样的,首先通过按钮的id找到这个按钮的对象(findViewById(R.id.button)),然后给button按钮增加一个点击-(setOnClickListener),当按钮被用户触发后,就会回调这个方法。而一旦这个匿名方法被触发,通过Toast弹出一串helloworld的文字内容。



0X04编译APK文件,让应用在手机上跑起来

第一步,打开安卓手机的开发者模式,在开放者选项里面打开USB调试


一定要确保打开了后面的开关

第二步,通过数据线将电脑和手机连接在一起


AndroidStudio会自动识别你的手机型号,启动按钮也会变成绿色可点击的样式


让我们选中这个apk文件,并且点击绿色的播放按钮

Androidstudio会完成整个项目的编译打包,并且将App安装到你的手机后开始启动App完成所有的流程。


这些流程都是自动化完成的,开发者不需要介入。编译打包完成后会在**/MyApplication/app/build/outputs/apk/debug目录下出现app-debug.apk文件,这也是可以在安卓手机中安装移动应用的安装包。


第三步,大功告成,不出意外你会看到成功打开了App!


点击按钮会出现下面的toast消息


如果正确按照教程,那相信你已经成功的做出了属于自己的第一个iOS与Android应用,本期教程基于mac电脑进行实现,如果你的电脑是Windows或者其他操作系统,还需要进行一些其他的灵活配置。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小程序转APP,小团队也能实现数字化生态闭环
下一篇:直播微信小程序能运行在自有App上吗?
相关文章

 发表评论

暂时没有评论,来抢沙发吧~