本笔记仅记录了一些本人常用到的，具体请查看https://uniapp.dcloud.io/
1,uni-app的代码结构
(1):pages => 存放页面
static => 存放静态资源(图片，字体图标)
pages.json => 存放路由跳转地址
(2):pages.json的配置
{
"pages":[
<!--存放页面路径，每个页面都需在此配置-->
{
"path":"路径",
"style":{
"navigationBarBackgroundColor":"背景色"，
"navigationBarTextStyle":"导航栏字体颜色(black/white)",
"navigationBarTitleText":"导航栏标题",
"navigationStyle":"导航栏样式(default/custom,custom取消默认导航栏)",
"disableScroll":"页面整体是否能够上下滚动(true/false)",
"backgroundColor":"窗口的背景色",
"backgroundTextStyle":"下拉刷新的样式(dark/light)",
"enablePullDownRefresh":"是否开启下拉刷新(true/false)",
"onReachBottomDistance":"Number(页面上拉触底事件触发时距页面底部距离)",
"backgroundColorTop":"顶部窗口的颜色(仅限于ios)",
"backgroundColorBottom":"底部窗口的背景色(仅限于ios)",
"app-plus":{
<!--编译到APP平台的特定样式-->
},
"h5":{
<!--编译到H5平台的特定样式-->
},
"usingComponents":{
<!--引用小程序组件-->
[link](https://uniapp.dcloud.io/frame?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
}
}
},{
}
],
<!--底部导航栏-->
"tabBar":{
"color":"tab上的文字颜色",
"selectedColor":"tab 上的文字选中时的颜色",
"backgroundColor":"tab 的背景色",
"borderStyle":"tab上边框的颜色",
"list":[{ <!-- 最少2个，最多5个 -->
"pagePath":"页面路径",
"text":"tab文字",
"iconPath":"图标",
"selectedIconPath":"选中图标"
},{
}]
},
<!-- 仅开发模式下有效 -->
"condition":{
"current":0,
"list":[{
"name":"",
"path":"路径",
"query":"参数，onload获取到"
}]
}
}
2，uni-app中的生命周期
(1):应用的生命周期(仅在APP.vue中监听才起效)
onLaunch(){
<!--当uni-app初始化完成时触发（全局只触发一次） -->
}
onShow(){
<!--当APP启动或者从后台显示到前台-->
}
onHide(){
<!--当APP从前台进入后台-->
}
onUniNViewMessage(){
<!--对nvue页面发送数据进行监听-->
}
(2):页面的生命周期
onLoad(option){
<!--option为上个页面传递的参数-->
}
onShow(){
<!--监听页面的显示，包括后退也会执行该函数-->
}
onReady(){
<!--页面初次渲染-->
}
onHide(){
<!--监听页面隐藏-->
}
onUnload(){
<!--监听页面卸载-->
}
onPullDownRefresh(){
<!--监听用户下拉(下拉刷新)-->
}
onReachBottom(){
<!--页面上拉触底事件的处理函数-->
}
onTabItemTap(option){
<!--点击tab时触发-->
}
onShareAppMessage(){
<!--用户点击右上角分享(小程序)-->
}
onPageScroll(option){
<!--监听页面滚动-->
}
onNavigationBarButtonTap(option){
<!--监听原生标题栏按钮点击事件，参数为Object-->
}
onBackPress(options){
<!--
Android 实体返回键 (form = backbutton)
顶部导航栏左边的返回按钮 (form = backbutton)
返回 API，即 uni.navigateBack() (form = navigateBack)
-->
if (options.from === 'navigateBack') {
return false;
}
return true;
}
onNavigationBarSearchInputChanged(){
<!--监听原生标题栏搜索输入框输入内容变化事件-->
}
onNavigationBarSearchInputConfirmed(){
<!--监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发-->
}
onNavigationBarSearchInputClicked(){
<!--监听原生标题栏搜索输入框点击事件-->
}
3，uni-app中的路由
(1):uni.navigateTo({
url, <!--跳转地址，可带参数www.baidu.com?id=1&type=2 -->
animationType,<!--窗口显示的动画效果 -->
animationDuration,<!--窗口动画持续时间，单位为 ms -->
success, <!--接口调用成功的回调函数 -->
fail, <!--接口调用失败的回调函数 -->
complete <!--接口调用结束的回调函数（调用成功、失败都会执行） -->
})
---保留当前页面，跳转到应用内的某个页面(页面不断的堆栈，当栈过多时，按返回键会出现白屏现象。并且此页面不能为tabBar页面)---
(2):uni.redirectTo({
url, <!--跳转地址，可带参数www.baidu.com?id=1&type=2 -->
success,<!--接口调用成功的回调函数 -->
fail,<!--接口调用失败的回调函数 -->
complete<!--接口调用结束的回调函数（调用成功、失败都会执行） -->
})
---关闭当前页面，跳转到应用内的某个页面。(注意打开页面不能为tabBar页面)---
(3):uni.reLaunch({
url,<!--跳转地址，可带参数www.baidu.com?id=1&type=2 -->
success,<!--接口调用成功的回调函数 -->
fail,<!--接口调用失败的回调函数 -->
complete<!--接口调用结束的回调函数（调用成功、失败都会执行） -->
})
---关闭所有页面，打开到应用内的某个页面。(可以打开任意页面)---
(4):uni.switchTab({
url, <!-- 注意路径后面不能带参数 -->
success, <!--接口调用成功的回调函数 -->
fail,<!--接口调用失败的回调函数 -->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行） -->
})
--- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。---
(5):uni.navigateBack({
delta, <!--关闭的层数 -->
animationType, <!--窗口关闭的动画效果 -->
animationDuration,<!--窗口关闭动画的持续时间，单位为 ms -->
})
---关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。---
let pages = getCurrentPages();
console.log(pages);
4，uni-app中的请求
uni.request({
url, <!--请求地址 -->
data, <!--请求参数 -->
header, <!--设置请求的 header， -->
method, <!--请求方式 -->
dataType, <!-- 如果设为 json，会尝试对返回的数据做一次 JSON.parse-->
responseType, <!--设置响应的数据类型。合法值：text、arraybuffer -->
success, <!--成功返回执行此函数 -->
fail, <!-- 错误返回此函数-->
complete <!--不管成功还是失败都会执行此函数 -->
});
--- method ---
method 有效值必须大写
'POST'
<!--
1,header['content-type']为application/json 的数据,会进行 JSON 序列化
2,header['content-type']为application/x-www-form-urlencoded的数据，会将数据转换为 query string。
-->
'GET'
<!--
会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
-->
'PUT'
'DELETE'
'CONNECT'
'HEAD'
'OPTIONS'
'TRACE'
5，uni-app中的数据存储
(1):uni.setStorage({
key:"String",
data:'Any',
success:function,
faul:function,
complete:function
})
---将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 ---
(2):uni.setStorageSync({
key:'String',
data:'Any'
})
---将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。 ---
(3):uni.getStorage({
key:'',
success:function,
fail:function,
complete:function
})
---从本地缓存中异步获取指定 key 对应的内容。---
(4):uni.getStorageSync({
key:'String'
})
---从本地缓存中同步获取指定 key 对应的内容。---
(5):uni.removeStorage({
key:'String',
success:function,
fail:function,
complete:function
})
---从本地缓存中异步移除指定 key。---
(6):uni.clearStorage()
---清理本地数据缓存。---
5，uni-app中的上传和下载
(1):上传
uni.uploadFile({
url, <!--上传url -->
files,<!--需要上传的文件列表。使用 files 时，filePath 和 name 不生效 -->
fileType, <!--文件类型，image/video/audio -->
filePath,<!--要上传文件资源的路径 -->
name, <!--文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 -->
header, <!--HTTP 请求 Header, header 中不能设置 Referer。 -->
formData,<!-- HTTP 请求中其他额外的 form data-->
success,<!-- 接口调用成功的回调函数-->
fail,<!--接口调用失败的回调函数 -->
complete, <!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---5+App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。 ---
(2):下载
uni.downloadFile({
url，<!--下载资源的 url -->
header,<!--HTTP 请求 Header, header 中不能设置 Referer。-->
success,<!--下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: '文件的临时路径'}-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，才能在应用下次启动时访问得到---
6，uni-app中图片
(1):uni.chooseImage({
count:number, <!--最多可以选择的图片张数，默认9-->
sizeType,<!--original 原图，compressed 压缩图，默认二者都有-->
sourceType,<!--album 从相册选图，camera 使用相机，默认二者都有-->
success,<!--成功则返回图片的本地文件路径列表 tempFilePaths-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---从本地相册选择图片或使用相机拍照。另外选择和上传非图像、视频文件参考：https://ask.dcloud.net.cn/article/35547。---
(2):uni.previewImage({})
---预览图片，详见https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject---
(3):uni.getImageInfo({
src, <!--图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径-->
success, <!--接口调用成功的回调函数-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---获取图片信息---
(4):uni.saveImageToPhotosAlbum({
filePath,<!--图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径-->
success,<!--接口调用成功的回调函数-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---保存图片到系统相册(仅支持APP和微信小程序)---
(5):uni.compressImage({
src, <!--图片路径，图片的路径，可以是相对路径、临时文件路径、存储文件路径-->
quality,<!--压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效-->
success,<!--接口调用成功的回调函数-->
fail,<!--接口调用失败的回调函数-->
})
(6):wx.chooseMessageFile(OBJECT)
---从客户端会话选择文件。---
7,uni-app中的文件
(1):uni.saveFile({
tempFilePath, <!--需要保存的文件的临时路径-->
success,<!--返回文件的保存路径，res = {savedFilePath: '文件的保存路径'}-->
fail,<!--接口调用失败的回调函数-->
complete<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---保存文件到本地。(不支持H5)---
(2):uni.getSavedFileList({
success,<!--接口调用成功的回调函数-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---获取本地已保存的文件列表。 ---
(3):uni.getSavedFileInfo({
filePath, <!--文件路径-->
success,<!--接口调用成功的回调函数，返回结果见 success 返回参数说明-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---获取本地文件的文件信息。此接口只能用于获取已保存到本地的文件。---
(4):uni.removeSavedFile({
filePath, <!--文件路径-->
success,<!--接口调用成功的回调函数，返回结果见 success 返回参数说明-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---删除本地存储的文件。---
(5):uni.getFileInfo({
filePath,<!--文件路径-->
digestAlgorithm,<!--计算文件摘要的算法，可取值 md5、sha1。-->
success,<!--接口调用成功的回调函数-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---获取文件信息---
(6):uni.openDocument({
filePath,<!--文件路径-->
fileType,<!--文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx-->
success,<!--接口调用成功的回调函数-->
fail,<!--接口调用失败的回调函数-->
complete,<!--接口调用结束的回调函数（调用成功、失败都会执行）-->
})
---新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。(不支持H5)---
(7):uni.getFileSystemManager()
---获取全局唯一的文件管理器(仅支持微信小程序)---
扫一扫
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
