uni-app DAY07

复习:

1、uni-app中常用组件

①内置组件:页面(page)、视图(view)、滚动视图(scroll-view)、文本(text)、富文本(rich-text)、图片(image)、输入框(input)、按钮(button)、导航器/超链接(navigator)、轮播(swiper)、拾取器/下拉菜单/选择器(picker)、单选按钮(radio-group/radio)、复选按钮(checkbox-group/checkbox)、视频(video)、地图(map)、摄像头(camera)
②扩展组件(ui-ui库):图标(uni-icons)、宫格(uni-grid)、卡片(uni-card)、导航条(uni-nav-bar)、日期格式化(uni-dateformat)、列表(uni-list/uni-list-item)、标题字(uni-title)、简单输入框(uni-easyinput)、弹出式对话框(uni-popup)
③自定义组件:卡片(zh-card)、导航条(zh-nav-bar)

2、uni-app中常用API

①五种页面跳转方法
②四种消息弹出框
③异步请求
④客户端存储的设置/读取/删除/清空
⑤获得全局App对象(App.vue): getApp( ) 项目中的功能类似于sessionStorage
⑥获得窗口/系统信息:
uni.getWindowInfo( ):同步执行,返回当前窗口的信息(屏幕尺寸、窗口尺寸、状态栏高度)——注意:大多数小程序都不支持
uni.getSystemInfo() / uni.getSystemInfoSync():异步或同步收集系统的各种信息(设备、操作系统、屏幕等各方面信息);此方法没有兼容性问题
⑦修改标题栏中的文本内容
uni.setNavigationBarTitle()

3、uni-app中的生命周期方法

第一组:整个应用级生命周期方法(App.vue):启动、显示、隐藏
第二组:页面级生命周期方法(pages):加载、显示、就绪、隐藏、卸载、滚动、滚动到底、下拉刷新
第三组:组件级生命周期方法(components):创建、挂载、更新、卸载

一、uni-app中的模板

1、view:最简单的容器组件,相当于HTML中的div
2、text:最简单的文本组件,相当于HTML中的span
3、image:用于展示图片的组件,类似于HTML中的img
①默认image的尺寸都是320*240
②默认情况下,修改图片的宽度,高度不会自动等比例缩放
③可以指定mode=“widthFix”,实现“宽度固定,高度自动等比例缩放”
4、input:单行文本输入域

<input  type="键盘类型" password="是否显示密码"/>

5、button:按钮
6、navigator:导航器、超链接,用于实现页面跳转

相对地址: <navigator url="../findpwd/findpwd">  不带.vue
绝对地址: <navigator url="/pages/findpwd/findpwd">  不带.vue

7、swiper:轮播广告
8、picker:数据拾取器,功能类似于HTML中的select/option
9、radio-group>radio:单选按钮组

模板中实现数据绑定:

①内容绑定:

  <text>{{表达式}}</text>

②属性绑定:

  <any v-bind:属性名="表达式"/>
  <any :属性名="表达式"/>

③样式绑定:

  <any :style="{color:表达式, backgroundColor: 表达式}"/>

④事件绑定:

  <any v-on:click="处理方法"/>
  <any @click="处理方法(实参列表)"/>

⑤双向数据绑定:

  <input v-model="模型变量名"/>

⑥条件渲染:

  <any v-if="表达式"/><any v-elseif="表达式"/><any else/>
  <any v-show="表达式"/>

⑦列表渲染:

  <any  v-for="(item, idx) in 数组"  :key="idx"/>

二、uni-app中的样式

1、uni-app支持的尺寸单位:em、vw/vh、%、px、rpx
2、多个页面或组件共享的样式变量编写在 uni.scss
3、多个页面或组件共享的样式编写在 App.vue

三、uni-app中的脚本

1、五种路由跳转方法
2、四种提示框
①吐司对话框 —— 用于简单的提醒,非重要事件的提示

uni.showToast( ) 
②模态对话框 —— 用于严重的提示,甚至必须作出选择的提示
uni.showModal( )
③加载中对话框 —— 提示操作正在进行中
uni.showLoading( ) / uni.hideLoading()
④动作清单对话框 —— 让用户选择要执行的动作
uni.showActionSheet( )

3、读写客户端数据存储

在客户端存储数据 —— 类似于localStorage.setItem(k, v):
		uni.setStorage( key,  value,  success(){ } )  —— 异步保存
		uni.setStorageSync( key,  value )  ——  同步保存
读取客户端存储的数据 —— 类似于 let v = localStorage.getItem(k):
		uni.getStorage( key, success(value){ } )  —— 异步读取
		let value = uni.getStorageSync( key )  ——  同步读取
