当前位置: 首页 > Web前端 > HTML

保姆级教程:写出自己的移动应用和小程序(篇一)

时间:2023-03-28 13:31:08 HTML

保姆级教程:编写自己的手机APP和小程序(上)团队成员均有5年以上一线研发经验。希望通过自己在工作中的实践经验总结,能够有效地帮助那些想学习移动应用开发的新手朋友们认识和了解小程序开发这个新技术领域。本系列文章讲述的内容简单易懂,可以作为前端开发初学者的入门读物。即使是开发初学者,也能从零到一在自己的手机应用中嵌入一个自己编写的小程序。本文重点:制作iOS/Android应用iOS文章开发iOS手机应用一般需要以下4个步骤:工具准备新项目了解Xcode添加代码运行程序0X00工具准备工欲善其事必先利其器要想做好,一台Mac设备是必不可少的(iMac和MacBook都可以),然后下载最新版的Xcode作为iOS开发的IDE(IntegratedDevelopmentEnvironment,集成开发环境,是一个包开发环境,包括编辑、编译、链接和调试,移动开发IDE通常还包括用于移动设备的模拟器)。建议从MacAppStore下载安装,是免费的~在MacAppStore搜索Xcode,第一个是0X01新建工程的第一步,打开Xcode,点击第一行的Createa在首页新建Xcode项目,不要点错第二步,在界面中依次选择iOS-App-Next。其实Xcode提供了很多应用,比如游戏,虚拟现实,iMessage应用等等第三步,在ProductName中输入hello,world,为每个选择Next写代码的初学者熟练写第一个你好,各种语言的世界。第四步:选择一个存放手机应用的文件夹,点击创建这里我们把文件夹放到桌面上第五步,一个初始工程搭建完成!0X02KnowXcode这是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.查看addSubview:标签];这里简单解释一下这五行代码的作用://这句话创建了一个静态文本控件,没有指定内容、大小和位置UILabel*label=[[UILabelalloc]init];//设置静态文本显示文本"HelloWorld"//"@"的作用是将一个c风格的字符串"helloworld"包装成一个NSString对象label.text=@"helloworld";//让静态文本大小自适应内容[labelsizeToFit];//让静态文本居于整个视图的中心label.center=self.view.center;//在主视图中添加静态文本0X04run程序第一步,回到Xcode界面,选择苹果机型模拟器,点击左侧播放按钮。我们选择了图中的iPhone13机型。第二步,你会看到一条消息,说“helloworld”applicationstarted。是不是很简单?快来试试吧。Android章节与开发iOS应用的逻辑基本相同。开发Android应用也需要以下5个步骤:开发工具安装和配置搭建开发环境在AndroidStudio中,创建第一个项目,完成简单的Helloworld代码编译和编译APK文件,让应用在手机上运行0X00第一个在开发工具的安装和配置步骤中,需要在Android官网下载AndroidStudio(直接点击传送门进入下载链接)。镜像下载。但是如果你想成为一名专业的Android开发者,你还是要学会科学上网,在同意协议后选择适合自己的机型。你可以根据自己的电脑型号在这里下载(浏览器会根据型号自动推荐链接,比如我的是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~/.zshrc或vi~/.bash_profile在文件末尾添加这一行:exportJAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/内容/home然后使用source命令更新环境配置source~/.zshrc或source~/.bash_profile配置完成后,我们可以验证Java环境配置是否正确。还是在终端输入java-version,如果版本正确显示No,说明配置成功。0X02在AndroidStudio中,创建第一个项目并打开AndroidStudio。第一次打开AndroidStudio需要下载AndroidSDK、Gradle等工具包,所以第一次打开可能会比较慢(合理科学的在线会更快),待AndroidStudio准备好后,开始创建第一个工程。第一步是创建一个新项目。在界面中点击NewProject,选择中间的空模板EmptyActivity。这里输入项目信息后,点击Finish完成项目的创建。0X03完成简单的Helloworld代码编写首先,让我们了解一下Android应用的工程文件结构:Android页面由Activity组成,页面主要分为UI布局和逻辑处理。处理主目录下的activity_main.xml文件,逻辑部分由com.myname.myapplication中的MainActivity文件处理。所以我们还需要修改UI布局和逻辑这两个文件,首先编辑activity_main.xml:然后编辑MainActivity::AppCompatActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)this.findViewById