uni-app(仅微信小程序平台)

Uni-app 是一个跨端应用框架，基于 Vue.js，可以帮助开发者快速构建同时运行在多个平台上的移动应用程序。

工程

创建 uni-app

js 开发

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

ts 开发

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

TIP

uni-app 内置组件 TypeScript 类型：

bash

npm i -D @uni-helper/uni-app-types

uni-app 扩展组件 TypeScript 类型：

bash

npm i -D @uni-helper/uni-ui-types

运行 uni-app

bash

cd my-vue3-project
npm install
npm run dev:mp-weixin
npm run build:mp-weixin

DANGER

微信小程序的自定义组件在渲染时会多一级节点，在写样式时需要注意：

使用 flex 布局时，直接给自定义组件的父元素设置为 display:flex 不能影响到自定义组件内部的根节点，需要设置当前自定义组件为 display:flex 才可以。
在自定义组件内部设置根元素高度为 100%，不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为 100%才可以。

页面

页面生命周期

函数名	说明
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是 scroll-view 滚到底），常用于下拉下一页数据。
onTabItemTap	点击 tab 时触发，参数为 Object
onShareAppMessage	用户点击右上角分享
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

组件生命周期

函数名	说明
onBeforeMount()	组件被挂载之前
onMounted()	组件挂载完成后
onBeforeUpdate()	组件即将因为响应式状态变更而更新其 DOM 树之前
onUpdated()	组件因为响应式状态变更而更新其 DOM 树之后
onBeforeUnmount()	组件实例被卸载之前
onUnmounted()	组件实例被卸载之后

页面调用接口

getApp():用于获取当前应用实例，一般用于获取 globalData。也可通过应用实例调用 App.vue methods 中定义的方法。
getCurrentPages():用于获取当前页面栈的实例，以数组形式按栈的顺序给出，数组中的元素为页面实例，第一个元素为首页，最后一个元素为当前页面。

页面通讯

uni.$emit(eventName,OBJECT):触发全局的自定义事件。
uni.$on(eventName,callback):监听全局的自定义事件。
uni.$once(eventName,callback):监听全局的自定义事件，仅触发一次。
uni.$off([eventName, callback]):移除全局自定义事件监听器。

页面栈

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API `uni.navigateTo` 、使用组件 `<navigator open-type="navigate"/>`
页面重定向	当前页面出栈，新页面入栈	调用 API `uni.redirectTo` 、使用组件 `<navigator open-type="redirectTo"/>`
页面返回	页面不断出栈，直到目标返回页	调用 API `uni.navigateBack` 、使用组件 `<navigator open-type="navigateBack"/>` 、用户按左上角返回按钮、安卓用户点击物理 back 按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API `uni.switchTab` 、使用组件 `<navigator open-type="switchTab"/>` 、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API `uni.reLaunch` 、使用组件 `<navigator open-type="reLaunch"/>`

JS 语法

uni-app 的 js API 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

CSS 语法

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx。

px 即屏幕像素
rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。

TIP

页面元素宽度在 uni-app 中的宽度计算公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度

选择器

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容，仅 vue 页面生效
::before	view::before	在 view 组件前边插入内容，仅 vue 页面生效

DANGER

在 uni-app 中不能使用 * 选择器。
微信小程序自定义组件中仅支持 class 选择器
page 相当于 body 节点

css

/* 设置页面背景颜色，使用 scoped 会导致失效 */
page {
  background-color: #ccc;
}

内置 CSS 变量

CSS 变量	描述	小程序
--status-bar-height	系统状态栏高度	25px
--window-top	内容区域距离顶部的距离	0
--window-bottom	内容区域距离底部的距离	0

TIP

快速书写 css 变量的方法是：在 css 中敲 hei，在候选助手中即可看到 3 个 css 变量。

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

请注意

条件编译是利用注释实现的，在不同语法里注释写法不一样，js 使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

TIP

支持的文件：

.vue
.js
.css
pages.json
各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

script

//#ifndef H5
uni.scanCode({
  success: (res) => {
    console.log(res.result)
  }
})
//#endif

template

html

<view>
  <view>微信公众号关注组件</view>
  <view>
    <!-- #ifdef MP-WEIXIN -->
    <official-account></official-account>
    <!-- #endif -->
  </view>
</view>

css

/* #ifdef MP-WEIXIN */
.wx-color {
  color: #fff000;
}
/* #endif */

pages.json

json

// #ifdef APP-PLUS
{
  "path": "pages/api/speech/speech",
  "style": {
    "navigationBarTitleText": "语音识别"
  }
}
// #endif

pages.json 页面路由

globalStyle

用于设置应用的状态栏、导航条、标题、窗口背景色等。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F8F8F8	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	black	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom 即取消默认的原生导航栏
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持 px
pageOrientation	String	portrait	横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape
renderingMode	String		同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层

pages

通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

属性	类型	描述
path	String	配置页面路径
style	Object	用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

style

页面中配置项会覆盖 globalStyle 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F8F8F8	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	black	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationBarShadow	Object		导航栏阴影
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom 即取消默认的原生导航栏
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持 px

自定义导航栏

不同手机的安全区域不同，适配安全区域能防止页面重要内容被遮挡。可通过 uni.getSystemInfoSync() 获取屏幕边界到安全区的距离。

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

easycom

只要组件路径符合规范（即：安装在项目根目录的 components 目录下，并符合 components/组件名称/组件名称.vue），就可以不用引用、注册，直接在页面中使用。