删除客户端存储的一个数据 —— 类似于 localStorage.removeItem(k):
		uni.removeStorage( key,  success(){ } )  —— 异步删除
		uni.removeStorageSync( key )  ——  同步删除
删除客户端存储的所有数据 —— 类似于localStorage.clear():
		uni.clearStorage( success( ){ } )  —— 异步删除
		uni.clearStorageSync( )  ——  同步删除

4、getApp( ):返回App.vue创建的全局App实例对象

四、uni-app应用中请求服务器端接口数据

uni-app使用uni.request()可以实现服务器端数据API的异步请求,编译后会转换为各平台的专有技术。uni.request( )的使用方法:

//没有请求主体的GET请求
let url = ""
let  [err,  res] = await  uni.request({ 
   url 
})
if(err){  处理请求错误 }
else { res.data就是响应消息主体 }	
//有请求主体的POST请求
let url = ""
let  [err,  res] = await  uni.request({ 
   url,
   method: 'POST',   //请求方法
   data: {k:v, ....}      //请求主体 
})
if(err){  处理请求错误 }
else { res.data就是响应消息主体 }

五、重点面试题:uni-app中的生命周期方法

第一组:应用程序级生命周期方法——App.vue:
onLaunch():应用程序启动,每个应用此方法只能调用一次
onShow():应用程序显示出来,可以多次调用
onHide():应用程序隐藏起来,可以多次调用
第二组:页面级生命周期方法——pages
onLoad():页面加载完成,类似于组件的mounted,每个组件只挂载一次;一般用于异步请求页面需要的数据
onShow():页面显示出来,可以多次调用
onReady():页面准备就绪,第一次挂载完成后,进场动画执行完成,可供用户使用
onHide():页面隐藏起来,可以多次调用
onUnload():页面卸载了,类似于组件的destroyed;一般用于释放页面所占用的资源,例如:定时器、WebSocket....
onPageScroll():页面滚动了
onReachBottom():页面滚动到底部了
onPullDownRefresh():页面在顶部下拉刷新了
第三组:组件级生命周期方法——components
beforeCreate() / created()
beforeMount() / mounted()
beforeUpdate() / updated()
beforeDestroy() / destroyed()

六、父子组件间传参

 父组件 => 子组件
//parent.vue
data: {age: 18}
<child  :childAge="20"  :childAge="age"/>
//child.vue
props: {
   childAge: { type: Number,    default:16,      required: true }
}
<text>{{childAge}}</text>
面试题:请问如何理解“Vue.js是单向数据流”这一概念?
父组件传递数据给子组件,子组件可以使用该数据,但是不能修改。

七、小知识:如何获取一个月份的开始时间和结束时间

  let  s   =  '2022-08'
   //计算该月份对应的开始时间
   let  startTime  =  new Date( s ).getTime( )
   //计算该月份对应的结束时间
   let  endTime  =  new Date('2022', '08',  0).getTime( )    //该月最后一天的0点
   let  endTime  =  new Date('2022', '08').getTime( )-1   //该月最后一天的下一天0点

   getTime() 获取时间戳

八、uni-app页面跳转和传参

  //pages/p1/p1
	uni.navigateTo({  
		url: '/pages/p2/p2?uname=yaya&age=18'
	})
  //pages/p2/p2
	onLoad( data ){
		clog( data )   //{uname: 'yaya',  age:'18'}   查询字符串数据会自动解析为对象
	}
	onLoad( {uname, age} ){		//对参数进行解构
		clog( uname, age )
	}

九、前端请求中的防抖

前端服务器端接口异步请求中,有些特别的情形:
①用户鼠标在页面中滑动,及时记录滑动坐标,发给服务器 onmousemove + ajax
②用户在搜索框中输入搜索内容,只要内容改变,及时发给服务器进行查询 oninput + ajax
客户端的事件可能频繁的密集发生(例如:1s发生好多次),如果在事件处理方法中立即提交请求,就会导致短时间内频繁的服务器端请求,造成服务器压力过大,且中间有很多无用的请求
解决方案:事件发生后,不要立即发起服务器端请求,而是等待一段时间(例如半秒钟等);如果这段时间内再次发生同一事件,取消之前的请求计划,重新再次计算半秒钟…直到最后,半秒钟之内没有发生同一事件,最终发起请求 —— 称为:debounce,抑制弹跳,防抖

防抖的核心代码:
let  timer = null               //全局变量,执行异步请求的定时器
function doEvent(){
   if(timer){
       clearTimeout( timer )    //如果之前还有未执行的任务,则取消该任务
   }
   timer = setTimeout( ()=>{
       //发起服务器端接口请求
   },  500 )
}
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值