随着移动互联网的迅猛发展,app应用的井喷式增长,越来越多的人开始希望可以自己开发一款应用,但又面临许多困难,例如:编程语言、编辑器的选择以及一些基本的编程概念等等,这些都是初学者最头疼的问题。那么,本文将会以0基础1小时开发app为主题,为初学者提供思路,突破疑惑。
第一步:基础知识的简要学习
在进行写作之前,我们需要了解一些基本的编程概念。其中我们需要掌握的是如下的几个方面:
1.编程语言
我们在进行app开发时,可以选择的编程语言有很多,例如Java, Swift, Python等等,但是,如果是从0开始学习,我们需要选择大多数人都会选的入门级语言--JavaScript
2. IDE/编辑器
在写代码时,我们需要一个IDE/编辑器来帮助我们管理代码,将代码转化为应用程序。目前比较流行的一些编辑器有:Atom、VScode、Sublimetext等等。
3. 前端与后端
在进行app开发时,我们需要将前端(指的是与用户直接交互的部分:UI设计等)和后端(指的是与服务器交互部分:网络请求等)分离,分别进行开发。
4. 框架与库
框架与库可以用来辅助开发,减少代码量。例如React Native就是一个非常优秀的框架。
学习这些基本概念对于我们后续的学习大有裨益。当然,对于有编程基础的人来说这些就不是问题了,直接可以跳过。
第二步:选择框架与编辑器
由于需要快速、高效的完成,React Native框架及VScode编辑器是两个不错的选择。
React Native 是一款优秀的跨平台框架,能够让开发人员使用JavaScript,构建跨平台应用程序。与其他跨平台解决方案不同的是,React Native并不是混合本地和网络代码的模型,而是完全基于本地模式。
VScode是微软推出的开源轻量级编辑器,支持多种编程语言,并且支持许多扩展,可以通过安装不同的扩展来提供更强大的功能。
有了选好的编辑器和框架,我们就准备好了开始开发了。
第三步:开发流程
在这里我们通过构建一个简单的Todo List来介绍开发流程。
1.创建项目
打开VScode,新建一个文件夹,然后右键选择“在终端中打开”,输入“npm init”,创建一个新的Node.js项目。
2.安装React Native框架
在终端中输入以下命令:
```
npm install -g react-native-cli
```
3.创建React Native应用程序
在终端中输入以下命令:
```
react-native init AwesomeProject
```
4.运行应用程序
执行以下命令来启动React Native应用程序的开发服务器:
```
cd AwesomeProject
npx react-native start
```
然后你就可以看到应用程序在模拟器或者真机上的运行效果啦!
5.修改应用程序的源代码
打开AwesomeProject文件夹,在index.js中进行修改。
```
import React, { useState } from 'react';
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
export default function App() {
const [task, setTask] = useState('');
const [taskList, setTaskList] = useState([]);
const handleAddTask = () => {
setTaskList([...taskList, task]);
setTask('');
}
return (
{ taskList.map((item, index) => (
))}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: '#fff',
},
title: {
fontSize: 32,
fontWeight: "700",
marginBottom: 24,
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 24,
},
input: {
flex: 1,
height: 40,
borderWidth: 1,
borderRadius: 6,
padding: 8,
marginRight: 12,
},
button: {
backgroundColor: 'green',
color: '#fff',
borderRadius: 6,
padding: 8,
fontWeight: "700",
},
task: {
borderWidth: 1,
borderRadius: 6,
padding: 16,
marginBottom: 8,
},
taskText: {
fontSize: 20,
fontWeight: "500",
},
});
```
这里是一个简单的Todo List应用程序。在React Native的jsx语言中,我们使用TouchableOpacity和View组件来创建按钮和布局。
第四步:总结
最后,我们还是花费了1个小时以上的时间来开发一个初级应用程序。但是,基本的目标已经实现了,我们可以在模拟器或真机上看到我们开发的app。如果您想更进一步学习,继续提高您的技能,相信您已经打下了一个很好的基础了!