自定义 easycom 配置

属性	类型	默认值	描述
autoscan	Boolean	true	是否开启自动扫描，开启后将会自动扫描符合 components/组件名称/组件名称.vue 目录结构的组件
custom	Object		以正则方式自定义组件匹配规则。如果 autoscan 不能满足需求，可以使用 custom 自定义匹配规则

json

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue"
  }
}

tabBar

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
list	Array	是		tab 的列表，最少 2 个、最多 5 个 tab
position	String	否	bottom	可选值 bottom、top

list 属性

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px _ 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px _ 81px ，当 position 为 top 时，此参数无效

DANGER

代码跳转到 tabbar 页面，api 只能使用 uni.switchTab，不能使用 uni.navigateTo uni.redirectTo；使用 navigator 组件跳转时必须设置 open-type="switchTab"。

subPackages

subPackages 节点接收一个数组，数组每一项都是应用的子包，其属性值如下：

属性	类型	是否必填	描述
root	String	是	子包的根目录
pages	Array	是	子包由哪些页面组成，参数同 pages

DANGER

注意：

subPackages 里的 pages 的路径是 root 下的相对路径，不是全路径。
微信小程序每个分包的大小是 2M，总体积一共不能超过 20M。

分包优化

在对应平台的配置下添加 "optimization":{"subPackages":true} 开启分包优化
分包优化具体逻辑：
- 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
- js 文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
- 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

preloadRule

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

字段	类型	必填	默认值	说明
packages	StringArray	是		进入页面后预下载分包的 root 或 name。`__APP__` 表示主包。
network	String	否	wifi	在指定网络下预下载，可选值为：all（不限网络）、wifi（仅 wifi 下预下载）

示例

json

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ... }
    }, {
        "path": "pages/login/login",
        "style": { ... }
    }],

    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ... }
    }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ... }
    }]
    }],

    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
    }
    }
}

manifest.json 应用配置

用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

属性	类型	默认值	描述
name	String		应用名称
appid	String	新建 uni-app 项目时，DCloud 云端分配	应用标识
description	String		应用描述
locale	String	auto	设置当前默认语言
versionName	String		版本名称，例如：1.0.0
versionCode	Number		版本号，例如：36
transformPx	Boolean	false	此选项已废弃，仅部分平台支持，不推荐新项目启用此配置
networkTimeout	Object		网络超时时间
debug	Boolean	false	是否开启 debug 模式，开启后调试信息以 info 的形式给出，其信息有页面的注册，页面路由，数据更新，事件触发等
uniStatistics	Object		是否开启 uni 统计，全局配置
mp-weixin	Object		微信小程序特有配置
vueVersion	String		Vue 版本号

networkTimeout 属性

各类网络请求的超时时间，单位均为毫秒。

属性	类型	必填	默认值	说明
request	Number	否	60000	uni.request 的超时时间
connectSocket	Number	否	60000	uni.connectSocket 的超时时间
uploadFile	Number	否	60000	uni.uploadFile 的超时时间
downloadFile	Number	否	60000	uni.downloadFile 的超时时间

uniStatistics 属性

属性	类型	必填	默认值	说明
enable	Boolean	是	true	是否开启 uni 统计

mp-weixin 属性

属性	类型	说明
appid	String	微信小程序的 AppID
setting	Object	微信小程序项目设置
functionalPages	Boolean	微信小程序是否启用插件功能页，默认关闭
requiredBackgroundModes	Array	微信小程序需要在后台使用的能力
plugins	Object	使用到的插件
resizable	Boolean	在 iPad 上小程序是否支持屏幕旋转，默认关闭
navigateToMiniProgramAppIdList	Array	需要跳转的小程序列表
permission	Object	微信小程序接口权限相关设置
workers	String	Worker
optimization	Object	对微信小程序的优化配置
cloudfunctionRoot	String	配置云开发目录
uniStatistics	Object	微信小程序是否开启 uni 统计，配置方法同全局配置
scopedSlotsCompiler	String	Vue2 作用域插槽编译模式，uni-app 3.1.19+ 开始支持，可选：legacy、auto、augmented，默认：auto
mergeVirtualHostAttributes	Boolean	合并组件虚拟节点外层属性（目前仅支持 style、class 属性）
slotMultipleInstance	Boolean	模拟单个作用域插槽渲染为多个实例，此配置仅限 Vue2 环境 3.7.12+，Vue3 环境已默认支持
embeddedAppIdList	Array	要半屏跳转的小程序 appid
requiredPrivateInfos	Array	地理位置相关接口
lazyCodeLoading	String	目前仅支持值 requiredComponents，代表开启小程序按需注入特性

setting 属性

属性	类型	说明
urlCheck	Boolean	是否检查安全域名和 TLS 版本
es6	Boolean	ES6 转 ES5
postcss	Boolean	上传代码时样式是否自动补全
minified	Boolean	上传代码时是否自动压缩
bigPackageSizeSupport	Boolean	预览及真机调试时包体积上限是否调整为 4M，默认为 true

optimization 属性

属性	类型	说明
subPackages	Boolean	是否开启分包优化

App.vue

所有页面都是在 App.vue 下进行切换的，是应用入口文件。但 App.vue 本身不是页面，这里不能编写视图元素，也就是没有 <template>。

这个文件的作用包括：监听应用生命周期、配置全局样式、配置全局变量。

