uni app 学习【陆续更新】
文件打包不应大于2M 若过大应分包
--使用HbuliderX 创建项目
新建项目 选择uni-app 默认模板 选择路径 输入项目名 / hello uni-app 更适合开发
--项目基本构成
components: 组件
pages: 页面文件夹
static: 静态资源文件夹 存放图片、视频等 ※必须存放于此文件夹
App.vue: 配置全局的生命周期 和全局的样式
main.js: 入口文件
manifest.json: 项目配置文件
pages.json: 配置页面的路由关系、导航栏、选项卡等。 pages内第一项为启动页 （类似小程序）
--接口部分 后续学习。
--页面样式与布局
尺寸单位： upx
px与upx的转换公式 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx
换言之 750 * 元素在设计稿中的宽度 / 设计稿基准宽度（这不类似小程序rpx吗）
upx不支持动态传参 还是使用rpx多
使用@import导入外联样式 相对路径
不能使用*选择器 page 相当于body节点
字体文件小于 40kb 自动转换为 base64格式
大于等于 40kb 则需要开发者转换 否则使用将不生效
字体文件的引用路径推荐使用 -@开头的绝对路径
--全局配置和页面配置
通过pages来配置页面 就类似VUE router
配置tabBar （只写了部分功能）
color 默认颜色
selectedColor 选中时颜色
backgrooundColor 背景色
borderStyle 上边框颜色 可选值 black/white
list 列表 最多5项 最少两项
position 位置 可选值 top/bottom top只有微信小程序支持 并且不显示图片
fontSize 文字默认大小
height 默认高度
配置condition 配置启动模式
--组件
视图容器
--view 类似 div标签
hover-class 按下去的样式类
hover-stop-propagation 是否冒泡
hover-start-time 按下后多久出现样式类 单位毫秒
hover-stay-time 手指松开后点击样式保持事件 单位毫秒
--scroll-view 可滚动视图容器
--swiper 滑块视图容器,比如用于轮播图banner
--match-media 屏幕动态适配组件,比如窄屏上不显示i某些内容
--movable-area 可拖动区域
--moveable-view 可移动的试图容器,在页面中可以拖拽滑动或双指缩放. movable-view必须在movable-area组件中
--cover-view 可覆盖在原生组件上的文本组件
--cover-image 可覆盖在原生组件上的图片组件
基础内容
--icon 类似图标
--text 类似 span标签
selectable 文本是否可选 APP、H5
user-select 文本是否可选 微信端
space 显示空格
--rich-text 富文本
一般就是请求后返回富文本类型 直接渲染 后续学习
--progress 进度条
表单组件
--button 按钮组件
size 大小
type 样式类型
plain 是否镂空 背景色透明
disabled 是否禁用
form-type 用于form组件 会触发 submit / reset 事件
open-type 开放能力
--checkbox 多项选择器
--editor 富文本输入框
--form 表单
--input 输入框
--label 标签
--picker 弹出式列表选择
·表单组件
H5的 select 标签用 picker 组件进行代替
表单元素 radio 用 radio-group 组件代替
--picker-view 窗体内嵌式列表选择器
--radio 单项选择器
--slider 滑动选择器
--textarea 多行文本输入框
路由与页面跳转
--navigator 页面链接 类似a标签
媒体组件
--audio 音频
--camera 相机
--image 图片
src 资源地址
mode 图片裁剪、缩放模式
--video 视频
--live-player 直播播放
--live-pusher 实时音视频录制,也称直播推流
地图
--map 地图
画布
--canvas 画布
webview
--web-view web浏览器组件
广告
--ad 广告组件
--ad-draw 沉浸视频流广告组件
--Scss & Iconfont使用
--Iconfont
下载后将字体文件提出 放入iconfont 文件夹 在App.vue 或者某个页面 @import 引入
将.CSS 文件的地址改成 ~@/ 后面相对地址 剩下就是正常使用
--Scss
需要插件里下载才能使用
按照要求下载即可
--数据的绑定 同VUE
{{}} 内部支持字符串拼接 运算 三元运算符
v-bind、v-for 都同VUE
注册事件传递参数 都同VUE 也有用e的情况
--生命周期
--应用的生命周期
onLaunch 初始化完成时触发 只会触发一次
onShow 页面启动 / 页面后台切前台时触发
onHide 页面前台切后台时触发
onError 页面错误时触发
--页面的生命周期
onLoad 监听页面加载，七参数为上个页面传递的参数，参数类型为Object（用于页面传参）
onShow 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
--组件的生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdat
updated
beforeDestory
destoryed
--数据缓存
Sync同步方法 不带是异步方法
uni.setStorage
key 键名
data 键值
success 接口调用成功后的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（成功失败都执行） .then .catch .finally
uni.setStorageSync
('key',value) 这种方式就类似与localstorage.setItem（）
uni.getStorage
key 键名
success 接口调用成功后的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（成功失败都执行） .then .catch .finally
uni.getStorageSync
('key') 这种方式就类似与localstorage.getItem（）
uni.removeStorage
key 键名
success 接口调用成功后的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（成功失败都执行） .then .catch .finally
uni.removeStorageSync
('key') 这种方式就类似与localstorage.removeItem（）
uni.clearStorage 清除所有缓存数据 一般不用
uni.clearStorageSync
--上传图片
uni.chooseImage （图片选择）
count 选择的最大值 H5端无效
sizeType 压缩图或者原图
sourceType album从相册 camera从相机
success 成功则返回本地文件路径列表 tempFilePaths 必填项
fail 接口调用失败时回调
complete 接口调用结束回调
uni.previewImage（图片预览）
current 当前看的图片
urls 需要预览的图片链接列表 必填项
indicator 图片指示器样式 default 底部圆点指示 number 顶部数字指示器 none 不显示指示器
loop 是否循环
longPressActions 长按图片显示操作菜单，如不填默认为保存相册
success 成功则返回本地文件路径列表 tempFilePaths
fail 接口调用失败时回调
complete 接口调用结束回调
--导航的跳转和传参 navigator
类似a标签 只能跳转本地页面 且必须在pages.json中注册
url 应用内的跳转链接
open-type 跳转方式
delta 当open-type为 'navigateBack'时有效 表示回退的层数
animation-type 当open-type 为 navigate navigateBack 时有效 窗口显示/关闭动画的持续时间
hover-class 指定点击时的样式类 当hover-class=“none”时 没有点击态效果
hover-stop-propagation 指定是否阻止节点的祖先节点出现点击态 ？防止冒泡 应该是
--事件映射表
--API部分
应用级事件
uni.onPageNotFound 监听应用要打开的页面不存在事件
uni.onError 监听小程序错误事件
uni.onAppShow 监听应用切前台事件
uni.onAppHide 监听应用切后台事件
uni.offPageNotFound 取消监听应用要打开的页面不存在事件
uni.offError 取消监听应用错误事件
uni.offAppShow 取消监听小程序切前台事件
uni.offAppHide 取消监听小程序切后台事件
上传、下载
uni.uploadFile 上传 发起 POST 请求
uni.downloadFile 下载
获取地址
uni.getLocation 获取当前的地理位置.速度
uni.chooseLocation 打开地图选择位置
查看位置
uni.openLocation 使用应用内置地图查看位置
地图组件控制
uni.createMapContext 创建并返回map上下文 mapcontext 对象. 在自定义组件下, 第二个参数传入组件实例this,以操作组件内 <map> 组件
---- mapContext 通过 mapId 跟一个 <map> 组件绑定，通过它可以操作对应的 <map> 组件。 ---- 感觉类似 canvas 还没用过
图片
uni.chooseImage 从本地相册选择图片或使用相机拍照
uni.previewImage 预览图片
uni.getImageInof 获取图片信息
uni.saveImageToPhotoAlbum 保存图片到系统相册
uni.compressImage 压缩图片接口,可选压缩质量
文件
uni.chooseFile 从本地选择文件(主要用于选择非媒体文件,如果选择的文件是媒体文件,另有三个专用API)
wx.chooseMessageFile 从微信会话中选择文件
交互反馈
uni.showToast 显示消息提示框
uni.hideToast 隐藏消息提示框
uni.showLoading 显示loading提示框
uni.hideLoading 隐藏loading提示框
uni.showModal 显示模态弹窗
uni.showActionSheet 从底部向上弹出的操作菜单
拨打电话
uni.makePhoneCall 拨打电话
扫码
uni.scanCode 调起客户端扫码界面 扫码成功后返回对应的结果
剪切板
uni.setClipBoardData 设置系统剪贴板的内容
用户截屏事件
uni.onUserCaptureScreen 监听截屏事件 (各种小程序可以)
键盘
uni.hideKeyboard 隐藏软键盘
uni.onKeyboardHeightChange 监听键盘高度变化事件
uni.offKeyboardHeightChange 取消监听键盘高度变化事件
