uni-app0.1
2020-03-16 14:46:51 2 举报AI智能生成
uni-app入门指导
作者其他创作
大纲/内容
入门指导uni-app
globalStyle全局外观配置
navigationBarBackgroundColor
导航栏背景颜色（默认白）
pages.json中属性，作用：用于设置应用的状态栏、导航条、标题、窗口背景色等
globalStyle属性
backgroundTextStyle
下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh
是否开启下拉刷新 Boolean类型
创建新页面和页面配置
新建页面需要到pages中注册否者页面无法显示
pages.json中属性，page作用：通过 pages 节点配置应用由哪些页面组成，接受数组类型
pages
属性path
配置页面路径
属性style
用于设置每个页面的状态栏、导航条、标题、窗口背景色等
共有样式推荐在全局外观中设置
常用属性backgroundColor
窗口的背景色
常用属性 backgroundTextStyle
下拉 loading 的样式，仅支持 dark/light（深色/浅色）
常用属性 navigationStyle
仅支持 default/custom。custom即取消默认的原生导航栏
取消默认导航
配置基本tabBar
tabBar属性
简单说就是封装好的tab切换，点击相应 tab 切换对应页
常用属性
selectedColor
tab 上的文字被选中时的颜色
backgroundColor
tab背景色
borderStyle
边框值 可选值 black/white
list
接收一个数组，数组中的每个项都是一个对象，每个对象对应一个页面
pagePath
页面路径
text
tab文字
iconPath
图片路径，需注意图片大小限制为40kb
selectedIconPath
选中时图片路径
常用组件
text属性详情
相当于html span标签
需注意的是text标签内只能镶嵌text标签，镶嵌其他标签无效
view
view详情
相当于html div标签
hover-class
指定按下去的样式类
button
button详情
size
按钮大小
loading
否带 loading 图标
form-type
用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
image
image详情
相当于img标签
mode
图片裁剪、缩放的模式
属性
aspectFit
保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
widthFix
宽度不变，高度自动变化，保持原图宽高比不变（常用）
基本数据绑定
详情
和vue相似 通过{{}}渲染
也能在{{}}运用三元表达式
也可以在{{}}进行基本运算
生命周期
生命周期详情
应用生命周期
onLaunch
当应用初始化完成时触发（全局只触发一次）
onShow
当应用启动，或从后台进入前台显示
onHide
当应用前台进入后台
页面生命周期
onLoad
监听页面加载，其参数为上个页面传递的数据
监听页面显示。页面每次出现在屏幕上都触发
onReady
监听页面初次渲染完成
监听页面隐藏
下拉刷新
下拉刷新详情
手动需在pages.json文件中设置下拉刷新
设置onPullDownRefresh
负责监听下拉刷新动作
可以在这里设置请求
uni.startPullDownRefresh
调用后触发下拉刷新动画，效果与用户手动下拉刷新一致
uni.stopPullDownRefresh
停止当前页面下拉刷新
上拉刷新
onReachBottom
页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动，则触底事件不会被触发
网络
网络请求详情
发起请求
uni.request
url
data
header
method
GET-POST-PUT-DELETE-CONNECT-HEAD等
dataType
如果设为 json，会尝试对返回的数据做一次 JSON.parse
success
成功回调
fail
失败回调
complete
无论成功或失败都会调用
上传和下载
uni.uploadFile
将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
uni.downloadFile
下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径
数据缓存
uni.setStorage
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口
key
本地缓存中的指定的 key
需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
uni.setStorageSync
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口
uni.getStorage
获取指定key内容
成功回调返回对应key内容
uni.getStorageSync
获取指定key内容（同步）
uni.removeStorage
移除指定key值内容
路由与页面跳转
uni.navigateTo
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
animationType
窗口显示的动画效果
animationDuration
窗口动画持续时间
uni.redirectTo
关闭当前页面跳转指定页面
uni.reLaunch
关闭所有页面打开指定页面
uni.switchTab
跳转tabBar页面，并关闭其他非tabBar页面
uni.navigateBack
关闭当前页面，返回上级或多级页面
delta
返回页面级数
窗口动画
组件之间通讯方式
与vue相似
父传子
引入子组件，并注册，在子组件标签上，绑定属性并传值，子组件用props接受使用
子传父
设置this.$emit(\"isName\
兄弟互传
vuex
全局变量
媒体
图片
uni.chooseImage
从本地相册选择图片或使用相机拍照
count
选取图片张数，默认9
sizeType
original 原图
compressed 压缩图
默认倆着都有
sourceType
album 从相册选图
camera 使用相机
tempFilePaths
图片的本地文件路径列表
tempFiles
图片的本地文件列表，每一项是一个 File 对象
path
本地文件路径
本地文件大小，单位：B
name
包含扩展名的文件名称，仅H5支持
uni.previewImage
预览图片
urls
需预览图片链接列表
longPressActions
长按图片显示操作菜单，如不填默认为保存相册
itemList
按钮的文字数组
itemColor
按钮的文字颜色，字符串格式，默认为\"#000000\"
index
用户长按图片的索引值
tapIndex
用户点击按钮列表的索引值
uni.saveImageToPhotosAlbum
保存图片到系统相册
filePath
图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
录音管理
子主题
位置
0 条评论
回复 删除
下一页
