uni-app入门简介

一：uni-app介绍
- 什么是uni-app？
- 为什么要选择uni-app？
- uni-app功能框架
- 一套代码，运行到多个平台
- 快速上手
- 框架简介
- - 1.开发规范
  - 2.目录结构
- 生命周期
- 路由
- 运行环境判断
- - 页面样式与布局
二：框架
三：组件
四：API
五：学习拓展资料

一：uni-app介绍

什么是uni-app？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有500万开发者用户，几十万应用案例、10亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

为什么要选择uni-app？

uni-app在开发者/案例数量更多、跨端抹平度、扩展灵活性、性能体验、周边生态丰富、学习成本、开发成本等8大关键指标上拥有更强的优势。

uni-app功能框架

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

一套代码，运行到多个平台

uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）：

快速上手

1. 通过 HBuilderX 可视化界面
可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs，HBuilderX：官方IDE下载地址。
快速上手可分为以下三个步骤
a.创建项目
b.运行项目
c.发布项目
2. 通过vue-cli命令行
除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目；详见官网介绍。

框架简介

1.开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

页面文件遵循 Vue 单文件组件 (SFC) 规范;
组件标签靠近小程序规范，详见uni-app 组件规范;
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范;
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期;
为兼容多端运行，建议使用flex布局进行开发;

2.目录结构

一个uni-app工程，默认包含如下目录及文件：

  ┌─components          uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录;
├─platforms             存放各平台专用页面的目录;
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录;
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息;
└─pages.json            配置页面路由、导航条、选项卡等页面类信息;

生命周期

1.应用生命周期
2.页面生命周期
3.组件生命周期

路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router。

路由跳转
uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

页面栈
框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现，详见。

运行环境判断

开发环境和生产环境
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
cli模式下，是通行的编译环境处理方式。

if(process.env.NODE_ENV === 'development'){console.log('开发环境')
}else{console.log('生产环境')
}

判断平台
平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。

编译期判断: 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。详见：条件编译

// #ifdef H5alert("只有h5平台才有alert方法")
// #endif

如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。

运行期判断: 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）。

switch(uni.getSystemInfoSync().platform){case 'android':console.log('运行Android上')break;case 'ios':console.log('运行iOS上')break;default:console.log('运行在开发者工具上')break;
}

如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。

页面样式与布局

页面样式与布局： 可分为尺寸单位，样式导入，内联样式，选择器，全局样式与局部样式，CSS变量，固定值，Flex布局，背景图片，字体图标等；详见官方文档。

二：框架

配置

框架接口

自动化测试

三：组件

组件可分为不同类型，大致如下，详见：

视图容器
基础内容
表单组件
导航
媒体组件
地图
画布
webview
广告
小程序开放能力组件
APP nvue专用组件
扩展组件
导航栏

四：API

uni-app开发API可分为不同类型，大致如下，详见：

基础
网络
路由与页面跳转
数据缓存
位置
媒体
设备
Worker
键盘
界面
页面和窗体
文件
绘画
广告
第三方服务
平台扩展
其他

五：学习拓展资料

uni-app官网
uni-app插件市场
uni-app项目github地址
Vue.js 基础教程