- 属性:https://uniapp.dcloud.net.cn/component/view.html#view
- hover-class 指定按下去的样式类
- hover-start-time 点击后手指松开 多久出现样式，单位毫秒 默认 50
- hover-stay-time 点击后手指松开 样式保留的时间，单位毫秒 默认 400
// animate__animated 为动画
<view class="animate__animated view-box"
//view-box-bg 和 animate__jackInTheBox都是 点击后 动画效果（点击后添加的样式）
hover-class="view-box-bg animate__jackInTheBox"
hover-stay-time="8000"
hover-start-time="2000">
An animated element
</view>
// style 样式
.view-box{
width: 300rpx;
height: 300rpx;
background-color: lightcoral;
}
.view-box-bg{
background-color: #008c8c;
}- 属性：https://uniapp.dcloud.net.cn/component/text.html
- selectable 文本是否可选 默认为false 布尔类型 (:selectable="true") App、H5、快手小程序
- user-select 文本是否可选 默认为false 布尔类型 (:selectable="true") 微信小程序
- space 显示连续空格
- ensp 中文字符空格一半大小
- emsp 中文字符空格大小
- nbsp 根据字体设置的空格大小
- ensp 中文字符空格一半大小
- 组件内只支持嵌套 ，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。
- 除了文本节点以外的其他节点都无法长按选中
- 支持 \n 方式换行
- 如果使用 组件编译时会被转换为
- onLaunch uniapp初始化完成时触发 全局只触发一次
- onShow uniapp启动 或从后台进入前台时触发
- onHide uniapp从前台进入后台 触发
- onError uniapp报错时触发
- 执行顺序 onLaunch > onShow > onHide |onError
- onLoad 页面加载时触发 只触发一次
- onShow 页面显示时触发 可触发多次
- onReady 页面初次渲染完成时触发 只触发一次
- onHide 页面隐藏时触发 可触发多次
- onUnload 页面卸载时触发
- 执行顺序 onLoad > onShow > onReady > onHide >
- 1.给全局设置 下拉 在pages.json
"globalStyle": {"enablePullDownRefresh": true, },（所有页面都可以下拉） - 2.给单个页面设置 先把全局关闭
"style":{"enablePullDownRefresh": true, }（只有设置的页面才可以下拉） - 当前页面配置了下拉页面
- 通过
uni.startPullDownRefresh({})调用下拉
- 通过
- onPullDownRefresh 监听下拉函数 与onLoad等生命周期同级
- uni.stopPullDownRefresh() 停止当前页面下拉刷新
methods: {
abc() {
console.log(1);
uni.startPullDownRefresh();
}
},
onPullDownRefresh() {
console.log(2);
setTimeout(()=>{
uni.stopPullDownRefresh()
},1000)
}- 1.在pages.json中给当前页面设置 "onReachBottomDistance": 200 （200 表示 页面上拉 触底事件触发时页面底部距离）
- 2.onReachBottom(){console.log('触底触发了');} 直接使用 该api
- 缓存数据
- uni.setStorage({}) 同步 缓存数据 必填（ key值 和 data 值）
- 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
- success 接口调用成功的回调函数
- fail 接口调用失败的回调函数
- complete 接口调用结束的回调函数（调用成功、失败都会执行）
- demo
uni.setStorage({ key:'xxx', data:'xxx' })
- uni.setStorageSync(KEY,DATA) 异步 缓存数据 必填（ key值 和 data 值）（同，同步使用相同的key会覆盖原来的key）
- 语法
uni.setStorageSync(KEY,DATA)
- 语法
- uni.setStorage({}) 同步 缓存数据 必填（ key值 和 data 值）
- 获取缓存数据
- uni.getStorage（{}）异步 获取缓存数据
- uni.getStorageSync('key') 同步 获取缓存数据
- 删除 指定缓存数据 需要指定key 或key和值
- uni.removeStorage({}) 异步 删除 指定缓存数据
- uni.removeStorageSync('key') 同步 删除 指定缓存数据
- 清除所有缓存数据
- uni.clearStorage() 异步 清除所有缓存数据
- uni.clearStorageSync() 同步 清除所有缓存数据
- 在uni中可以调用uni.request方法进行请求网络请求
- 需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单 或微信小程序中 详情>本地设置 >不校验域名 勾上
- demo
<template> <view> <button @click="sendGet">发送请求</button> </view> </template> <script> export default { methods: { sendGet () { uni.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata', success(res) { console.log(res) } }) } } } </script>
- uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照
- demo
<button @click="uploadImg">点击上传图片</button> uploadImg(){ uni.chooseImage({ count:3,//最多可以选择的图片张数，默认9 success:(res)=> { //必填 成功则返回图片的本地文件路径列表 tempFilePaths console.log(res); // 获取到临时文件路径 this.imgArr=res.tempFilePaths } }) }
- demo
- 预览图片
- demo
//将获取到的图片遍历显示出来后进行点击的时 触发该事件 <view> <image v-for="item in imgArr" :src="item" @click="previewImage(item)" ></image> </view> previewImage(current){ console.log(current); uni.previewImage({ current, //当前点击的图片路径 urls:this.imgArr, //所有图片的路径 indicator:"default",//图片指示器样式，可取值："default" - 底部圆点指示器 （app上才有效果） loop:true,//是否可循环预览，默认值为 false （app上才有效果） }) }
- demo
- 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台
- 语法：以 #ifdef
加平台标识开头，以 #endif 结尾 - 除了支持单个平台的条件编译外，还支持多平台同时编译，使用 || 来分隔平台名称
- demo
//结构上 <template> <view> <!-- #ifdef H5--> 只到H5 端展示的文字 <!-- #endif --> <!-- #ifdef MP-WEIXIN --> 只到微信 端展示的文字 <!-- #endif --> </view> </template> // 处理上 onLoad() { // #ifdef H5 console.log('只到H5 端输出的文字'); // #endif // #ifdef MP-WEIXIN console.log('只到微信 端输出的文字'); // #endif }, // 样式上 <style> .textClor{ /* #ifdef H5 */ color: lightcoral; /* #endif */ /* #ifdef MP-WEIXIN */ color: lightblue; /* #endif */ } </style> // 会在 App 和 H5 平台上出现 // #ifdef H5 || APP-PLUS console.log('App 和 H5 端输出的文字'); // #endif
-
声明式导航 https://uniapp.dcloud.net.cn/component/navigator.html#
<navigator url="跳转路径">跳转到xxx页面</navigator>open-type="navigate" 默认- open-type="" 跳转方式
- navigate 保留前面的页面 进行跳转 可以回到上一页 不能跳转到 tabbar页面
- switchTab 可以跳转到 tabbar页面
- 传参 url=
xxx?id=1&age=18- 接收：onLoad页面加载时生命周期进行获取
onLoad(options){console.log(options)}
- 接收：onLoad页面加载时生命周期进行获取
-
编程式导航跳转 https://uniapp.dcloud.net.cn/api/router.html#
- navigateTo 保留当前页面，跳转到应用内的某个页面
- redirectTo 关闭当前页面，跳转到应用内的某个页面
- reLaunch 关闭所有页面，打开到应用内的某个页面
- switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- 传参
uni.navigateTo({url: 'test?id=1&name=uniapp'});
-
demo
<template> <view> <view>声明式导航</view> <!-- 保留前面的页面 进行跳转 可以回到上一页 --> <navigator url="/pages/test3/test3?id=1&age=18">跳转到test3 页面</navigator> <!-- open-type 跳转方式 当 需要跳转到 navBar 页面时候 需要设置跳转方式--> <navigator url="/pages/info/info" open-type="switchTab">跳转到info页面</navigator> <navigator url="/pages/info/info" open-type="redirect">跳转到info页面</navigator> <view>编程式导航</view> <button @click="navigateTo">保留当前页面，跳转到应用内的某个页面</button> <button @click="redirectTo">关闭当前页面，跳转到应用内的某个页面</button> <button @click="reLaunch">关闭所有页面，打开到应用内的某个页面</button> <button @click="switchTab">跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</button> </view> </template> <script> export default{ onUnload() { console.log('页面卸载了'); }, methods:{ // 保留当前页面，跳转到应用内的某个页面 navigateTo(){ uni.navigateTo({ url:'/pages/test3/test3?id=2&age=19"' }) }, // 关闭当前页面，跳转到应用内的某个页面 redirectTo(){ uni.redirectTo({ url:'/pages/test3/test3' }) }, // 关闭所有页面，打开到应用内的某个页面。 reLaunch(){ uni.reLaunch({ url:'/pages/info/info' }) }, // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 switchTab(){ uni.switchTab({ url:'/pages/info/info' }) }, } } </script>
-
- 引入组件
import abc from '../../components/abc.vue'
- 引入组件
-
- 注册组件
components:{user:abc}
- 注册组件
-
- 使用组件
- demo
//父组件 <template> <view> <test :msg="msg"></test> //子组件 </view> </template> <script> //引入子组件 import test from "@/components/test/test.vue" export default { data () { return { msg: 'hello' } }, components: {test} } </script> //子组件 <template> <view> 这是一个自定义组件 {{msg}} </view> </template> <script> export default { props: ['msg'] //接收父组件传过来的值 } </script>
- 通过$emit触发事件进行传递参数
- uni.$emit 触发全局的自定义事件 参数都会传给监听器回调
- demo
<template> <view> // @myNum='getNum' <!-- 第一步 --> <test5 @myNum='getNum'></test5> <view>子传父数据 {{num}}</view> </view> </template> <script> //引入子组件 import test from "@/components/test/test.vue" export default { data () { return { num: 0, } }, components: {test}, getNum(num){ this.num=num } } </script> // 子组件 <template> <view> <!-- 第二步 --> <button @click="sonToParent">子传父</button> </view> </template> <script> export default { name:"test", data() { return { num:10, }; }, methods:{ <!-- 第三步 --> // 子传父事件 sonToParent(){ console.log(1); // myNum 为触发的自定义事件 this.num为传递的值 this.$emit('myNum',this.num) } } } </script>
- uni.$emit
- uni.$on
- index 组件
<template> <view > <test6a></test6a> <test6b></test6b> </view> </template> <script> import test6a from "../../components/test6a.vue" import test6b from "../../components/test6b.vue" export default{ components:{ test6a, test6b, } } </script>
- 同级组件a
<template> <view> <button type="default" @click="upNum">a组件 点击修改b组件num值</button> </view> </template> <script> export default { name:"test6a", methods: { upNum(){ // 触发全局的自定义事件 参数都会传给监听器回调 uni.$emit('updateNum','100') } }, } </script>
- 同级组件b
<template> <view> b组件数据：{{num}} </view> </template> <script> export default { name:"test6b", data() { return { num:0 }; }, created(){ // 监听全局的自定义事件 事件可以由 uni$.emit 触发 // 回调函数会接收说有传入事件触发函数的额外参数 uni.$on('updateNum',num =>{ this.num=num }) } } </script>
- uniapp 中引入 字体图标 字体文件 尽量使用 绝对路径 @/XXX, 使用相对路径会找不到该文件
- 获取事件对象 情况1没有传递参数 事件中直接 abc(e){}获取 情况2 传递了参数 @click=abc(1,$even) abc(v,e){}
- rpx 既响应式 px 一种根据屏幕宽度自适应的动态单位。以750的屏幕为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大
- Uniapp云打包
- Uniapp云打包是指在云端通过手机端或网页端操作将应用程序打包成完整的安装包。这需要开发人员提供原生平台的证书、APP图标、APP名称等信息，然后上传到云端进行自动打包。在打包的过程中，开发人员可以选择安卓或iOS平台，并设置应用程序的登录、分享等基本功能。整个过程非常方便，只需要几分钟即可完成打包。
- 云打包的优点在于无需购买开发者账号，省去了比较繁琐的证书配置和环境搭建，只需要上传应用信息就可以进行打包。同时，云打包还可以提供一些基本的应用内服务，比如IP限制、版本管理等功能。
- Uniapp离线打包
- Uniapp离线打包是指通过本地开发环境来打包应用程序。在离线打包的过程中，开发者需要下载安装需要的工具和环境，并进行相应的配置。打包完成后，开发者还需要手动将应用程序提交到应用市场进行审核和发布。
- 与云打包相比，离线打包需要耗费更多的时间和精力，但是在打包的过程中，开发者可以更加精细地控制应用程序的设置和配置。通过本地打包，开发者可以对应用程序进行更加全面的定制。
- Uniapp离线打包是指通过本地开发环境来打包应用程序。在离线打包的过程中，开发者需要下载安装需要的工具和环境，并进行相应的配置。打包完成后，开发者还需要手动将应用程序提交到应用市场进行审核和发布。
- 区别总结
- 从操作难易程度上来说，云打包相对于离线打包更为快捷方便。但是在一些特殊要求的应用中，离线打包显得更加符合需求。比如指定应用名称和包名，添加第三方库等。
- 在控制程度上，云打包具有一定的局限性，无法做到离线打包的操作多样性。而离线打包将有更多的自由控制权。
- 不同的打包方式，各有各的优缺点。开发者可以根据自身需求来选择合适的打包方式。但不管选择哪种方式，Uniapp都可以帮助开发者快速、简单地完成应用程序的打包部署。
<map style="width: 100%; height: 240px;" :latitude="params.lat" :longitude="params.lon" :markers="covers"
@markertap="markertap" @regionchange="regionchange" @tap="updateLocation"/>- :longitude精度 :latitude纬度
- :markers 设置标点 需要唯一字段id，且为number类型，位数也有限制超过后会丢失精度导致定位标点不准确
- @markertap 点击标点时 返回当前标点的数据，一般拿marker.markerId
const covers = reactive([ { id: 1, iconPath: '/static/image/map-store-red.png', latitude: 0, longitude: 0, width: 24, height: 32 }, { id: 2, iconPath: '/static/image/map-owner-blue.png', latitude: 0, longitude: 0, width: 24, height: 32, } ])
- @regionchange 当地图进行上下左右移动时触发，返回当前地图的中心定位点数据，（新定位经纬度）
const regionchange = (e) => { //在安卓中是 end 事件 if (e.type === 'end') { console.log(e) } }
- @tap 点击地图时返回当前被点击点的数据 （新定位经纬度）