uniapp从零开始-框架背景与项目创建

1.大前端时代下的跨平台开发

在大前端时代下，前端开发人员仅仅掌握单一的web开发能力已经完全无法满足市场需求。例如我们想要在美团上买一张旅游景点的门票，既可以在美团的Android APP中操作，也可以在美团的IOS APP中操作，还可以在美团的微信小程序端、快手小程序、抖音小程序、支付宝小程序操作。对于顾客来说，不管在哪个平台都可以体验到同样的服务，但对于开发者来说，多一个平台就意味着多一个需要开发的项目。那么能否只使用一套代码就可以在多个平台部署运行呢？市面上有多种跨平台开发方案，例如Uniapp，Flutter，ReactNative，Taro，Weex等。

国内最知名使用最广泛的跨平台解决方案当属uniapp，生态完善，社区活跃，且学习成本极低。目前使用uniapp开发的小程序已达到数十万，uni月活近12亿，是我们学习大前端开发的首选框架。

2.uniapp开发环境搭建

uniapp是一个使用vue.js开发的前端跨平台开发框架，你只需要编写一套代码即可发布到Android，IOS，H5，以及多种小程序（抖音/头条/快手/微信/支付宝/QQ/百度）。因此在开发uniapp应用前我们首先应该掌握HTML，CSS，Javascript的使用，其次要掌握比较熟练的vue开发能力
开发uniapp应用使用HBuilderX工具，官网www.dcloud.io/，HBuilderX为uniapp开发做了特别增强

选择文件->新建->项目，输入项目名称和保存路径，选择项目模板，点击创建即可生成一个可运行的uniapp应用。

css 复制代码

┌─components     uni-app组件目录
│ └─a.vue        项目中可复用的组件 
├─hybrid         存放静态HTML页面的目录（自建） 
├─platforms      存放不同平台专用页面的目录（自建） 
├─pages          业务页面文件存放的目录 
│ ├─index 
│ │ └─index.vue  index页面 
│ └─list 
│   └─list.vue   list页面 
├─static         存放应用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此 
├─common         公共资源，包含less，scss，js等需要编译的资源文件（自建） 
├─api            请求封装（自建） 
├─store          Vuex状态管理（自建） 
├─main.js        Vue初始化入口文件 
├─App.vue        应用配置，用来配置App全局样式以及监听 应用生命周期 
├─manifest.json  配置应用名称、appid、logo、版本等打包信息 
├─pages.json     配置页面路由、导航条、选项卡等页面类信息
└─uni.scss       项目默认样式文件，代码无需引用即生效

main.js是整个应用的入口，在这个文件中我们初始化了一个vue实例，定义全局使用到的组件并挂到实例上。
App.vue文件是uniapp的主组件所有vue页面的呈现都在App.vue中，是所有页面的父组件。但此文件不可编写视图元素，仅仅用来调用应用生命周期函数，配置全局样式，配置全局存储golbalData。
pages.json文件中配置了项目的路由，导航条，选项卡等信息，类似于vue-router中的路由配置文件但比其功能更强，后面我们会详细描述pages.json文件应该包含哪些配置并如何影响我们的小程序功能。

至此，我们了解了uniapp项目的基本结构，后面我们将用一个简单项目举例来详细描述在uniapp开发过程中uniapp是如何构建应用的。