应用生命周期

函数名	说明
onLaunch	当 uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台

DANGER

注意：应用生命周期仅可在 App.vue 中监听，在其它页面监听无效。

全局变量

小程序有 globalData，这是一种简单的全局变量机制。当然，vue 框架的全局变量，另有其他方式定义。

TIP

js 中操作 globalData 的方式如下： getApp().globalData.text = 'test'
在应用 onLaunch 时，getApp 对象还未获取，暂时可以使用 this.globalData 获取 globalData。
如果需要把 globalData 的数据绑定到页面上，可在页面的 onShow 页面生命周期里进行变量重赋值。

全局样式

在 App.vue 中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在 App.vue 中。

示例

vue

<script setup>
  import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'

  onLaunch(() => {
    console.log('App Launch')
  })

  onShow(() => {
    console.log('App Show')
  })

  onHide(() => {
    console.log('App Hide')
  })

  globalData: {
    text: 'text'
  }
</script>

<style>
  @import './common/uni.css';
</style>

main.js

main.js 是 uni-app 的入口文件，主要作用是初始化 vue 实例、定义全局组件、使用需要的插件如 i18n、pinia。

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

uni.scss

uni.scss 文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss 文件里预置了一批 scss 变量预置。

uni.scss 是一个特殊文件，在代码中无需 import 这个文件即可在 scss 代码中使用这里的样式变量。uni-app 的编译器在 webpack 配置中特殊处理了这个 uni.scss，使得每个 scss 文件都被注入这个 uni.scss，达到全局可用的效果。

vue

<style lang="scss">
  .title {
    color: $uni-color-primary;
  }
</style>

uni-app 组件

视图容器

<view>：视图容器。它类似于传统html中的div，用于包裹各种元素内容。
<scroll-view>：可滚动视图区域。用于区域滚动。
<swiper>：滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。
<match-media>：media query 匹配检测节点。类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
<movable-area>：可拖动区域。
<movable-view>：可移动的视图容器，在页面中可以拖拽滑动或双指缩放。必须在<movable-area>组件中，并且必须是直接子节点，否则不能移动。
<cover-view>：覆盖在原生组件上的文本视图。
<cover-image>：覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

文本容器

<icon>：图标。
<text>：文本。
<rich-text>：富文本。支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。
<progress>：进度条。

表单

<button>：按钮。
<checkbox-group>：多项选择器，内部由多个 checkbox 组成。
<checkbox>：多选项目。
<editor>：富文本编辑器，可以对图片、文字格式进行编辑和混排。
<form>：表单。
<input>：单行输入框。
<label>：用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
<picker>：从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
<picker-view>：嵌入页面的滚动选择器。
<radio-group>：单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。
<radio>：单选项目。
<slider>：滑动选择器。
<switch>：开关选择器。
<textarea>：多行输入框。

路由

<navigator>：页面跳转。

媒体

<audio>：音频。
<camera>：页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
<image>：图片组件。
<video>：视频播放组件。
<live-player>：实时音视频播放，也称直播拉流。
<live-pusher>：实时音视频录制，也称直播推流。

地图

<map>：地图组件。地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。

画布

<canvas>：画布组件。

web-view

<web-view>：web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。

云数据库

<unicloud-db>：数据库查询组件，它是对clientDB的js库的再封装。

页面属性配置节点

<page-meta>：页面属性配置节点，用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。
<navigation-bar>：页面导航条配置节点，用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点，需要配合它一同使用。

uni-ui 组件

安装 uni-ui

bash

npm install @dcloudio/uni-ui

配置 easycom

json

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },

  // 其他内容
  "pages": [
    // ...
  ]
}

uni-sass 辅助样式

使用scss变量

在项目的根目录的uni.scss文件引入变量文件，即可使用或修改对应的scss变量.

使用类名

css

@import '@/uni_modules/uni-scss/index.scss';

颜色：前景色可以直接使用变量名同名的类，背景色可以在上面变量名的基础上加是 -bg

html

<!-- 前景色 -->
<view class="uni-primary">主色</view>
<view class="uni-success">成功色</view>
<view class="uni-warning">警告色</view>
<view class="uni-error">错误色</view>
<!-- 背景色 -->
<view class="uni-primary-bg">主色</view>
<view class="uni-success-bg">成功色</view>
<view class="uni-warning-bg">警告色</view>
<view class="uni-error-bg">错误色</view>

边框半径：使用边框半径辅助样式对元素快速应用border-radius样式，规则为 uni-radius-${direction}-${size}

html

<view class="uni-radius-tl">设置左上圆角</view>
<view class="uni-radius-br">设置右下圆角</view>

TIP

direction：如果需要四边，则不需要指定 direction。
- t：左上 + 右上
- r：右上 + 右下
- b：左下 + 右下
- l：左上 + 左下
- tl：左上
- tr：右上
- bl：左下
- br：右下
size：基于 $border-radius-root 变量的四舍五入尺寸，该变量的默认值为0.25rpx。
- null：使用默认值大小(可忽略)
- 0：清理所有圆角
- sm：默认值 / 2
- lg：默认值 * 2
- xl：默认值 * 6
- pill：9999px
- circle：50% (nvue 下不生效)

TIP

在 uni.scss 中修改默认值:

