uni-app官网文档学习记录

介绍

这边文章主要来自uni-app官网，记录一些常见问题和经常使用的组件及API，供后续使用快速浏览。如果想看更加全面的内容，建议移步到官网。uni-app

项目目录结构介绍

┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb（详见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原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
└─uni.scss              内置的常用样式变量

pages.json:页面路由

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中注册的页面，uni-app会在编译阶段进行忽略。

manifest.json 应用配置

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

App.vue/App.uvue

App.vue/uvue是uni-app的主组件。uni-app js引擎版是app.vue。uni-app x是app.uvue。

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

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

应用生命周期仅可在App.vue中监听，在页面监听无效。 、

main.js/main.uts

main.js/uts是 uni-app 的入口文件。uni-app js引擎版是main.js，而uni-app x则是main.uts。以下一般用main.js泛指全部。

main.js主要作用是初始化vue实例、定义全局组件、使用需要的插件如 i18n、vuex。

uni.scss

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

package.json

管理依赖的包，调试脚本，

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项，具体规范参考：vue.config.js

说明：仅vue页面生效

vite.config.js

vite.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 vite 的编译选项，具体规范参考：vite.config.js

说明：仅vue 3项目生效

开发效率

参考原文地址

Tag代码块

• uButton
• uCheckbox
• uGrid：宫格，需引用uni ui
• uList：列表，需引用uni ui
• uListMedia
• uRadio
• uSwiper

JS代码块

uni api代码块

• uRequest
• uGetLocation
• uShowToast
• uShowLoading
• uHideLoading
• uShowModal
• uShowActionSheet
• uNavigateTo
• uNavigateBack
• uRedirectTo
• uStartPullDownRefresh
• uStopPullDownRefresh
• uLogin
• uShare
• uPay

ue js代码块

• vImport：导入文件
• ed：export default
• vData：输出 data(){return{}}
• vMethod：输出 methods:{}
• vComponents：输出 components: {}

其他常用js代码块

• iff：简单if
• forr：for循环结构体
• fori：for循环结构体并包含i
• funn：函数
• funa：匿名函数
• rt：return true
• clog：输出："console.log()"
• clogvar：增强的日志输出，可同时把变量的名字打印出来
• varcw：输出："var currentWebview = this.$scope.page.$getAppWebview()"
• ifios：iOS的平台判断
• ifAndroid：Android的平台判断

uni-app组件

基础组件

视图容器（View Container）：

组件名	说明
view	视图容器，类似于HTML中的div
scroll-view	可滚动视图容器
swiper	滑块视图容器，比如用于轮播banner
match-media	屏幕动态适配组件，比如窄屏上不显示某些内容
movable-area	可拖动区域
movable-view	可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中
cover-view	可覆盖在原生组件的上的文本组件
cover-image	可覆盖在原生组件的上的图片组件

基础内容（Basic Content）：

组件名	说明
icon	图标
text	文字
rich-text	富文本显示组件
progress	进度条

表单组件（Form）：

标签名	说明
button	按钮
checkbox	多项选择器
editor	富文本输入框
form	表单
input	输入框
label	标签
picker	弹出式列表选择器
picker-view	窗体内嵌式列表选择器
radio	单项选择器
slider	滑动选择器
switch	开关选择器
textarea	多行文本输入框

路由与页面跳转（Navigation）：

组件名	说明
navigator	页面链接。类似于HTML中的a标签

媒体组件（Media）：

组件名	说明
audio	音频
camera	相机
image	图片
video	视频
live-player	直播播放
live-pusher	实时音视频录制，也称直播推流

地图（Map）：

组件名	说明
map	地图

画布（Canvas）：

组件名	说明
canvas	画布

webview（Web-view）：

组件名	说明
web-view	web浏览器组件

广告

组件名	说明
ad	广告组件
ad-draw	沉浸视频流广告组件

页面属性配置

组件名	说明
custom-tab-bar	底部tabbar自定义组件
navigation-bar	页面顶部导航
page-meta	页面属性配置节点

uniCloud

组件名	说明
unicloud-db组件	uniCloud数据库访问和操作组件

uni-ui扩展组件

组件名	组件说明
uni-badge	数字角标
uni-calendar	日历
uni-card	卡片
uni-collapse	折叠面板
uni-combox	组合框
uni-countdown	倒计时
uni-data-checkbox	数据选择器
uni-data-picker	数据驱动的picker选择器
uni-dateformat	日期格式化
uni-datetime-picker	日期选择器
uni-drawer	抽屉
uni-easyinput	增强输入框
uni-fab	悬浮按钮
uni-fav	收藏按钮
uni-file-picker	文件选择上传
uni-forms	表单
uni-goods-nav	商品导航
uni-grid	宫格
uni-group	分组
uni-icons	图标
uni-indexed-list	索引列表
uni-link	超链接
uni-list	列表
uni-load-more	加载更多
uni-nav-bar	自定义导航栏
uni-notice-bar	通告栏
uni-number-box	数字输入框
uni-pagination	分页器
uni-popup	弹出层
uni-rate	评分
uni-row	布局-行
uni-search-bar	搜索栏
uni-segmented-control	分段器
uni-steps	步骤条
uni-swipe-action	滑动操作
uni-swiper-dot	轮播图指示点
uni-table	表格
uni-tag	标签
uni-title	章节标题
uni-transition	过渡动画

