uniapp学习笔记
- 项目结构
- 组件
- uni-app中的样式
- rpx: 响应式px
- @import:导入外联样式表
- 注意：在uni-app中不能使用*选择器
- \标签相当于\
- 全局样式、局部样式
- uni-app中如何使用字体图标
- uni-app中使用sass,less
- 基础的数据绑定--延用vue
- 如何注册事件和传递参数及获取事件对象
- uni的生命周期函数
- 应用的生命周期
- 页面的生命周期
- 触发下拉刷新的两种方法
- 数据缓存
- 异步操作
- 同步操作
- 上传图片、预览图片
- 上传图片
- 预览图片
- 跨端兼容
- 条件编译
- 平台标识
- uni中的导航跳转
- 利用navigator进行跳转
- 利用编程式导航进行跳转
- 导航跳转传递参数
项目结构
——pages ---- 存放页面
——static ---- 存放静态资源
——unpackage ---- 存放最终打包输出的文件
——dist
——App.vue ---- 项目的根组件（页面的入口文件） 所有页面都是在App.vue下进行切换的，可以调用应用的生命周期函数
main.js ---- 项目的入口文件 ，主要作用：初始化vue实例并使用需要的插件
manifest.json ---- 配置应用的打包的文件
pages.json ---- 配置页面的存放路径以及项目的窗口外观
uni.scss ---- 常用的样式变量声明组件
- text
属性：
1. selectable :文字可以被选中 true
2. space = "ensp" //中文字符空格一半大小
space="emsp" //中文字符空格大小
space= "nbsp" // 根据字体设置的空格大小
3. decode 解析特殊字符 ： <&等，默认可以解析<text selectable space="nbsp">跳舞 rap 篮球</text>
- view
属性：
1.hover-class: 指定按下去的样式类
2.hover-stop-propagation: 阻止冒泡
3.:hover-start-time: 按住后多久开始显示效果
4.:hover-stay-time:手指离开元素后效果延迟多久隐藏<view class="box1" hover-class="hover_box1" :hover-start-time="2000" >
<view class="box2" hover-class="hover_box2" hover-stop-propagation :hover-stay-time="3000">
我是个盒子
</view>
</view>.box1{
background-color: #007AFF;
width: 300rpx;
height: 300rpx;
}
.box2{
background-color: #4CD964;
width: 100rpx;
height: 100rpx;
}
.hover_box1{
background-color: #2C405A;
}
.hover_box2{
background-color: #808080;
}
- button
属性：
1. size: 尺寸--- mini
2. type: 按钮类型--- primary
3. loading :将在按钮内部显示加载状态
4. plain : 按钮是否镂空
5. disable: 按钮是否禁用
- image
属性：
1.src: 图片资源路径
2. mode: 图片裁剪、缩放的模式
常用：aspectFit 、 aspectFilluni-app中的样式
rpx: 响应式px
根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。
@import:导入外联样式表
<style>
@import url("css文件路径");
</style>注意：在uni-app中不能使用*选择器
<page>标签相当于<body>
全局样式、局部样式
定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式。
uni-app中如何使用字体图标
使用方式于普通web项目相同，需要注意几点：
1. 字体文件小于40kb，uni-app会自动将其转化为base64格式
2. 字体文件>= 40kb,需要开发者自己转化，否则将不生效
3. 字体文件的引用路径推荐使用以~@开头的绝对路径@font-face {
font-family: test1-icon;
src:url(’~@/static.iconfont.ttf’);
}
uni-app中使用sass,less
安装插件，引入sass
<style lang="scss"></style>基础的数据绑定–延用vue
如何注册事件和传递参数及获取事件对象
同时传递参数以及获取事件对象，需要$event
不传递参数，则方法的形参event中可以获取到事件对象
uni的生命周期函数
应用的生命周期
应用的生命周期函数定义在App.vue中
onLaunch: 应用启动的时候触发，整个生命周期只触发一次，除非再次刷新应用
onShow:应用显示到页面的时候触发
onHide: 应用隐藏的时候触发
onError: 应用出现异常时触发页面的生命周期
每个页面都有自己的生命周期
onLoad: 页面加载，在整个生命周期中只加载一次
onShow: 页面显示，随着页面显示隐藏可以多次触发
onReady:页面渲染完成，在整个生命周期中只加载一次
onHide:页面隐藏，多次触发
onUnload: 监听页面卸载
onPullDownRefresh: 监听用户下拉// 下拉逻辑完成后停止当前页面的下拉操作：uni.stopPullDownRefresh()
onReachBottom: 监听触底注意： tabbar的页面展示过一次后就保留在内存中，再次切换tabbar页面，不会触发onLoad,onReady
触发下拉刷新的两种方法
1. 在pages.json文件中进行配置
2. 通过uni.startPullDownRefresh()触发监听1
2
数据缓存
uni.setStorage //异步接口
uni.setStorageSync // 同步接口异步操作
同步操作
上传图片、预览图片
上传图片
uni.chooseImage()
属性：
count : 最多可以选择的图片张数，默认9
sizeType: "original" , "compressed"（原图，压缩图，默认都有）
sourceType: "album","camera" (从相册选图，使用相机，默认都有)
success: 成功则返回图片本地文件路径列表
fail: 接口调用失败
complete: 接口调用结束的回调函数
预览图片
uni.perviewImage()
属性： current:当前显示图片的链接
urls: 需要预览的图片链接列表[]
loop: 是否可循环
success
fail
complete
跨端兼容
条件编译
用特殊的注释作为标记，在编译时根据这些特殊注释，将注释里面的代码编译到不同平台
写法：以 #ifdef 加平台标识开头，以 #endif 结尾
平台标识
值 | 平台 |
APP-PLUS | 5+APP |
H5 | H5 |
MP-WEXXIN | 微信小程序 |
MP-ALIPAY | 支付宝小程序 |
MP | 各类小程序 |
uni中的导航跳转
利用navigator进行跳转
open-type:跳转方式
open-type="redirect",将会把上一个页面关闭，并跳转至指定页面，之后将不可通过返回按钮进行返回
open-type="switchTab", 跳转tabbar页面，必须设置switchTab
利用编程式导航进行跳转
导航跳转传递参数
在onLoad(option){}方法中，通过获取参数option,获得导航跳转传递过来的参数
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
