uni-app基础知识点及相关的组件封装

uni-app

创建项目

• vue create -p dcloudio/uni-preset-vue my-project

启动项目

• npm run dev:mp-weixin

安装sass依赖

• npm install sass-loader node-sass

rpx、 vw、vh##

• rpx是微信小程序的单位，750rpx = 屏幕的宽度
• vw:h5的单位 100vw = 屏幕的宽度 100vh = 屏幕的高度

数据展示

• 在标签上，通过属性的方式使用数据

<view :data-color="color"></view> 

数据循环

• 通过v-for来指定循环的数组
• item和index分别为循环项和循环索引
• ：key指定唯一的属性，用来提高循环的效率

条件编译

• v-if决定显示与隐藏，不适合做频繁的切换显示
• v-show决定显示隐藏，适合做频繁切换显示

计算属性

• 可以理解为对data中的数据进行加工或修饰
• 通过computed来定义计算属性

computed：{
	//过滤
	filter（）{
		...
	}	
}

事件

事件的使用

• 注册事件 @click = ‘handleClick’
• 定义事件监听函数，需要在methods中定义
• 事件传参 @click = 'handleClick（s，$event{）}^{\prime },$event用于获取自定义属性的值

组件

组件的简单使用

• 组件的定义
  • 在src下新建一个components，用于放公共组件
• 组件的引入
  • 使用import 组件名 from ‘组件的路径’
• 组件的注册
  • 在页面实例中饭新增属性components
  • components是一个对戏那个，把组件放进去进行注册
• 组件的使用
  • 在页面中直接使用组件<组件></组件>

组件传参

父传子，通过属性的方式

• 父组件
  • <ul-com ：list=“变量”>
• 子组件通过props接收
  • props：{list：Array}

子传父，通过触发事件的方式

• 子组件通过触发事件向父组件传递数据
  • this.$emit(‘test’,‘来自子组件的数据’)
• 父组件通过监听事件的方式接收数据
  • <ul-com :list=“数据” @test=“父组件定义的方法”>

使用全局数据传递参数

• 通过挂载在vue的原型上
  Vue.prototype.baseURL = '数据'
• 通过globalData的方式（微信小程序独有的）
  getApp().globalData.text = '数据'

组件插槽

• 标签其实也是数据的一种，想实现动态给子组件传递标签，可以使用用插槽
• 通过slot来实现占位符
• 子组件
  <form>标题<slot></slot></form>
• 父组件，先引入子组件
  <myform><view><input /></view></myform>

生命周期

• uni-app框架的生命周期结合了vue和微信小程序的生命周期
• 全局APP中使用onLaunch表示应用启动时
• 页面中使用onLoad或onShow分别表示页面加载完毕和页面显示
• 组件中使用mounted组件挂载完毕

uni-ui

• 它是uni-app的内置组件库，
• 首先要安装：npm install @dcloudio/uni-ui
• 在页面中引入;import {uniCard, uniPagination} from '@dcloudio/uni-ui'
• 然后使用;

<uni-card 
	:title='title' 
	:isFull="isFull" 
	:note="note" 
	:thumbnail="thumbnail"
	 :extra="extra">
</uni-card>

uni-api

• 因为原生的微信小程序的api不支持promise
• 所以uni-app对大部分小程序的原生api做了封装，使其能够支持promise
• 使用方法:uni.request

scroll-view实现分页功能

• 可以借助scroll-view实现页面的分页功能，用于导航不动的上拉
• 其中scrolltolower是触发触底事件
  <scroll-view scroll-y @scrolltolower=“handle”>
  

onReachBottom上拉加载实现分页

• onReachBottom用于整个页面的上拉

uni的一些常用组件

• uni.showToast()设置提示窗口
• uni.showLoading()设置页面的加载等待
• uni.hideLoading()设置页面的隐藏加载
• uni.setNavigationBarTitle()设置页面的标题
• uni.downloadFile({}).then()将远程文件下载到小程序内存中
  await uni.downloadFile({url:this.imgDetail.img})
• uni.saveImageToPhotosAlbum({}).then()将小程序的内存文件下载到本地
  await uni.saveImageToPhotosAlbum({filePath:tempFilePath})

扩展

• Object.keys(obj)
  • 参数：要返回其枚举自身属性的对象
  • 返回值：一个表示给定对象的所有可枚举属性的字符串数组
• moment.js的使用
• 设置中文板式
  import moment from ‘moment’
  moment.locale(‘zh-cn’)
• 换算成距今的时间
  moment(this.imgDetail.atime*1000).fromNow(）

触屏事件

• 为元素添加手指按下、离开的的触屏事件

<view 
	@touchstart="handleTouchstart"
	@touchend="handleTouchEnd">
</view>

• 然后在script标签中写入

	methods:{
		handleTouchstart(event){//手指按下
		  console.log(event.changedTouches[0].clientX) //数组代表手指的个个数，clientX代表手指按下的坐标
		  console.log(event.changedTouches[0].clientY) //数组代表手指的个个数，clientY代表手指按下的坐标
		}，
		handleTouchEnd(event){//手指离开
		  console.log(event.changedTouches[0].clientX) //数组代表手指的个个数，clientX代表手指按下的坐标
		  console.log(event.changedTouches[0].clientY) //数组代表手指的个个数，clientY代表手指按下的坐标
		}
	}

• 因为用户按下的时间和坐标是两个方法中公用的，所以在data中定义需要的数据

	methods:{
		handleTouchstart(event){//手指按下
		  console.log(event.changedTouches[0].clientX) //数组代表手指的个个数，clientX代表手指按下的坐标
		  console.log(event.changedTouches[0].clientY) //数组代表手指的个个数，clientY代表手指按下的坐标
		  this.starttime = Date.now()
		  this.startX = event.changedTouches[0].clientX
		  this.startY = event.changedTouches[0].clientY
		}，
		handleTouchEnd(event){//手指离开
		  console.log(event.changedTouches[0].clientX) //数组代表手指的个个数，clientX代表手指按下的坐标
		  console.log(event.changedTouches[0].clientY) //数组代表手指的个个数，clientY代表手指按下的坐标
		  this.endtime = Date.now()
		  this.endX = event.changedTouches[0].clientX
		  this.endY = event.changedTouches[0].clientY
		  if(this.endtime-this.starttime>2000){
			//判断按下的时长是否合法
			return；
		  }
		  let direction = ''
		  if(Math.abs(this.endX-this.startX)){
			//判断滑动的距离是否合法
			direction = this.endX-this.startX>0?'right':'left'
		  }else{
			return;//不再向下执行
		  }
		}
	}

• 最后在父组件引入插件，使用插槽功能实现数据的传递

如果一个容器同时进行分页scroll-view与伸缩盒子，则要为此容器加上一个enable-flex属性

	<scroll-view scroll-y 
    enable-flex
    @scrolltolower="handle"
  	class="one" >

视频标签的问题

• 如果给视频自定义宽高，可能出现黑色的边框，这时可以在视频标签上添加一个属性objectFill，即可消除边框
  <video :src="videoObj.video" objectFit="fill"></video>