uni-app常用总结

动态绑定class对象方法

1. 简单对象的绑定

:class="{'active':isActive}"
active:class名(可以不加单引号)
isActive:判断条件

2. 绑定并判断多个

1：使用逗号隔开
:class="{'active':isActive},'sort':isSort}"
​
2：放入data里面
:class="className"
data() {
 return {
 className:{ active: true, sort:false }
 }
}
​
3：使用computed属性
:class="classObject"
data() {
 return {
 isActive: true,
 isSort: false
 }
},
computed: {
 classObject: function () {
 return {
 active: this.isActive,
 sort:this.isSort
 }
 }
}

3. 使用数组的方式

1.使用单纯的数组
:class="[isActive,isSort]"
data() {
 return{
 isActive:'active',
 isSort:'sort'
 }
}
​
2.使用三元运算符
:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"
​
3.数组对象结合动态判断
//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive==1 }, 'sort']"
或者
:class="[{ active: isActive==index }, 'sort']"
通过’isActive‘判断’active‘的class对象是否和‘sort’结合

4.判断值空的方式

通过创建函数方式判断
isNotEmpty(value){
 return value != undefined && value.length > 0;
 }

页面跳转

1.通过进行跳转

1.普通跳转

2.携带参数跳转

2.通过uni.navigateTo({})进行跳转

uni.navigateTo({
 url: `/pages/findHotelList/index?latitude=${res.latitude}&longitude=${res.longitude}&addressName=${res.name}`,
 });

3.通过uni.switchTab进行跳转

当页面路径写在tabBar中时，时无法通过navigator进行跳转的，如：

"tabBar":{ 
 "list":[
 {
 "pagePath": "pages/home/index",
 "text": "首页",
 "iconPath": "./static/icon/home-before.png",
 "selectedIconPath": "./static/icon/home-active.png"
 }
 ]
 },
​
使用：
uni.switchTab({
 url: "/pages/home/index"
 });

4.跳转页面后，获取参数

uni.navigateTo({
 url: `/pages/findHotelList/index?latitude=${res.latitude}&longitude=${res.longitude}`,
 });
​
在/pages/findHotelList/index页面中通过onLoad()函数获取：
onLoad(options) {
 this.latitude = options.latitude;
 this.longitude = options.longitude;
 }

子父组件的引用

1. 子组件的基本使用

1.导入
import selectList from "@/components/selectList.vue";
2.组件注册
components: {
 selectList
 },
3.使用
 

2.父组件向自组件传递信息

父组件：

子组件：

props: {
 //接收父组件传递的index,views的值
 index: Number,
 views: Number
 }

3.子组件向父组件传递信息

子组件：

​

父组件：

​

uniapp的生命周期

1.页面生命周期执行顺序

​

​

Snipaste_2021-01-10_20-28-13.png

点击之后：

Snipaste_2021-01-10_20-28-57.png

Page页面生命周期函数执行顺序

beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted

刷新数据后

beforeUpdate => updated

2.应用执行生命周期

函数	说明
onLaunch	当uni-app出初始化完成时触发，全局只执行一次
onShow	当uni-app七点，或从后台进入前台显示
onHide	当uni-app从前台进入后台
onError	当uni-app报错时触发

例子(使用百度地图api全局i缓存当前地区信息)：
在App.vue中加入

 export default {
 onLaunch: function() {
 console.log('App Launch')
 console.log(this.$u.config.v);
 //获取当前地理经纬度并发送请求返回当前地区信息,设置全局缓存
 uni.getLocation({ //uniapp获取本地经纬度函数
 type: "gcj02",
 success: (res) => {
 uni
 .request({
 url: `http://api.map.baidu.com/reverse_geocoding/v3/?ak=
百度的ak&output=json&coordtype=wgs84ll&location=${res.latitude},${res.longitude}`,
 method: "GET", //get、post、delete
 })
 .then((result) => {
 //将数据全局缓存
 getApp().globalData.province =
 result[1].data.result.addressComponent.province;//省
 getApp().globalData.city = getApp().globalData.currentcity =
 result[1].data.result.addressComponent.city;//市
 getApp().globalData.distance =
 result[1].data.result.addressComponent.distance;//地区
 getApp().globalData.latitude = res.latitude;//纬度
 getApp().globalData.longitude = res.longitude;//经度
 console.log(result);
 });
 },
 });
 },
 onShow: function() {
 console.log('App Show')
 },
 onHide: function() {
 console.log('App Hide')
 }
 }