uni-app api

列举了一些个人觉得会常用的，全部文档参考原文

基础

日志打印等。

API	说明
日志打印	向控制台打印日志信息
定时器	在定时到期以后执行注册的回调函数
uni.base64ToArrayBuffer	将 Base64 字符串转成 ArrayBuffer 对象
uni.arrayBufferToBase64	将 ArrayBuffer 对象转成 Base64 字符串
应用级事件	监听应用事件
拦截器	拦截 Api 等调用并执行回调
全局 API	可全局调用 Api

网络

发起请求

API	说明
uni.request	发起网络请求

上传、下载

API	说明
uni.uploadFile	上传文件
uni.downloadFile	下载文件

媒体

图片

API	说明
uni.chooseImage	从相册选择图片，或者拍照
uni.previewImage	预览图片
uni.closePreviewImage	关闭预览图片
uni.getImageInfo	获取图片信息
uni.saveImageToPhotosAlbum	保存图片到系统相册

文件

API	说明
uni.chooseFile	从本地选择文件

录音管理

API	说明
uni.getRecorderManager	录音管理

背景音频播放管理

API	说明
uni.getBackgroundAudioManager	背景音频播放管理

音频组件管理

API	说明
uni.createInnerAudioContext	音频组件管理

视频

API	说明
uni.chooseVideo	从相册选择视频，或者拍摄
uni.chooseMedia	拍摄或从手机相册中选择图片或视频。
uni.saveVideoToPhotosAlbum	保存视频到系统相册
uni.createVideoContext	视频组件管理

相机组件管理

API	说明
uni.createCameraContext	相机组件管理

直播组件管理

API	说明
uni.createLivePlayerContext	直播组件管理

文件

API	说明
uni.saveFile	保存文件
uni.getSavedFileList	获取已保存的文件列表
uni.getSavedFileInfo	获取已保存的文件信息
uni.removeSavedFile	删除已保存的文件信息
uni.getFileInfo	获取文件信息
uni.openDocument	打开文件

数据缓存

API	说明
uni.getStorage	获取本地数据缓存
uni.getStorageSync	获取本地数据缓存
uni.setStorage	设置本地数据缓存
uni.setStorageSync	设置本地数据缓存
uni.getStorageInfo	获取本地缓存的相关信息
uni.getStorageInfoSync	获取本地缓存的相关信息
uni.removeStorage	删除本地缓存内容
uni.removeStorageSync	删除本地缓存内容
uni.clearStorage	清理本地数据缓存
uni.clearStorageSync	清理本地数据缓存

位置

获取位置

API	说明
uni.getLocation	获取当前位置
uni.chooseLocation	打开地图选择位置

查看位置

API	说明
uni.openLocation	打开内置地图

地图组件控制

API	说明
uni.createMapContext	地图组件控制

设备

系统信息

API	说明
uni.getSystemInfo	获取系统信息
uni.getSystemInfoSync	获取系统信息
uni.canIUse	判断应用的 API，回调，参数，组件等是否在当前版本可用

拨打电话

API	说明
uni.makePhoneCall	拨打电话

扫码

API	说明
uni.scanCode	扫码

剪切板

API	说明
uni.setClipboardData	设置剪贴板内容
uni.getClipboardData	获取剪贴板内容

屏幕亮度

API	说明
uni.setScreenBrightness	设置屏幕亮度
uni.getScreenBrightness	获取屏幕亮度
uni.setKeepScreenOn	设置是否保持常亮状态

用户截屏事件

API	说明
uni.onUserCaptureScreen	监听用户截屏事件

手机联系人

API	说明
uni.addPhoneContact	添加手机通讯录

生物认证

API	说明
uni.startSoterAuthentication	开始生物认证
uni.checkIsSupportSoterAuthentication	获取本机支持的生物认证方式
uni.checkIsSoterEnrolledInDevice	获取设备内是否录入如指纹等生物信息的接口

界面

交互反馈

API	说明
uni.showToast	显示提示框
uni.showLoading	显示加载提示框
uni.hideToast	隐藏提示框
uni.hideLoading	隐藏加载提示框
uni.showModal	显示模态弹窗
uni.showActionSheet	显示菜单列表

设置导航条

API	说明
uni.setNavigationBarTitle	设置当前页面标题
uni.setNavigationBarColor	设置页面导航条颜色
uni.showNavigationBarLoading	显示导航条加载动画
uni.hideNavigationBarLoading	隐藏导航条加载动画

设置 TabBar

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

背景

API	说明
uni.setBackgroundColor	动态设置窗口的背景色。
uni.setBackgroundTextStyle	动态设置下拉背景字体、loading 图的样式。

动画

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

滚动

API	说明
uni.pageScrollTo	将页面滚动到目标位置。