css

  $uni-radius-root:20px;
  $uni-radius: (
    0: 0,
    'sm': $uni-radius-root / 2,
    null: $uni-radius-root,
    'lg': $uni-radius-root * 2,
    'xl': $uni-radius-root * 6,
    'pill': 9999px,
    'circle': 50%
  );

间距：使用间距辅助类对元素快速应用 margin 或 padding 样式，范围是从 0 到 16。规则为 uni-${property}${direction}-${size}。

html

<!-- margin-top 为 8px -->
<view class="uni-mt-2"></view>
<!-- 左右margin 为 8px-->
<view class="uni-mx-2"></view>
<!-- 上下 padding 为 20px -->
<view class="uni-py-5"></view>

TIP

property
- m：应用 margin
- p：应用 padding
direction
- t：应用 margin-top 和 padding-top 的间距
- r：应用 margin-right 和 padding-right 的间距
- b：应用 margin-bottom 和 padding-bottom 的间距
- l：应用 margin-left 和 padding-left 的间距
- x：应用 *-left 和 *-right 的间距
- y：应用 *-top 和 *-bottom 的间距
- a：在所有方向应用该间距
size：以4px增量控制间距属性。
- 0：通过设置为 0 来消除所有 margin 或 padding.
- 1：设置 margin 或 padding 为 4px
- 2：设置 margin 或 padding 为 8px
- 3：设置 margin 或 padding 为 12px
- 4：设置 margin 或 padding 为 16px
- 5：设置 margin 或 padding 为 20px
- 6：设置 margin 或 padding 为 24px
- 7：设置 margin 或 padding 为 28px
- 8：设置 margin 或 padding 为 32px
- 9：设置 margin 或 padding 为 36px
- 10：设置 margin 或 padding 为 40px
- 11：设置 margin 或 padding 为 44px
- 12：设置 margin 或 padding 为 48px
- 13：设置 margin 或 padding 为 52px
- 14：设置 margin 或 padding 为 56px
- 15：设置 margin 或 padding 为 60px
- 16：设置 margin 或 padding 为 64px
- n1：设置 margin 或 padding 为 -4px
- n2：设置 margin 或 padding 为 -8px
- n3：设置 margin 或 padding 为 -12px
- n4：设置 margin 或 padding 为 -16px
- n5：设置 margin 或 padding 为 -20px
- n6：设置 margin 或 padding 为 -24px
- n7：设置 margin 或 padding 为 -28px
- n8：设置 margin 或 padding 为 -32px
- n9：设置 margin 或 padding 为 -36px
- n10：设置 margin 或 padding 为 -40px
- n11：设置 margin 或 padding 为 -44px
- n12：设置 margin 或 padding 为 -48px
- n13：设置 margin 或 padding 为 -52px
- n14：设置 margin 或 padding 为 -56px
- n15：设置 margin 或 padding 为 -60px
- n16：设置 margin 或 padding 为 -64px

TIP

在 uni.scss 中修改默认值

css

$uni-space-root:2;

uni-app API

定时器

setTimeout(callback, delay, rest)：设定一个定时器。在定时到期以后执行注册的回调函数。
clearTimeout(timeoutID)：取消由 setTimeout 设置的定时器。
setInterval(callback, delay, rest)：设定一个定时器。按照指定的周期（以毫秒计）来执行注册的回调函数。
clearInterval(intervalID)：取消由 setInterval 设置的定时器。

ArrayBuffer / Base64

uni.base64ToArrayBuffer(base64)：将 Base64 字符串转成 ArrayBuffer 对象。
uni.arrayBufferToBase64(arrayBuffer)：将 ArrayBuffer 对象转成 Base64 字符串。

启动

uni.getLaunchOptionsSync()：获取启动时的参数。返回值与App.onLaunch的回调参数一致。
uni.getEnterOptionsSync()：获取启动时的参数。如果当前小程序是冷启动，则返回值与 App.onLaunch 的回调参数一致；如果当前是热启动，则返回值与 App.onShow 一致。

应用级事件

uni.onPageNotFound(callback)：监听应用要打开的页面不存在事件。该事件与 App.onPageNotFound 的回调时机一致。
uni.onError(callback)：监听小程序错误事件。如脚本错误或 API 调用报错等。该事件与 App.onError 的回调时机与参数一致。
uni.onAppShow(callback)：监听应用切前台事件。该事件与 App.onShow 的回调参数一致。
uni.onAppHide(callback)：监听应用切后台事件。该事件与 App.onHide 的回调参数一致。
uni.offPageNotFound(callback)：取消监听应用要打开的页面不存在事件。
uni.offError(callback)：取消监听应用错误事件。
uni.offAppShow(callback)：取消监听小程序切前台事件。
uni.offAppHide(callback)：取消监听小程序切后台事件。

拦截器

uni.addInterceptor(string, object)：添加拦截器。
uni.removeInterceptor(string)：删除拦截器。

全局API

uniIDHasRole(string)：判断当前用户是否拥有某角色。此功能依赖uni-id。
uniIDHasPermission(string)：判断当前用户是否拥有某权限，注意：admin角色的用户拥有所有权限。此功能依赖uni-id。

发起请求

uni.request(object)：发起网络请求。

上传下载

uni.uploadFile(object)：将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。
uni.downloadFile(object)：下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

路由

uni.navigateTo(object)：保留当前页面，跳转到应用内的非 tabBar 页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo(object)：关闭当前页面，跳转到应用内的非 tabBar 页面。
uni.reLaunch(object)：关闭所有页面，打开到应用内的某个页面。
uni.switchTab(object)：只能跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack(object)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

