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应用。
- 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是如何构建应用的。