绘画

API	说明
uni.createCanvasContext	创建绘图上下文
uni.canvasToTempFilePath	将画布内容保存成文件
uni.canvasGetImageData	获取画布图像数据
uni.canvasPutImageData	设置画布图像数据

下拉刷新

API	说明
onPullDownRefresh	监听该页面用户下拉刷新事件
uni.startPullDownRefresh	开始下拉刷新
uni.stopPullDownRefresh	停止当前页面下拉刷新

节点信息

API	说明
uni.createSelectorQuery	创建查询请求
selectorQuery.select	根据选择器选择单个节点
selectorQuery.selectAll	根据选择器选择全部节点
selectorQuery.selectViewport	选择显示区域
selectorQuery.exec	执行查询请求
nodesRef.boundingClientRect	获取布局位置和尺寸
nodesRef.scrollOffset	获取滚动位置
nodesRef.fields	获取任意字段

节点布局相交状态

API	说明
uni.createIntersectionObserver	创建 IntersectionObserver 对象
intersectionObserver.relativeTo	指定参照节点
intersectionObserver.relativeToViewport	指定页面显示区域作为参照区域
intersectionObserver.observe	指定目标节点并开始监听
intersectionObserver.disconnect	停止监听

页面和路由

API	说明
uni.navigateTo	保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面
uni.redirectTo	关闭当前页面，跳转到应用内的某个页面
uni.reLaunch	关闭所有页面，打开到应用内的某个页面
uni.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.navigateBack	关闭当前页面，返回上一页面或多级页面

键盘

API	说明
uni.hideKeyboard	隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
uni.onKeyboardHeightChange	监听键盘高度变化
uni.offKeyboardHeightChange	取消监听键盘高度变化事件
uni.getSelectedTextRange	在 input、textarea 等 focus 之后，获取输入框的光标位置

第三方服务

API	说明
uni.getProvider	获取服务供应商
uni.login	登录
uni.getUserInfo	获取用户信息
uni.getuserprofile	获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo
uni.checkSession	检查登录状态是否过期
uni.preLogin	预登录
uni.closeAuthView	关闭一键登录页面
uni.getCheckBoxState	获取一键登录条款勾选框状态
uni.getUniverifyManager	获取全局唯一的一键登录管理器 univerifyManager
uni.share	分享
uni.shareWithSystem	使用系统分享
uni.requestPayment	支付
uni.subscribePush	开启推送
uni.unsubscribePush	关闭推送
uni.onPush	监听透传数据
uni.offPush	移除监听透传数据

广告

API	说明
激励视频广告	激励视频广告，是 cpm 收益最高的广告形式
全屏视频广告	全屏视频广告
内容联盟广告	内容联盟广告
插屏广告	插屏广告
互动游戏	互动游戏是 DCloud 联合三方服务商为开发者提供新的广告场景增值服务

平台扩展

API	说明
uni.requireNativePlugin	引入 App 原生插件

其他

授权

API	说明
uni.authorize	提前向用户发起授权请求

设置

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

收货地址

API	说明
uni.chooseAddress	获取用户收货地址

获取发票抬头

API	说明
uni.chooseInvoiceTitle	选择用户的发票抬头，需要用户授权 scope.invoiceTitle。

小程序跳转

API	说明
uni.navigateToMiniProgram	打开另一个小程序。
uni.navigateBackMiniProgram	跳转回上一个小程序，只有当另一个小程序跳转到当前小程序时才会能调用成功。

模板消息

API	说明
addTemplate	组合模板并添加至帐号下的个人模板库。
deleteTemplate	删除帐号下的某个模板。
getTemplateLibraryById	获取模板库某个模板标题下关键词库。
getTemplateLibraryList	获取 APP 模板库标题列表
getTemplateList	获取帐号下已存在的模板列表。
sendTemplateMessage	发送模板消息
alipay.open.app.mini.templatemessage.send	支付宝小程序通过 openapi 给用户触达消息，主要为支付后的触达（通过消费 id）和用户提交表单后的触达（通过 formId）。

小程序更新

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

调试

API	说明
uni.setEnableDebug	设置是否打开调试开关。此开关对正式版也能生效。

获取第三方平台数据

API	说明
uni.getExtConfig	获取第三方平台自定义的数据字段。
uni.getExtConfigSync	uni.getExtConfig 的同步版本。

datacom组件规范

1. 命名以 -data- 为中间分隔符，前面为组件库名称，后面是组件功能表达
2. 组件可以通过属性赋值，绑定一个 data 数据。可以是本地的localdata，也可以直接指定uniCloud云数据库的查询结果。
3. data数据是一组候选json数据。数据可以是平铺的数组，也可以是嵌套的树形结构。
4. 符合 组件的表单校验规范

常见问题

关于elementUI与uni-ui开发小程序

传统的vue组件，比如elementUI，都是only for web的，里面有大量dom和window对象操作。但小程序和App是没有dom这些api的，自然无法跨端使用。

跨域问题及mock

juejin.cn/post/684490…