事件监听

EventChannel.emit(eventName, args)：触发一个事件。
EventChannel.off(eventName, callback)：取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数。
EventChannel.on(eventName, callback)：持续监听一个事件。
EventChannel.once(eventName, callback)：监听一个事件一次，触发后失效。

页面与通讯

getCurrentPages()：用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

TIP

每个页面实例的方法属性列表：

page.$vm：当前页面的 Vue 实例。
page.route：获取当前页面的路由。

uni.$emit(eventName,object)：触发全局的自定义事件，附加参数都会传给监听器回调函数。
uni.$on(eventName,callback)：监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
uni.$once(eventName,callback)：监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。
uni.$off([eventName, callback])：移除全局自定义事件监听器。

数据缓存

uni.setStorage(object)：将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
uni.setStorageSync(key,data)：将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
uni.getStorage(object)：从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageSync(key)：从本地缓存中同步获取指定 key 对应的内容。
uni.getStorageInfo(object)：异步获取当前 storage 的相关信息。
uni.getStorageInfoSync()：同步获取当前 storage 的相关信息。
uni.removeStorage(object)：从本地缓存中异步移除指定 key。
uni.removeStorageSync(key)：从本地缓存中同步移除指定 key。
uni.clearStorage()：清理本地数据缓存。
uni.clearStorageSync()：同步清理本地数据缓存。

位置

uni.getLocation(object)：获取当前的地理位置、速度。
uni.chooseLocation(object)：打开地图选择位置。
uni.openLocation(object)：使用应用内置地图查看位置。
uni.onLocationChange(callback)：监听实时地理位置变化事件，需结合 uni.startLocationUpdate 或 uni.startLocationUpdateBackground 使用。
uni.offLocationChange(callback)：移除实时地理位置变化事件的监听函数。
uni.onLocationChangeError(callback)：监听持续定位接口返回失败时触发。
uni.offLocationChangeError(callback)：取消注册位置更新错误回调。
uni.startLocationUpdate(object)：开启小程序进入前台时接收位置消息。
uni.stopLocationUpdate(object)：关闭监听实时位置变化，前后台都停止消息接收。
uni.startLocationUpdateBackground(object)：开始监听实时地理位置信息变化事件，小程序进入前后台时均接收实时地理位置信息。
uni.createMapContext(mapId,this)：创建并返回 map 上下文 mapContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <map> 组件。

TIP

若想要实现城市选择功能，可以使用 <unicloud-city-select> 城市选择组件。

图片

uni.chooseImage(object)：从本地相册选择图片或使用相机拍照。
uni.previewImage(object)：预览图片。
uni.getImageInfo(object)：获取图片信息。
uni.saveImageToPhotosAlbum(object)：保存图片到系统相册。
uni.compressImage(object)：压缩图片接口，可选压缩质量。

文件

wx.chooseMessageFile(object)：从微信聊天会话中选择文件。

录音管理器

uni.getRecorderManager()：获取全局唯一的录音管理器 recorderManager 对象。

视频

uni.chooseVideo(OBJECT)：拍摄视频或从手机相册中选视频，返回视频的临时文件路径。
uni.chooseMedia(OBJECT)：拍摄或从手机相册中选择图片或视频。
uni.saveVideoToPhotosAlbum(OBJECT)：保存视频到系统相册。
uni.getVideoInfo(OBJECT)：获取视频详细信息。
uni.compressVideo(OBJECT)：压缩视频接口。开发者可指定压缩质量 quality 进行压缩。当需要更精细的控制时，可指定 bitrate、fps、和 resolution，当 quality 传入时，这三个参数将被忽略。原视频的相关信息可通过 getVideoInfo 获取。
uni.openVideoEditor(OBJECT)：打开视频编辑器。

音频组件控制

uni.createInnerAudioContext()：创建并返回内部 audio 上下文 innerAudioContext 对象。

视频组件控制

uni.createVideoContext(videoId, this)：创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video> 组件。

相机组件控制

uni.createCameraContext()：创建并返回 camera 组件的上下文 cameraContext 对象。

直播组件控制

uni.createLivePlayerContext(livePlayerId, this)：创建 live-player 上下文 livePlayerContext 对象。注意是直播的播放而不是推流。
ni.createLivePusherContext(livePusherId, this)：创建 live-pusher 上下文 livePusherContext 对象。

富文本

editorContext：editor 组件对应的 editorContext 实例，可通过 uni.createSelectorQuery 获取。

音视频合成

uni.createMediaContainer()：创建音视频处理容器，最终可将容器中的轨道合成一个视频，返回 MediaContainer 对象。

系统

uni.getSystemInfo(OBJECT)：异步获取系统信息。如运行应用的设备、设备的操作系统、基于操作系统的定制（Android系统特有概念）、运行应用的宿主程序、uni-app框架相关的信息、开发者的应用相关的信息。
uni.getSystemInfoSync()：同步获取系统信息。
uni.getDeviceInfo()：获取设备基础信息。
uni.getWindowInfo()：获取窗口信息。
uni.getAppBaseInfo()：获取微信 APP 基础信息。
uni.getAppAuthorizeSetting()：获取 APP 授权设置。
uni.getSystemSetting()：获取设备设置。
uni.openAppAuthorizeSetting()：跳转系统授权管理页。

内存

