uni-app
第一章：初识
一、是什么
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、鸿蒙 Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。
uni-app 是 DCloud 公司推出的，这个公司还有一个非常好用的 IDE 叫 HBuilderX，简称 HX。
二、功能框架图
uni-app 支持两种后缀文件，分别是 vue 和 nvue，他们有什么区别？
uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。
在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面 (native vue 的缩写)，则使用原生渲染。
结论：Web 前端工程师就只用 vue 后缀文件即可。
三、快速上手
1. 安装 HBuilderX
HBuilderX：官方 IDE 下载地址
HBuilderX 是通用的前端开发工具，但为 uni-app 开发做了特别强化。所以使用 uni-app 开发程序就首选 HBuilderX。
2. 配置 HX
首次使用，请配置好调试环境，在工具栏里的【工具】->【设置】->【运行配置】。
如果开发微信等小程序，在 manifest.json 中记得配置 AppID。
3. 创建 & 运行 uni-app
在点击工具栏里的【文件】->【新建】->【项目】。
选择 uni-app 类型，输入工程名，选择模板，点击创建，即可成功创建。
要运行项目请点击工具栏里的【运行】->【……】。
4. 目录结构
┌─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules 存放 uni_module
├─wxcomponents 存放微信小程序、QQ小程序组件的目录
├─mycomponents 存放支付宝小程序组件的目录
├─swancomponents 存放百度小程序组件的目录
├─ttcomponents 存放抖音小程序、飞书小程序组件的目录
├─kscomponents 存放快手小程序组件的目录
├─jdcomponents 存放京东小程序组件的目录
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─index.html
├─main.js Vue初始化入口文件
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
├─uni.promisify.adaptor.js
└─uni.scss 内置的常用样式变量1）uni.promisify.adaptor.js
如果你使用的是 Vue3，那么这个文件可以删除，之后在 main.js 中记得删除对这个文件的引入。
uni.addInterceptor({
returnValue (res) { // 方法调用后触发，处理返回值
// 1. 判断返回值是否是一个 Promise (thenable 对象)
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
return res;
}
// 2. 如果是 Promise，则重新包装一个新的 Promise
return new Promise((resolve, reject) => {
res.then((res) => {
if (!res) return resolve(res)
// 3. 核心逻辑：处理 [err, data] 格式
// 如果 res[0] 存在（即有错误），则 reject(err)
// 否则 resolve(res[1])（即成功数据）
return res[0] ? reject(res[0]) : resolve(res[1])
});
});
},
});这个文件的主要作用是调整 uni-app API 的 Promise 返回格式，使其符合标准的 Promise 规范（即成功时 resolve 数据，失败时 reject 错误），而不是返回一个包含错误和数据的数组。
// 默认行为 (无适配器): 即使请求失败，Promise 也是 resolve，需要手动判断数组第一个元素
const [err, res] = await uni.request({ url: '...' });
if (err) {
console.error('请求失败', err);
} else {
console.log('请求成功', res);
}附加：uni.addInterceptor(STRING, OBJECT) API 官方文档解释。
第二章：全局文件
一、重要
1. pages.json 页面路由
用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。
注意：微信小程序的定位权限申请等原属于 app.json 的内容，但在 uni-app 中是在 manifest 中配置。
1）globalStyle
用于设置应用的状态栏、导航条、标题、窗口背景色等。
| 属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #F8F8F8 | 导航栏背景颜色（同状态栏背景色） | APP 与 H5 为#F8F8F8，小程序平台请参考相应小程序文档 |
| navigationBarTextStyle | String | black | 导航栏标题颜色及状态栏前景颜色，仅支持 black/white | |
| navigationBarTitleText | String | 导航栏标题文字内容 | ||
| navigationStyle | String | default | 导航栏样式，仅支持 default/custom。custom 即取消默认的原生导航栏，需看使用注意 | 微信小程序 7.0+、百度小程序、H5、App（2.0.3+）、小红书小程序 |
| backgroundColor | HexColor | #ffffff | 下拉显示出来的窗口的背景色 | 微信小程序、小红书小程序 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark / light | 微信小程序 |
| enablePullDownRefresh | Boolean | true | 是否开启下拉刷新，详见页面生命周期。 | |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位只支持 px，详见页面生命周期 |
2）pages
配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| path | String | 配置页面路径 | |
| style | Object | 配置页面窗口表现，配置项参考下方 pageStyle | |
| needLogin | Boolean | false | 是否需要登录才可访问 |
注意：
- pages 节点的第一项为应用入口页（即首页）。
- 应用中新增 / 减少页面，都需要对 pages 数组进行修改。
- 文件名不需要写后缀，框架会自动寻找路径下的页面资源。
3）easycom
传统 Vue 组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom 将其精简为一步。
只要组件路径符合规范，就不用引用、注册，就可以直接在页面中使用。路径规范 指：
- 安装在项目根目录的 components 目录下，并符合
components/组件名称/组件名称.vue - 安装在 uni_modules 下，路径为
uni_modules/插件ID/components/组件名称/组件名称.vue
不管 components 目录下安装了多少组件，easycom 打包会自动剔除没有使用的组件，对组件库的使用尤为友好。
4）tabBar
| 属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色 | ||
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | ||
| backgroundColor | HexColor | 是 | tab 的背景色 | ||
| borderStyle | String | 否 | black | tabbar 上边框的颜色，可选值 black/white，black 对应颜色 rgba(0,0,0,0.33)，white 对应颜色 rgba(255,255,255,0.33)。 | App 2.3.4+ 、H5 3.0.0+、微信小程序、小红书小程序、京东小程序 |
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab | ||
| position | String | 否 | bottom | 可选值 bottom、top | top 值仅微信小程序支持 |
| custom | Boolean | 否 | 是否启用自定义 tabBar | 微信小程序、抖音小程序 |
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 必填 | 说明 | 平台差异 |
|---|---|---|---|---|
| pagePath | String | 是 | 页面路径，必须在 pages 中先定义 | |
| text | String | 是 | tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 | |
| iconPath | String | 否 | 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标 | |
| selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效 | |
| visible | Boolean | 否 | 该项是否显示，默认显示 | App (3.2.10+)、H5 (3.2.10+) |
| iconfont | Object | 否 | 字体图标，优先级高于 iconPath | App（3.4.4+）、H5 (3.5.3+) |
2. manifest.json 应用配置
应用的配置文件，用于指定应用的名称、图标、权限等。
参考官方文档：manifest.json 应用配置
3. uni.scss
uni.scss 是一个特殊文件，在代码中无需 import 这个文件即可在 scss 代码中使用这里的样式变量。uni-app 的编译器在 webpack 配置中特殊处理了这个 uni.scss，使得每个 scss 文件都被注入这个 uni.scss，达到全局可用的效果。如果开发者想要 less、stylus 的全局使用，需要在 vue.config.js 中自行配置 webpack 策略。
注意：
如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件（dart-sass）；
使用时需要在 style 节点上加上
lang="scss"。html<style lang="scss"> </style>
二、vite.config.js
vite.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 vite 的编译选项，具体规范参考：vite.config.js
三、App.vue
App.vue 本身不是页面 ，这里不能编写视图元素，也就是没有 <template> 元素。主要是聚集其他页面挂载到容器里。
App.vue 的作用：
- 应用的生命周期
- 编写全局样式
- 定义全局数据
- globalData
第三章：组件
官方文档：组件
一、内置组件
1. 视图容器组件
1）view
类似于传统 html 中的 div，用于包裹各种元素内容。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
2）text
类似于传统 html 中的 span，用于包裹文本内容。
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| selectable | Boolean | false | 文本是否可选 | 小红书小程序不支持 |
| user-select | Boolean | false | 文本是否可选 | 微信小程序 |
| space | String | 显示连续空格 | 钉钉小程序不支持 | |
| decode | Boolean | false | 是否解码 | 百度、钉钉小程序不支持 |
space 值说明
| 值 | 说明 |
|---|---|
| ensp | 中文字符空格一半大小 |
| emsp | 中文字符空格大小 |
| nbsp | 根据字体设置的空格大小 |
3）scroll-view
可滚动视图区域组件。
点我查看
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| scroll-x | Boolean | false | 允许横向滚动 | |
| scroll-y | Boolean | false | 允许纵向滚动 | |
| upper-threshold | Number/String | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 | |
| lower-threshold | Number/String | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 | |
| scroll-top | Number/String | 设置竖向滚动条位置 | ||
| scroll-left | Number/String | 设置横向滚动条位置 | ||
| scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 | |
| show-scrollbar | Boolean | true | 控制是否出现滚动条 | App-nvue 2.1.5+ |
| refresher-enabled | Boolean | false | 开启自定义下拉刷新 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
| refresher-threshold | Number | 45 | 设置自定义下拉刷新阈值 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
| refresher-default-style | String | "black" | 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
| refresher-background | String | "#FFF" | 设置自定义下拉刷新区域背景颜色 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 |
| @scrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | ||
| @scrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 | ||
| @scroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | ||
| @refresherpulling | EventHandle | 自定义下拉刷新控件被下拉 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 | |
| @refresherrefresh | EventHandle | 自定义下拉刷新被触发 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 | |
| @refresherrestore | EventHandle | 自定义下拉刷新被复位 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+、小红书小程序 | |
| @refresherabort | EventHandle | 自定义下拉刷新被中止 | H5、app-vue 2.5.12+,微信小程序基础库2.10.1+ |
4）swiper
滑块视图容器。一般用于左右滑动或上下滑动，比如 banner 区域的轮播图。
swiper 组件是块级组件，高度默认 150px。swiper 的子组件只能是 swiper-item，宽高默认为 100%。
swiper 组件可用的常见属性
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | |
| active-class | String | swiper-item 可见时的 class | 支付宝小程序 | |
| autoplay | Boolean | false | 是否自动切换 | |
| current | Number | 0 | 当前所在滑块的 index | |
| interval | Number | 5000 | 自动切换时间间隔 | |
| duration | Number | 500 | 滑动动画时长 | app-nvue 不支持 |
| circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 | |
| vertical | Boolean | false | 滑动方向是否为纵向 | |
| @change | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |
2. 媒体组件
1）image
默认宽度 320px、高度 240px。
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| src | String | 图片资源地址 | ||
| mode | String | 'scaleToFill' | 图片裁剪、缩放的模式。具体参见：image mode 有效值 | |
| lazy-load | Boolean | false | 图片懒加载。只针对 page 与 scroll-view 下的 image 有效 | 基本所有小程序都支持 |
| show-menu-by-longpress | boolean | false | 开启长按图片显示识别小程序码菜单 | 仅支持微信小程序 |
| @error | HandleEvent | 当错误发生时，发布到 AppService 的事件名，事件对象 event.detail = {errMsg: 'something wrong'} | ||
| @load | HandleEvent | 当图片载入完毕时，发布到 AppService 的事件名，事件对象 event.detail = {height:'图片高度px', width:'图片宽度px'} |
mode 值说明
| 值 | 说明 |
|---|---|
| scaleToFill | 图片的宽高完全拉伸至填满 image 元素；不保持纵横比 |
| aspectFit | 图片的长边能完全显示出来（图片不能完全占满所在元素）；保持纵横比 |
| aspectFill | 图片的短边能完全显示出来，另一个方向将会发生截取；保持纵横比 |
| widthFix | 宽度不变，高度自动变化；保持纵横比 |
| heightFix | 高度不变，宽度自动变化；保持纵横比 |
| top bottom center left right |
注意：
<image>组件未设置宽高时，默认宽度 320px、高度 240px。尤其注意当图片加载失败时，widthFix 模式指定宽度的图片，虽然图片空白，但其高度会变成 240px。
- src 仅支持相对路径、绝对路径，base64 编码。
3. 路由与页面跳转
1）navigator
页面跳转。
该组件类似 HTML 中的 <a> 组件，但只能跳转本地页面。目标页面必须在 pages.json 中注册。
除了组件方式，API 方式也可以实现页面跳转，另见：https://uniapp.dcloud.io/api/router?id=navigateto
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| url | String | 应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"、"/pages/first/first"，注意不能加 .vue 后缀 | ||
| open-type | String | navigate | 跳转方式 | |
| delta | Number | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 | 支付宝小程序不支持 | |
| hover-class | String | navigator-hover | 指定点击时的样式类，当 hover-class="none" 时，没有点击态效果 | |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 微信小程序、小红书小程序 |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 | |
| hover-stay-time | Number | 600 | 手指松开后点击态保留时间，单位毫秒 | |
| target | String | self | 在哪个小程序目标上发生跳转，默认当前小程序，值域 self/miniProgram | 微信2.0.7+、百度2.5.2+、QQ |
open-type 有效值
| 值 | 说明 | 平台差异说明 |
|---|---|---|
| navigate | 对应 uni.navigateTo 的功能，保留当前页面，跳转到应用内的某个页面 | |
| redirect | 对应 uni.redirectTo 的功能，关闭当前页面，跳转到应用内的某个页面 | |
| switchTab | 对应 uni.switchTab 的功能，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 | |
| reLaunch | 对应 uni.reLaunch 的功能，关闭所有页面，打开到应用内的某个页面 | 抖音小程序与飞书小程序不支持 |
| navigateBack | 对应 uni.navigateBack 的功能，关闭当前页面，返回上一页面或多级页面 | |
| exit | 退出小程序，target="miniProgram" 时生效 | 微信2.1.0+、百度2.5.2+、QQ1.4.7+、小红书小程序 |
实际开发中的 bug：
<navigator url="/pages/classlist/classlist" class="row">
<view class="left">
<uni-icons type="download-filled" size="20"></uni-icons>
<view class="text">我的下载</view>
</view>
<view class="right">
<view class="text">33</view>
<uni-icons type="right" size="15" color="#aaa"></uni-icons>
</view>
</navigator>
<style>
.row {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
padding: 0 30rpx;
border-bottom: 1px solid #eee;
background: #fff;
}
</style>期望里面的元素在一行，但实际不是。
为什么？因为 navigator 里在渲染后会套一个 a 标签，破坏布局结构了。
通过下面方式解决：
<style>
:deep() {
.navigator-wrap {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
padding: 0 30rpx;
border-bottom: 1px solid #eee;
background: #fff;
}
}
</style>4. 表单组件
1）form
| 属性名 | 类型 | 说明 | 平台差异说明 |
|---|---|---|---|
| @submit | EventHandle | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId | |
| @reset | EventHandle | 表单重置时会触发 reset 事件 |
一般都不会使用这个 form 组件，都是 state 由 Vue 管理，然后异步 AJAX 提交。
2）button
| 属性名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
|---|---|---|---|---|---|
| size | String | default | 按钮的大小 | ||
| type | String | default | 按钮的样式类型 | ||
| plain | Boolean | false | 按钮是否镂空，背景色透明 | ||
| disabled | Boolean | false | 是否禁用 | ||
| loading | Boolean | false | 名称前是否带 loading 图标 | H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) | |
| form-type | String | 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 | |||
| open-type | String | 开放能力 | |||
| hover-class | String | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | App-nvue 平台暂不支持 | |
| hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | ||
| hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | ||
| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 |
具体属性取值参考：button 组件官方文档
3）input
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| value | String | 输入框的初始内容 | ||
| type | String | text | input 的类型 有效值 | |
| password | Boolean | false | 是否是密码类型 | H5和App写此属性时，type失效 |
| placeholder | String | 输入框为空时占位符 | ||
| placeholder-style | String | 指定 placeholder 的样式 | ||
| placeholder-class | String | "input-placeholder" | 指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | 抖音小程序、飞书小程序、快手小程序不支持 |
| disabled | Boolean | false | 是否禁用 | |
| maxlength | Number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 | |
| confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type="text" 时生效。有效值 | 微信小程序、App、H5、快手小程序、京东小程序、小红书小程序 |
| confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | App(3.3.7+)、H5 (3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序、小红书小程序 |
| @input | EventHandle | 当键盘输入时，触发 input 事件，event.detail = {value} | 差异见下方 Tips | |
| @focus | EventHandle | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 | 仅微信小程序、京东小程序、App（2.2.3+） 、QQ小程序、快手小程序支持 height、小红书小程序 | |
| @blur | EventHandle | 输入框失去焦点时触发，event.detail = {value: value} | ||
| @confirm | EventHandle | 点击完成按钮时触发，event.detail = {value: value} |
type 有效值
| 值 | 说明 | 平台差异说明 |
|---|---|---|
| text | 文本输入键盘 | |
| number | 数字输入键盘 | 均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。 |
| idcard | 身份证输入键盘 | 微信、支付宝、百度、QQ小程序、快手小程序、京东小程序 |
| tel | 电话输入键盘 | 小红书小程序不支持 |
| safe-password | 密码安全输入键盘 | 微信小程序 |
| nickname | 昵称输入键盘 | 微信小程序 |
4）checkbox
checkbox-group
多选框组。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| @change | EventHandle | <checkbox-group> 中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]} |
checkbox
多选项。
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| value | String | <checkbox> 标识，选中时触发 <checkbox-group> 的 change 事件，并携带 <checkbox> 的 value。 | ||
| disabled | Boolean | false | 是否禁用 | |
| checked | Boolean | false | 当前是否选中，可用来设置默认选中 | |
| color | Color | checkbox的颜色，同css的color | ||
| backgroundColor | Color | #ffffff | checkbox默认的背景颜色 | H5(3.99+)、App-Vue(3.99+) |
| borderColor | Color | #d1d1d1 | checkbox默认的边框颜色 | H5(3.99+)、App-Vue(3.99+) |
| activeBackgroundColor | Color | #ffffff | checkbox选中时的背景颜色，优先级大于color属性 | H5(3.99+)、App-Vue(3.99+) |
| activeBorderColor | Color | #d1d1d1 | checkbox选中时的边框颜色 | H5(3.99+)、App-Vue(3.99+) |
| iconColor | Color | #007aff | checkbox的图标颜色 | H5(3.99+)、App-Vue(3.99+) |
5）radio
radio-group
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| @change | EventHandle | <radio-group> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} |
radio
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| value | String | <radio> 标识。当该 <radio> 选中时，<radio-group> 的 change 事件会携带 <radio> 的 value | ||
| checked | Boolean | false | 当前是否选中 | |
| disabled | Boolean | false | 是否禁用 | |
| color | Color | radio的颜色，同css的color | ||
| backgroundColor | Color | #ffffff | radio默认的背景颜色 | H5(3.99+)、App-Vue(3.99+) |
| borderColor | Color | #d1d1d1 | radio默认的边框颜色 | H5(3.99+)、App-Vue(3.99+) |
| activeBackgroundColor | Color | #007AFF | radio选中时的背景颜色，优先级大于color属性 | H5(3.99+)、App-Vue(3.99+) |
| activeBorderColor | Color | radio选中时的边框颜色 | H5(3.99+)、App-Vue(3.99+) | |
| iconColor | Color | #ffffff | radio的图标颜色 | H5(3.99+)、App-Vue(3.99+) |
二、扩展组件
1. 使用步骤
官方扩展组件使用文档：uni-ui
如果需要表单组件，首推 uni-forms 组件，主要内置了表单验证功能。
2. 定制主题
定制 uni-ui 主题风格：uni-app官网
1）安装 dart-sass 插件（一般都会提示，并自动安装）
2）在项目根目录的 uni.scss 文件中引入 uni-ui 组件库的 variable.scss 变量文件，然后就可以使用或修改对应的 scss 变量。
/* 需要放到文件最上面 */
@import '@/uni_modules/uni-scss/variables.scss';3）uni.scss 文件中修改对应的 scss 变量
第四章：CSS
官方文档：页面样式与布局
一、基本
1. 预处理器支持
uni-app 支持 less、sass、scss、stylus 等预处理器。
2. 尺寸单位
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度3. 选择器
目前支持的选择器：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| element | view | 选择所有 view 组件 |
| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| #id | #firstname | 选择拥有 id="firstname" 的组件 |
| .class | .intro | 选择所有拥有 class="intro" 的组件 |
| ::after | view::after | 在 view 组件后边插入内容，仅 vue 页面生效 |
| ::before | view::before | 在 view 组件前边插入内容，仅 vue 页面生效 |
技巧：page 相当于 body 节点
<!-- 设置页面背景颜色，使用 scoped 会导致失效 -- >
page {
background-color: #ccc;
}4. 全局样式与局部样式
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意：
- App.vue 中通过
@import语句可以导入外联样式，一样作用于每一个页面。
5. CSS 变量
| CSS 变量 | 描述 | App | 小程序 | H5 |
|---|---|---|---|---|
| --status-bar-height | 系统状态栏高度 | 系统状态栏高度 | 25px | 0 |
注意：
- 当设置
"navigationStyle":"custom"取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为var(--status-bar-height)的 view 放在页面顶部，避免页面内容出现在状态栏。
6. 背景图片
uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：
支持 base64 格式图片。
支持网络路径图片。
小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
使用本地路径背景图片需注意：
为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
本地背景图片的引用路径推荐使用以
~@开头的绝对路径。css.test2 { background-image: url('~@/static/logo.png'); }
二、样式导入与内联样式
样式导入
使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。
内联样式
style：接收动态的样式。
<view :style="{color:color}" />class：用于指定样式规则，其属性值是样式规则中类选择器名 (样式类名) 的集合，样式类名之间用空格分隔。
<view class="normal_view" />第五章：页面
官方文档：页面
一、生命周期
1. 页面生命周期
官方文档：页面生命周期
| 函数名 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|
| onLoad | 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。 | ||
| onShow | 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | ||
| onReady | 监听页面初次渲染完成，此时组件已挂载完成，DOM 树 ($el) 已可用，注意如果渲染速度快，会在页面进入动画完成前触发 | ||
| onHide | 监听页面隐藏 | ||
| onUnload | 监听页面卸载 | ||
| onResize | 监听窗口尺寸变化 | App、微信小程序、快手小程序 | |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新，参考示例 | ||
| onReachBottom | 页面滚动到底部的事件（不是 scroll-view 滚到底），常用于下拉下一页数据。具体见下方注意事项 | ||
| onShareAppMessage | 用户点击右上角分享 | 微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序 | |
| onPageScroll | 监听页面滚动，参数为 Object | nvue 不支持 | |
| onAddToFavorites | 监听用户点击右上角收藏 | 微信小程序、QQ 小程序 | 2.8.1+ |
| onShareChat | 监听右上角菜单“分享到微信群组”按钮的行为 | 小红书小程序 |
2. 组件生命周期
官方文档：Vue 生命周期钩子
uni-app 组件支持的生命周期，与 Vue 组件的生命周期相同。
组件中可以使用页面的生命周期吗？
- 在 Options API 语法：组件中不支持使用页面生命周期。
- 在 Composition API 语法：组件中支持页面生命周期，不同端支持情况有差异。
二、页面调用接口
1. getApp()
getApp() 函数用于获取当前应用实例，一般用于获取 globalData。也可通过应用实例调用 App.vue methods 中定义的方法。
实例
const app = getApp()
console.log(app.globalData)
app.doSomething() // 调用 App.vue methods 中的 doSomething 方法注意
- 不要在定义于
App()内的函数中，或调用 App 前调用getApp()，可以通过this.$scope获取对应的 app 实例 - 通过
getApp()获取实例之后，不要私自调用生命周期函数。
2. getCurrentPages()
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，数组中的元素为页面实例，第一个元素为首页，最后一个元素为当前页面。
每个页面实例的方法属性列表：
| 方法 | 描述 | 平台说明 |
|---|---|---|
| page.$getAppWebview() | 获取当前页面的 webview 对象实例 | App |
| page.route | 获取当前页面的路由 |
注意
getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。页面关闭时，对应页面实例会在页面栈中删除。
Tips：
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 不能在首页 onReady 之前进行页面跳转。
三、路由
四、页面通讯
方法一：全局数据 globalData
方式二：本地数据存储
方式三：Vuex 和 Pinia
方式四：路由传参
直接在 url 后面通过查询字符串的方式拼接。如 url 查询字符串出现特殊字符等格式，需编码。然后可在 onLoad 生命周期中获取 url 传递的参数。
例子
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>// navigate.vue 页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}方法五：事件总线
1）uni.$emit(eventName,OBJECT)
触发全局的自定义事件。附加参数都会传给监听器回调。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| OBJECT | Object | 触发事件携带的附加参数 |
2）uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回调函数 |
3）uni.$once(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回调函数 |
4）uni.$off(eventName, callback)
移除全局自定义事件监听器。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回调函数 |
注意：
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器；
- 提供的回调必须跟 $on 的回调为同一个才能移除这个回调的监听器；
方法六：EventChannel
页面间事件通信通道。
第六章：API
一、界面
1. 交互反馈
1）消息提示框
uni.showToast(OBJECT)：显示消息提示框。
| 参数 | 类型 | 必填 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| title | String | 是 | 提示的内容，长度与 icon 取值有关。 | |
| icon | String | 否 | 图标，有效值详见下方说明，默认：success。 | |
| image | String | 否 | 自定义图标的本地路径（app端暂不支持gif） | App、H5、微信小程序、百度小程序、抖音小程序（2.62.0+）、小红书小程序 |
| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透，默认：false | App、微信小程序、抖音小程序（2.47.0+）、小红书小程序 |
| duration | Number | 否 | 提示的延迟时间，单位毫秒，默认：1500 | |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
uni.hideToast()：隐藏消息提示框。
2）loading 提示框
uni.showLoading(OBJECT)：显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。
| 参数 | 类型 | 必填 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| title | String | 是 | 提示的文字内容，显示在loading的下方 | |
| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透，默认：false | H5、App、微信小程序、百度小程序、抖音小程序（2.47.0+）、小红书小程序 |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
uni.hideLoading()：隐藏 loading 提示框。
3）模态弹窗
uni.showModal(OBJECT)：类似 html 中：alert。
| 参数 | 类型 | 必填 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| title | String | 否 | 提示的标题 | |
| content | String | 否 | 提示的内容 | |
| showCancel | Boolean | 否 | 是否显示取消按钮，默认为 true | |
| cancelText | String | 否 | 取消按钮的文字，默认为"取消" | |
| cancelColor | HexColor | 否 | 取消按钮的文字颜色，默认为"#000000" | H5、微信小程序、百度小程序、抖音小程序（2.62.0+）、支付宝小程序、小红书小程序 |
| confirmText | String | 否 | 确定按钮的文字，默认为"确定" | |
| confirmColor | HexColor | 否 | 确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#576B95"，百度小程序平台默认为"#3c76ff" | H5、微信小程序、百度小程序、抖音小程序（2.62.0+）、支付宝小程序、小红书小程序 |
| editable | Boolean | 否 | 是否显示输入框 | H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）、小红书小程序 |
| placeholderText | String | 否 | 显示输入框时的提示文本 | H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）、小红书小程序 |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
success返回参数说明
| 参数 | 类型 | 说明 | 平台差异说明 |
|---|---|---|---|
| confirm | Boolean | 为 true 时，表示用户点击了确定按钮 | |
| cancel | Boolean | 为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭） | |
| content | String | editable 为 true 时，用户输入的文本 | H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+） |
4）操作菜单
uni.showActionSheet(OBJECT)：从底部向上弹出操作菜单。
| 参数 | 类型 | 必填 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| title | String | 否 | 菜单标题 | App、H5、支付宝小程序、钉钉小程序、微信小程序 3.4.5+（仅真机有效） |
| alertText | String | 否 | 警示文案（同菜单标题） | 微信小程序（仅真机有效）、抖音小程序、小红书小程序 |
| itemList | Array<String> | 是 | 按钮的文字数组 | 微信、百度、抖音小程序数组长度最大为6个 |
| itemColor | HexColor | 否 | 按钮的文字颜色，字符串格式，默认为"#000000" | App-iOS、飞书小程序不支持 |
| success | Function | 否 | 接口调用成功的回调函数，详见返回参数说明 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
success 返回参数说明：
| 参数 | 类型 | 说明 |
|---|---|---|
| tapIndex | Number | 用户点击的按钮，从上到下的顺序，从0开始 |
二、设置导航条
官方文档：设置导航条相关 API
1. 动态设置当前页面的标题
uni.setNavigationBarTitle(OBJECT)
| OBJECT 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| title | String | 是 | 页面标题 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
如果需要在页面进入时设置标题，可以在 onReady 内执行，以避免被框架内的修改所覆盖。如果必须在 onShow 内执行需要延迟一小段时间。
三、设置 TabBar
官方文档：设置 TabBar 相关 API
1. 动态设置 tabBar 某一项的内容
uni.setTabBarItem(OBJECT)
| 属性 | 类型 | 默认值 | 必填 | 说明 | 平台差异 |
|---|---|---|---|---|---|
| index | number | 是 | tabBar 的哪一项，从左边算起 | ||
| text | String | 否 | tab 上的按钮文字 | ||
| iconPath | String | 否 | 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效。微信小程序 2.7.0+、支付宝小程序支持网络图片，其他平台暂不支持网络图片 | ||
| selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效 | ||
| pagePath | String | 否 | 页面绝对路径，必须在 pages 中先定义，被替换掉的 pagePath 不会变成普通页面（仍然需要使用 uni.switchTab 跳转） | App（2.8.4+）、H5（2.8.4+） | |
| success | Funtion | 否 | 接口调用成功的回调函数 | ||
| fail | Funtion | 否 | 接口调用失败的回调函数 | ||
| complete | Funtion | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
2. 隐藏 / 显示 tabBar
uni.hideTabBar(OBJECT)：隐藏 tabBar。
| OBJECT 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| animation | boolean | false | 否 | 是否需要动画效果，仅小程序支持 |
| success | Funtion | 否 | 接口调用成功的回调函数 | |
| fail | Funtion | 否 | 接口调用失败的回调函数 | |
| complete | Funtion | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
uni.showTabBar(OBJECT)：显示 tabBar。
| OBJECT 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| animation | boolean | false | 否 | 是否需要动画效果，仅小程序支持 |
| success | Funtion | 否 | 接口调用成功的回调函数 | |
| fail | Funtion | 否 | 接口调用失败的回调函数 | |
| complete | Funtion | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
3. 右上角文本
应用场景：未读消息多少条。
uni.setTabBarBadge(OBJECT)：为 tabBar 某一项的右上角添加文本。
| OBJECT 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| index | Number | 是 | tabBar 的哪一项，从左边算起 |
| text | String | 是 | 显示的文本，不超过 3 个半角字符 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
uni.removeTabBarBadge(OBJECT)：移除 tabBar 某一项右上角的文本。
| OBJECT 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| index | Number | 是 | tabBar 的哪一项，从左边算起 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
4. 右上角红点
uni.showTabBarRedDot(OBJECT)：显示 tabBar 某一项的右上角的红点。
uni.hideTabBarRedDot(OBJECT)：隐藏 tabBar 某一项的右上角的红点。
| OBJECT 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| index | Number | 是 | tabBar 的哪一项，从左边算起 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
四、下拉刷新
1. onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件。
- 需要在
pages.json里，找到的当前页面的 pages 节点，并在 style 选项中开启 enablePullDownRefresh。 - 当处理完数据刷新后，
uni.stopPullDownRefresh可以停止当前页面的下拉刷新。
2. 开始下拉刷新
uni.startPullDownRefresh(OBJECT)：调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
3. 停止下拉刷新
uni.stopPullDownRefresh()：停止当前页面下拉刷新。
五、页面和路由
1. uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面。
| OBJECT 参数 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|---|
| url | String | 是 | 需要跳转的应用是非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如：'path?key=value&key2=value2'，path 为下一个页面的路径，下一个页面的 onLoad 函数可得到传递的参数 |
2. uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
OBJECT 参数同 uni.navigateTo(OBJECT)。
3. uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。
| OBJECT 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的应用内页面路径，路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如：'path?key=value&key2=value2'。 如果跳转的页面路径是 tabBar 页面则不能带参数 |
4. uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
| OBJECT 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数 |
5. uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
| OBJECT 参数 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|---|
| delta | Number | 否 | 1 | 返回的页面数，如果 delta 大于现有页面数，则返回到首页。 |
六、数据缓存
| 方法 | 解释 |
|---|---|
| uni.setStorage({key, data}) | 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 |
| uni.setStorageSync(KEY,DATA) | 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。 |
| uni.getStorage({key, success}) | 从本地缓存中异步获取指定 key 对应的内容。 success 返回 data 参数，为 key 对应的内容（具体代码 res.data）。 |
| uni.getStorageSync(KEY) | 从本地缓存中同步获取指定 key 对应的内容。 |
| uni.getStorageInfo({success}) | 异步获取当前 storage 的相关信息。 success 返回 keys 参数，为当前 storage 中所有的 key（具体代码 res.keys）。 |
| uni.getStorageInfoSync() | 同步获取当前 storage 的相关信息。 返回值是一个对象，其中 keys 属性表示当前 storage 中所有的 key。 |
| uni.removeStorage({key}) | 从本地缓存中异步移除指定 key。 |
| uni.removeStorageSync(KEY) | 从本地缓存中同步移除指定 key。 |
| uni.clearStorage() | 清理本地数据缓存。 |
| uni.clearStorageSync() | 同步清理本地数据缓存。 |
七、网络
1. 发起网络请求
uni.request(OBJECT)
| OBJECT 参数名 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|---|
| url | String | 是 | 开发者服务器接口地址 | ||
| data | Object/String/ArrayBuffer | 否 | 请求的参数 | App 3.3.7 以下不支持 ArrayBuffer 类型 | |
| header | Object | 否 | 设置请求的 header，header 中不能设置 Referer | App、H5端会自动带上cookie，且H5端不可手动修改 | |
| method | String | 否 | GET | 有效值详见下方说明 | |
| timeout | Number | 否 | 60000 | 超时时间，单位 ms | H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序 |
| dataType | String | 否 | json | 如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse | |
| responseType | String | 否 | text | 设置响应的数据类型。合法值：text、arraybuffer | 支付宝小程序不支持 |
| success | Function | 否 | 收到开发者服务器成功返回的回调函数 | ||
| fail | Function | 否 | 接口调用失败的回调函数 | ||
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
success 返回参数说明：
| 参数 | 类型 | 说明 |
|---|---|---|
| data | Object / String / ArrayBuffer | 开发者服务器返回的数据 |
| statusCode | Number | 开发者服务器返回的 HTTP 状态码 |
| header | Object | 开发者服务器返回的 HTTP Response Header |
| cookies | Array.<string> | 开发者服务器返回的 cookies，格式为字符串数组 |
第七章：高级
一、跨平台兼容
1. 条件编译
官方文档：条件编译处理多端差异
以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在#ifndef：if not defined 除了某平台均存在%PLATFORM%：平台名称
注意：Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。支持 ifios、ifAndroid 代码块，可方便编写判断。