ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

uni-app常用总结

2021-01-10 22:30:48  阅读：376  来源： 互联网

标签：总结 console log color app c% uni data red


动态绑定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.普通跳转
<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)
 },

 onl oad() {
 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 => onl oad => 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页面各种监听事件

属性类型默认值必填说明
dataObject页面的初始数据
optionsObject页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1
onLoadfunction生命周期回调—监听页面加载
onShowfunction生命周期回调—监听页面显示
onReadyfunction生命周期回调—监听页面初次渲染完成
onHidefunction生命周期回调—监听页面隐藏
onUnloadfunction生命周期回调—监听页面卸载
onPullDownRefreshfunction监听用户下拉动作
onReachBottomfunction页面上拉触底事件的处理函数
onShareAppMessagefunction用户点击右上角转发
onShareTimelinefunction用户点击右上角转发到朋友圈
onAddToFavoritesfunction用户点击右上角收藏
onPageScrollfunction页面滚动触发事件的处理函数
onResizefunction页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTapfunction当前是 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

标签：总结,console,log,color,app,c%,uni,data,red
来源： https://blog.csdn.net/qq_38722651/article/details/112447948

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有