uni.onMemoryWarning(CALLBACK)：监听内存不足告警事件。
uni.offMemoryWarning(CALLBACK)：取消监听内存不足告警事件。不传入 callback 则取消所有监听。

网络状态

uni.getNetworkType(OBJECT)：获取网络类型。
uni.onNetworkStatusChange(CALLBACK)：监听网络状态变化。可使用uni.offNetworkStatusChange取消监听。
uni.offNetworkStatusChange(CALLBACK)：取消监听网络状态变化。

系统主题

uni.onThemeChange(CALLBACK)：监听系统主题状态变化。
uni.offThemeChange(CALLBACK)：取消监听系统主题状态变化。

加速度计

uni.onAccelerometerChange(CALLBACK)：监听加速度数据，频率：5次/秒，接口调用后会自动开始监听，可使用 uni.offAccelerometer 取消监听。
uni.offAccelerometerChange(CALLBACK)：取消监听加速度数据。
uni.startAccelerometer(OBJECT)：开始监听加速度数据。
uni.stopAccelerometer(OBJECT)：停止监听加速度数据。

罗盘

uni.onCompassChange(CALLBACK)：监听罗盘数据，频率：5次/秒，接口调用后会自动开始监听，可使用 uni.offCompassChange 取消监听。
uni.offCompassChange(CALLBACK)：取消监听罗盘数据。
uni.startCompass(OBJECT)：开始监听罗盘数据。
uni.stopCompass(OBJECT)：停止监听罗盘数据。

陀螺仪

uni.onGyroscopeChange(CALLBACK)：监听陀螺仪数据变化事件。
uni.startGyroscope(OBJECT)：开始监听陀螺仪数据。
uni.stopGyroscope(OBJECT)：停止监听陀螺仪数据。

拨打电话

uni.makePhoneCall(OBJECT)：拨打电话。

扫码

uni.scanCode(OBJECT)：调起客户端扫码界面，扫码成功后返回对应的结果。

剪贴板

uni.setClipboardData(OBJECT)：设置系统剪贴板的内容。
uni.getClipboardData(OBJECT)：获取系统剪贴板内容。

屏幕亮度

uni.setScreenBrightness(OBJECT)：设置屏幕亮度。
uni.getScreenBrightness(OBJECT)：获取屏幕亮度。
uni.setKeepScreenOn(OBJECT)：设置是否保持常亮状态。仅在当前应用生效，离开应用后设置失效。

截屏

uni.onUserCaptureScreen(CALLBACK)：监听用户主动截屏事件，用户使用系统截屏按键截屏时触发此事件。
uni.offUserCaptureScreen(function callback)：用户主动截屏事件。取消事件监听。

振动

uni.vibrate(OBJECT)：使手机发生振动。
uni.vibrateLong(OBJECT)：使手机发生较长时间的振动（400ms）。
uni.vibrateShort(OBJECT)：使手机发生较短时间的振动（15ms）。

通讯录

uni.addPhoneContact(OBJECT)：调用后，用户可以选择将该表单以“新增联系人”或“添加到已有联系人”的方式（APP端目前没有选择步骤，将直接写入），写入手机系统通讯录，完成手机通讯录联系人和联系方式的增加。

蓝牙

uni.openBluetoothAdapter(OBJECT)：初始化蓝牙模块。
uni.startBluetoothDevicesDiscovery(OBJECT)：开始搜寻附近的蓝牙外围设备。此操作比较耗费系统资源，请在搜索并连接到设备后调用 uni.stopBluetoothDevicesDiscovery 方法停止搜索。
uni.onBluetoothDeviceFound(CALLBACK)：监听寻找到新设备的事件。
uni.stopBluetoothDevicesDiscovery(OBJECT)：停止搜寻附近的蓝牙外围设备。若已经找到需要的蓝牙设备并不需要继续搜索时，建议调用该接口停止蓝牙搜索。
uni.onBluetoothAdapterStateChange(CALLBACK)：监听蓝牙适配器状态变化事件。
uni.getConnectedBluetoothDevices(OBJECT)：根据 uuid 获取处于已连接状态的设备。
uni.getBluetoothDevices(OBJECT)：获取在蓝牙模块生效期间所有已发现的蓝牙设备。包括已经和本机处于连接状态的设备。
uni.getBluetoothAdapterState(OBJECT)：获取本机蓝牙适配器状态。
uni.closeBluetoothAdapter(OBJECT)：关闭蓝牙模块。调用该方法将断开所有已建立的连接并释放系统资源。建议在使用蓝牙流程后，与 uni.openBluetoothAdapter 成对调用。

低功耗蓝牙

