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.通过<navigator url=""></navigator>进行跳转

1.普通跳转
<navigator url="/pages/map/index"></navigator>
2.携带参数跳转
<navigator :url="`/pages/home-album-info/index?id=${item.id}`"></navigator>

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.使用
<select-list> </select-list>

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

父组件：

<click-move-animation
 v-for="(item, index) in houses"
 :key="index"
 :index="index"
 :views="houses.length"
 >
</click-move-animation>

子组件：

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

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

子组件：

<template>
 <view style="height:100rpx,width:100rpx;background-color:red" @click="clickUp">哈哈哈</view>
</template>
​
<script>
export default {
data(){
 return{
 data:{
 data1:'hahaha',
 data2:'hehehe',
 data3:'xixixi'
 }
 }
},
methods:{
 clickUp(){
 this.$emit("transmit", this.data);
 }
}
}
</script>

父组件：

<template>
 <test @transmit="getSon"></test>//@transmit对应上面的transmit,将参数存放在getSon中
</template>
​
<script>
import test from '@/components/test'
export default {
components:{
 test
},
methods:{
 getSon(options){//options对于上面的date
 console.log(options.data1);
 console.log(options.data2);
 console.log(options.data3);
 }
 }
}
</script>

uniapp的生命周期

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

<template>
 <view ref="ref" class="test-container">
 <text>{{message}}</text>
 <button @click="addMsg">点击</button>
 </view>
</template>
​
<script>

 import {
 mapState,
 mapMutations
 } from 'vuex';
 var key = 0;
 export default {
​
 data() {
 return {
 message: 1
 }
 },
​
 computed: {

 },
​
 methods: {
​
 addMsg() {
 this.message++
 }
​
 },

 beforeCreate() {
 console.group('beforeCreate 组件创建之前状态===============》');
 console.log("%c%s", "color:red" , "el     : " + this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message)
 },

 onLoad() {
 console.group('onLoad 状态===============》');
 console.log("%c%s", "color:red" , "el     : " + this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message)
 },

 onShow() {
 console.group('onShow 状态===============》');
 console.log("%c%s", "color:red" , "el     : " + this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message)
 },

 onReady() {
 console.group('onReady 状态===============》');
 console.log("%c%s", "color:red" , "el     : " + this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message)
 },

 onUnload() {
 console.group('onUnload 状态===============》');
 console.log("%c%s", "color:red" , "el     : " + this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message)
 },

 created() {
 console.group('created 组件创建完毕状态===============》');
 console.log("%c%s", "color:red","el     : " + this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message);
 },

 beforeMount() {
 console.group('beforeMount 组件挂载之前状态===============》');
 console.log("%c%s", "color:red","el     : " + (this.$el));
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message);
 },

 mounted() {
 console.group('mounted 组件挂载完毕状态===============》');
 console.log("%c%s", "color:red","el     : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message);
 },

 beforeUpdate() {
 console.group('beforeUpdate 组件更新之前状态===============》');
 console.log("%c%s", "color:red","el     : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message);
 },

 updated() {
 console.group('updated 组件更新完毕状态===============》');
 console.log("%c%s", "color:red","el     : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message);
 },

 beforeDestroy() {
 console.group('beforeDestroy 组件销毁之前状态===============》');
 console.log("%c%s", "color:red","el     : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message);
 },

 destroyed() {
 console.group('destroyed 组件销毁完毕状态===============》');
 console.log("%c%s", "color:red","el     : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red","data   : " + this.$data);
 console.log("%c%s", "color:red","message: " + this.message)
 }

 }
</script>
​
<style lang="scss">
 .test-container {
 width: 100%;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 box-sizing: border-box;
 padding: 0upx 40upx;
 button {
 margin-top: 100upx;
 }
 }
</style>
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 = "老猫"</pre>

取出

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可以用来判断页面顶部距离初始顶部距离长度

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

<view>
 <cover-image
 src="https://ting-ke.oss-cn-shenzhen.aliyuncs.com/qiaoguoHotel/carousel/timg.jpg"
 :style="{ opacity: opacityVal }" //opacity是透明的，opacityVal透明度值，1全显示
 ></cover-image>
 </view>
​
 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中的数据</pre>

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

日期格式化

查找moment框架组件

异步Promise及Async/Await

访问文章

https://segmentfault.com/a/1190000016788484

watch监听

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

<div>
      <p>inputOne: <input type="text" v-model="value1"></p>
      <p>inputTwo: <input type="text" v-model="valueObj.value2"></p>
</div>

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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,491评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,856评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,745评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,196评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,073评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,112评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,531评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,215评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,485评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,215评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,583评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2赞 335

推荐阅读更多精彩内容

  • uni-app简介
    环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 条件注释跨端兼容 uni-app的事件 导...
    不是隔壁的老王啊阅读 2,552评论 0赞 0
  • uni-app 0基础学习
    1.uni-app是什么 官网链接：https://uniapp.dcloud.io/component/READ...
    青争小台阅读 1,696评论 0赞 1
  • uni入门文档
    uni-app的基本使用 课程介绍： 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    卤蛋两枚阅读 3,509评论 0赞 1
  • uni-app 入坑指南
    现在使用 uni-app 来开发的人越来越多。是不是许多同学，准备入坑 uni-app，却无从下手？文档内容太多，...
    程序员永不秃头阅读 53,334评论 21赞 34
  • UNIAPP入门教程
    uni-app的基本使用 课程介绍： 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    绿茵场上的码者阅读 41,853评论 1赞 21