UniApp 基础

什么是 UniApp

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

uni-app 简单来说是 Vue 的语法 + 小程序的 API，它遵循 Vue.js 语法规范，组件和 API 遵循微信小程序命名。

特点

跨平台更多 — 真正做到一套代码、多端发行；条件编译可优雅调用不同平台特色功能
运行体验更好 — 组件、API 与微信小程序一致；兼容 Weex 原生渲染
通用技术栈 — Vue 语法、微信小程序的 API；内嵌 mpvue
开发生态 — 支持 npm 安装第三方包；支持微信小程序自定义组件及 SDK；兼容 mpvue 组件及项目；App 端支持和原生混合编码；DCloud 插件市场

支持版本

Web 端：无限制，同 Vue2/Vue3 自身支持的浏览器版本
小程序端：无限制，同该小程序自身支持的最低平台
App 端：
- Vue2：Android 4.4+、iOS 9+
- Vue3：Android 5+、iOS 10+

目录结构

┌─uniCloud              云空间目录
│─components            符合 Vue 组件规范的 uni-app 组件目录
│  └─comp-a.vue         可复用的 a 组件
├─utssdk                存放 uts 文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index 页面
│  └─list
│     └─list.vue        list 页面
├─static                存放应用引用的本地静态资源（如图片、视频等）
├─uni_modules           存放 uni_module
├─platforms             存放各平台专用页面的目录
├─nativeplugins         App 原生语言插件
├─nativeResources       App 端原生资源目录
│  └─android            Android 原生资源目录
├─hybrid                App 端存放本地 html 文件的目录
├─wxcomponents          存放小程序组件的目录
├─unpackage             非工程代码，存放运行或发行的编译结果
├─AndroidManifest.xml   Android 原生应用清单文件
├─main.js               Vue 初始化入口文件
├─App.vue               应用配置，配置 App 全局样式以及监听应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              内置的常用样式变量

┌─uniCloud              云空间目录
│─components            符合 Vue 组件规范的 uni-app 组件目录
│  └─comp-a.vue         可复用的 a 组件
├─utssdk                存放 uts 文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index 页面
│  └─list
│     └─list.vue        list 页面
├─static                存放应用引用的本地静态资源（如图片、视频等）
├─uni_modules           存放 uni_module
├─platforms             存放各平台专用页面的目录
├─nativeplugins         App 原生语言插件
├─nativeResources       App 端原生资源目录
│  └─android            Android 原生资源目录
├─hybrid                App 端存放本地 html 文件的目录
├─wxcomponents          存放小程序组件的目录
├─unpackage             非工程代码，存放运行或发行的编译结果
├─AndroidManifest.xml   Android 原生应用清单文件
├─main.js               Vue 初始化入口文件
├─App.vue               应用配置，配置 App 全局样式以及监听应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              内置的常用样式变量

static 目录注意：编译到任意平台时，static 目录下除不满足条件编译的文件，会直接复制到最终的打包目录。非 static 目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。css、less/scss 等资源不要放在 static 目录，建议放在自建的 common 目录下。

Vue.js vs UniApp

平台适配性：Vue.js 主要用于构建 Web 应用，UniApp 能生成多平台应用（小程序、H5、App）
原生能力访问：UniApp 提供了对原生平台 API 和能力的访问
组件库和 UI 样式：UniApp 提供了一套基于 Vue.js 的组件库和 UI 样式

globalData 全局变量

在 App.vue 中定义：

vue

<script>
export default {
  globalData: {
    text: 'text',
  },
}
</script>

<script>
export default {
  globalData: {
    text: 'text',
  },
}
</script>

其他页面获取：

getApp().globalData.text = 'test'

getApp().globalData.text = 'test'

globalData 是简单的全局变量，如果使用状态管理，请使用 vuex

CSS 变量

变量	描述
`--status-bar-height`	系统状态栏高度
`--window-top`	内容区域距离顶部的距离
`--window-bottom`	内容区域距离底部的距离

注意：

var(--status-bar-height) 在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度
当设置 navigationStyle: "custom" 取消原生导航栏后，可使用高度为 var(--status-bar-height) 的 view 占位
--window-bottom 在 H5 端避免与 tabbar 重叠
nvue 在 App 端不支持 --status-bar-height，需通过 uni.getSystemInfoSync().statusBarHeight 获取

屏幕单位

px — 屏幕像素
rpx — 响应式 px，以 750 宽屏幕为基准，750rpx 恰好为屏幕宽度

vue 页面还支持 H5 单位（nvue 不支持）：

rem — 根字体大小可通过 page-meta 配置
vh — 视窗高度，1vh 等于视窗高度的 1%
vw — 视窗宽度，1vw 等于视窗宽度的 1%

UniApp 基础 ​

什么是 UniApp ​

特点 ​

支持版本 ​

目录结构 ​

Vue.js vs UniApp ​

globalData 全局变量 ​

CSS 变量 ​

屏幕单位 ​