uni.setBLEMTU(OBJECT)：设置蓝牙最大传输单元。需在 uni.createBLEConnection调用成功后调用，mtu 设置范围 (22,512)。
uni.writeBLECharacteristicValue(OBJECT)：向低功耗蓝牙设备特征值中写入二进制数据。注意：必须设备的特征值支持 write 才可以成功调用。
uni.readBLECharacteristicValue(OBJECT)：读取低功耗蓝牙设备的特征值的二进制数据值。注意：必须设备的特征值支持 read 才可以成功调用。
uni.onBLEConnectionStateChange(CALLBACK)：监听低功耗蓝牙连接状态的改变事件。包括开发者主动连接或断开连接，设备丢失，连接异常断开等等。
uni.onBLECharacteristicValueChange(CALLBACK)：监听低功耗蓝牙设备的特征值变化事件。必须先启用 notifyBLECharacteristicValueChange 接口才能接收到设备推送的 notification。
uni.notifyBLECharacteristicValueChange(OBJECT)：启用低功耗蓝牙设备特征值变化时的 notify 功能，订阅特征值。注意：必须设备的特征值支持 notify 或者 indicate 才可以成功调用。另外，必须先启用 notifyBLECharacteristicValueChange 才能监听到设备 characteristicValueChange 事件。
uni.getBLEDeviceServices(OBJECT)：获取蓝牙设备所有服务(service)。
uni.getBLEDeviceRSSI(OBJECT)：获取蓝牙设备的信号强度。
uni.getBLEDeviceCharacteristics(OBJECT)：获取蓝牙设备某个服务中所有特征值(characteristic)。
uni.createBLEConnection(OBJECT)：连接低功耗蓝牙设备。
uni.closeBLEConnection(OBJECT)：断开与低功耗蓝牙设备的连接。

键盘

uni.hideKeyboard()：隐藏软键盘。
uni.onKeyboardHeightChange(CALLBACK)：监听键盘高度变化。
uni.offKeyboardHeightChange(CALLBACK)：取消监听键盘高度变化事件。
uni.getSelectedTextRange(OBJECT)：在input、textarea等focus之后，获取输入框的光标位置。注意：只有在focus的时候调用此接口才有效。

交互反馈

uni.showToast(OBJECT)：显示消息提示框。
uni.hideToast()：隐藏消息提示框。
uni.showLoading(OBJECT)：显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。
uni.hideLoading()：隐藏 loading 提示框。
uni.showModal(OBJECT)：显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。
uni.showActionSheet(OBJECT)：从底部向上弹出操作菜单。

设置导航条

uni.setNavigationBarTitle(OBJECT)：动态设置当前页面的标题。
uni.setNavigationBarColor(OBJECT)：设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖。
uni.showNavigationBarLoading(OBJECT)：在当前页面显示导航条加载动画。
uni.hideNavigationBarLoading(OBJECT)：在当前页面隐藏导航条加载动画。
uni.hideHomeButton(OBJECT)：隐藏返回首页按钮。

设置TabBar

uni.setTabBarItem(OBJECT)：动态设置 tabBar 某一项的内容。
uni.setTabBarStyle(OBJECT)：动态设置 tabBar 的整体样式。
uni.hideTabBar(OBJECT)：隐藏 tabBar。
uni.showTabBar(OBJECT)：显示 tabBar。
uni.setTabBarBadge(OBJECT)：为 tabBar 某一项的右上角添加文本。
uni.removeTabBarBadge(OBJECT)：移除 tabBar 某一项右上角的文本。
uni.showTabBarRedDot(OBJECT)：显示 tabBar 某一项的右上角的红点。
uni.hideTabBarRedDot(OBJECT)：隐藏 tabBar 某一项的右上角的红点。

背景

uni.setBackgroundColor(OBJECT)：动态设置窗口的背景色。
uni.setBackgroundTextStyle(OBJECT)：动态设置下拉背景字体、loading 图的样式。

动画

uni.createAnimation(OBJECT)：创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

滚动

uni.pageScrollTo(OBJECT)：将页面滚动到目标位置。可以指定滚动到具体的scrollTop数值，也可以指定滚动到某个元素的位置。

窗口

uni.onWindowResize(CALLBACK)：监听窗口尺寸变化事件。
uni.offWindowResize(CALLBACK)：取消监听窗口尺寸变化事件。

字体

uni.loadFontFace(Object object)：动态加载字体。

下拉刷新

uni.startPullDownRefresh(OBJECT)：开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
uni.stopPullDownRefresh()：停止当前页面下拉刷新。

节点信息

uni.createSelectorQuery()：返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

节点布局交叉状态

uni.createIntersectionObserver([this], [options])：创建并返回一个 IntersectionObserver 对象实例。

媒体查询

uni.createMediaQueryObserver([this])：创建并返回一个 MediaQueryObserver 对象实例。

菜单

uni.getMenuButtonBoundingClientRect()：在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。坐标信息以屏幕左上角为原点。

语言

uni.getLocale()：获取当前设置的语言。
uni.setLocale(locale)：设置当前语言。
uni.onLocaleChange(callback)：用于监听应用语言切换。

文件

uni.saveFile(OBJECT)：保存文件到本地。
uni.getSavedFileList(OBJECT)：获取本地已保存的文件列表。
uni.getSavedFileInfo(OBJECT)：获取本地文件的文件信息。此接口只能用于获取已保存到本地的文件。
uni.removeSavedFile(OBJECT)：删除本地存储的文件。
uni.getFileInfo(OBJECT)：获取文件信息。
uni.openDocument(OBJECT)：新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。

Canvas

uni.createOffscreenCanvas()：创建离屏 canvas 实例。
uni.createCanvasContext(canvasId, this)：创建 canvas 绘图上下文（指定 canvasId）。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <canvas/> 组件。
uni.canvasToTempFilePath(object, component)：把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
uni.canvasPutImageData(OBJECT,this)：将像素数据绘制到画布的方法，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 <canvas> 组件。
uni.canvasGetImageData(OBJECT,this)：返回一个数组，用来描述 canvas 区域隐含的像素数据，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 <canvas> 组件。

获取服务供应商

uni.getProvider(OBJECT)：获取服务供应商。