全局缓存

1.普通版本

存入

getApp().globalData.name = "小晓" 

取出

let name = getApp().globalData.name //name=="小晓" 

2.使用解构

存入

getApp().globalData.test1 = "老狗"
getApp().globalData.test2 = "老猫"

取出 let {test1,test2} = getApp().globalData; console.log(test1); console.log(test2);

微信的监听事件

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

1. 通过touchstart和touchend可以判断用户触发的滑动方向

2. 通过tap可以判断用户是单击还是单击并滑动了

page页面各种监听事件

属性	类型	默认值	必填	说明
data	Object			页面的初始数据
options	Object			页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1
onLoad	function			生命周期回调—监听页面加载
onShow	function			生命周期回调—监听页面显示
onReady	function			生命周期回调—监听页面初次渲染完成
onHide	function			生命周期回调—监听页面隐藏
onUnload	function			生命周期回调—监听页面卸载
onPullDownRefresh	function			监听用户下拉动作
onReachBottom	function			页面上拉触底事件的处理函数
onShareAppMessage	function			用户点击右上角转发
onShareTimeline	function			用户点击右上角转发到朋友圈
onAddToFavorites	function			用户点击右上角收藏
onPageScroll	function			页面滚动触发事件的处理函数
onResize	function			页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function			当前是 tab 页时，点击 tab 时触发
其他	any			开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

详细查看：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline

onPageScroll可以用来判断页面顶部距离初始顶部距离长度

例子(通过获取滑动向下滑动高度动态改变图片透明度)：

 
 
​
 data() {
 return {
 opacityVal: 1
 };
 },
​
methods: {
 scrolltouchEvent(scrollTop) {
 // 373 图片高度
 let val = (373 - scrollTop) / 373;
 this.opacityVal = val;
 if (val < 0) this.title = true;
 else this.title = false;
 }
}

//滑动页面，改变图片透明度
onPageScroll(event) {
 this.scrolltouchEvent(event.scrollTop);
 }

数据叠加

 //数据叠加
this.imgList = [...this.imgList,...res.res.vertical];
this.imgList在原有的基础上，叠加了res.res.vertical中的数据

对于瀑布流加载下一页特别有用

日期格式化

查找moment框架组件

异步Promise及Async/Await

访问文章

https://segmentfault.com/a/1190000016788484

watch监听

在vue中，很多时候需要实时了解数据的变化执行相应的操作，通过watch监听能实现相应需求。

      
inputOne: 
      
inputTwo: 
    

1、注册watch

export default {
    name: 'demo',
    watch: {　　　　value1(newVlue, oldValue) {　　　　　　this.value = newValue + 'bbb'　　　　　　console.log(this.value）　　　　}　　},
    data() {
      return {　　　　　　value: 'aaa',
          value1：'',
          valueObj: {
             value2: '',
          }
      }
    }        
} 

在inputOne输入123后，监听到value1的改变，打印出value的值：123bbb

2、handler方法

watch中需要具体执行的方法，监听数组或对象的属性时用到的方法

    watch: {
　　　　value1：{
                handler（newVal，oldVal）{
                    this.value = newVal + 'ccc'
                },
                immediate:true
           }
    },    

3、immediate属性

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调，默认为false

4、deep属性

监听对象或对象中的属性，需要使用deep，即深度监听。

在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，当然这样也会损耗性能。

　　watch: {
　　　　valueObj：{
                handler（newVal，oldVal）{
                    this.value = newVal + ddd'
                },
                deep:true
           }
    },   或者：直接监听属性，避免给所有属性监听而损耗性能。
　　watch: {
　　　　'valueObj.value2'：{
                handler（newVal，oldVal）{
                    this.value = newVal + 'eee'
                },　　　　　　　　　　　immediate: true,　
                  deep:true
           }
    }, 

5、watch监听路由

watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示来自于哪个界面
      if(to.path=="/home"){
        console.log("路由跳转home");
      }
    }
  },

部分应用链接：
https://segmentfault.com/a/1190000016788484
https://www.cnblogs.com/liangpi/p/12205663.html