uni.login(OBJECT)：统一封装了各个平台的各种常见的登录方式，包括App手机号一键登陆、三方登录（微信、微博、QQ、Apple、google、facebook）、各家小程序内置登录。
uni.checkSession：检查登录状态是否过期。
uni.getUserInfo(OBJECT)：获取用户信息。
uni.getUserProfile(OBJECT)：获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。

TIP

微信小程序获取用户信息接口已调整，详细请参考小程序开发文档。

onShareAppMessage(OBJECT)：小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。
uni.showShareMenu(OBJECT)：小程序的原生菜单中显示分享按钮。
uni.hideShareMenu(OBJECT)：小程序的原生菜单中隐藏分享按钮。

支付

uni.requestPayment(OBJECT)：支付。

推送

uni.getPushClientId(OBJECT)：获取客户端唯一的推送标识。
uni.onPushMessage(callback)：启动监听推送消息事件。
uni.offPushMessage(callback)：关闭推送消息监听事件。
uni.getChannelManager()：获取通知渠道管理器，Android 8系统以上才可以设置通知渠道。

实人认证

uni.startFacialRecognitionVerify(OBJECT)：实人认证。

授权

uni.authorize(OBJECT)：提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。如果用户之前拒绝了授权，此接口会直接进入失败回调，一般搭配uni.getSetting和uni.openSetting使用。

设置

uni.openSetting(OBJECT)：调起客户端小程序设置界面，返回用户设置的操作结果。
uni.getSetting(OBJECT)：获取用户的当前设置。

收货地址

uni.chooseAddress(OBJECT)：获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，需要用户授权 scope.address。

获取发票抬头

uni.chooseInvoiceTitle(OBJECT)：选择用户的发票抬头，需要用户授权 scope.invoiceTitle。在微信小程序中，当前小程序必须关联一个公众号，且这个公众号是完成了微信认证的，才能调用 chooseInvoiceTitle。

小程序跳转

uni.navigateToMiniProgram(OBJECT)：打开另一个小程序。
uni.navigateBackMiniProgram(OBJECT)：跳转回上一个小程序，只有当另一个小程序跳转到当前小程序时才会能调用成功。
uni.openEmbeddedMiniProgram(OBJECT)：微信小程序跳转小程序（半屏模式）。

账号信息

uni.getAccountInfoSync()：获取当前帐号信息，可以返回小程序的Appid。如果使用了微信小程序的云端插件，还可以返回当前插件Appid、版本号。

小程序更新

uni.getUpdateManager()：本API返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。

uni-app(仅微信小程序平台) ​

工程 ​

创建 uni-app ​

运行 uni-app ​

页面 ​

页面生命周期 ​

组件生命周期 ​

页面调用接口 ​

页面通讯 ​

页面栈 ​

JS 语法 ​

CSS 语法 ​

尺寸单位 ​

选择器 ​

内置 CSS 变量 ​

条件编译 ​

script ​

template ​

css ​

pages.json ​

pages.json 页面路由 ​

globalStyle ​

pages ​

style ​

自定义导航栏 ​

easycom ​

自定义 easycom 配置 ​

tabBar ​

list 属性 ​

subPackages ​

分包优化 ​

preloadRule ​

示例 ​

manifest.json 应用配置 ​

networkTimeout 属性 ​

uniStatistics 属性 ​

mp-weixin 属性 ​

setting 属性 ​

optimization 属性 ​

App.vue ​

应用生命周期 ​

全局变量 ​

全局样式 ​

示例 ​

main.js ​

uni.scss ​

uni-app 组件 ​

视图容器 ​

文本容器 ​

表单 ​

路由 ​

媒体 ​

地图 ​

画布 ​

web-view ​

云数据库 ​

页面属性配置节点 ​

uni-ui 组件 ​

安装 uni-ui ​

配置 easycom ​

uni-sass 辅助样式 ​

使用scss变量 ​

使用类名 ​

uni-app API ​

定时器 ​

ArrayBuffer / Base64 ​

启动 ​

应用级事件 ​

拦截器 ​

全局API ​

发起请求 ​

上传下载 ​

路由 ​

事件监听 ​

页面与通讯 ​

数据缓存 ​

位置 ​

图片 ​

文件 ​

录音管理器 ​

uni-app(仅微信小程序平台)

工程

创建 uni-app

运行 uni-app

页面

页面生命周期

组件生命周期

页面调用接口

页面通讯

页面栈

JS 语法

CSS 语法

尺寸单位

选择器

内置 CSS 变量

条件编译

script

template

css

pages.json

pages.json 页面路由

globalStyle

pages

style

自定义导航栏

easycom

自定义 easycom 配置

tabBar

list 属性

subPackages

分包优化

preloadRule

示例

manifest.json 应用配置

networkTimeout 属性

uniStatistics 属性

mp-weixin 属性

setting 属性

optimization 属性

App.vue

应用生命周期

全局变量

全局样式

示例

main.js

uni.scss

uni-app 组件

视图容器

文本容器

表单

路由

媒体

地图

画布

web-view

云数据库

页面属性配置节点

uni-ui 组件

安装 uni-ui

配置 easycom

uni-sass 辅助样式

使用scss变量

使用类名

uni-app API

定时器

ArrayBuffer / Base64

启动

应用级事件

拦截器

全局API

发起请求

上传下载

路由

事件监听

页面与通讯

数据缓存

位置

图片

文件

录音管理器