课程学习内容总结

关于uni-app

uni-app是基于weex的改进版,修复了weex中的bug，并且更新了更多的组件。weex能使开发者构建web端, Android、iOS 应用。但现在weex已经很少使用。

uni-app结构

main.js，manifest.json，pages.json，uni.css，app.vue

uni-app理解

uni-app是跟vue差不多的页面结构，只不过是uni-app使用不了有些简单缩写，比如border,border-bottom之类的这些在vue中都是可以使用的。但在nvue中都无法使用只能使用简单的class样式，并且nvue中无法使用复杂的类名只能使用简单的类名。
uni-app无法使用百分比，能使用vw,vh,rpx。
rpx也是相对长度单位,最大为750rpx。当750rpx时屏幕宽占最大
uni-app使用的事件也跟vue不一样比如简单的点击事件:
在vue中是@click，鼠标点击
在nvue中是@tap，手机触摸后离开屏幕
而且uni-app中的路由配置都是在pages.json中配置.
但是tabbaer和正常的路由跳转存在于同一个页面时路由跳转不会生效.
并且路由跳转时无法使用query和parmse传参只能使用url后携带即将跳转的路由和参数。
组件方面:
在使用页面图标时，无法使用本地的文件，有些情况下还会使用base64格式字体图标，不支持字体文件。

====================================================================================
对于今天所学的知识，本人暂时理解就是这些。以后会补充相关内容

=====================================================================================
day02
字体图标，button组件，loading组件，以及仿微信的登录页面及功能、api封装。

button组件主要是因为uni-app自带的button组件在某些方面自己进行封装的button组件好。比如说在加入字体图标这一方面，不能随便 的加入字体图标。但是在运用自己的手写组件时就会没有这些问题。
字体图标的引入过程。

再用dom导出fontfamily,fontfamily中名字自己进行命名,url中写入路径

dom.addRule('fontFace', {
	fontFamily: 'myicon',
	src: "url('/static/font/myicon.ttf')"
});

用weex的方法

const dom = weex.requireModule('dom');

在main.js中导入公共的样式文件。这样就可以了

<text class="loadingicon">&#xe607;</text>

在公共css文件中这样写

.loadingicon{
	font-family: myicon
}

这样就会生成字体图标

loading组件时引入loading的icon进行操作后的一个自封装组件
在这个组件内

const animation = weex.requireModule('animation')

声明一个方法

loading(){
			animation.transition(
			this.$efs.1,
			{
				styles:{
					transform:'rotate('+this.deg+'deg)',
					transformOrigin:'center center'
				},
				duration:8000
			},
			()=>{
				this.deg+=360;
				this.loading()
			}
			)
		}

props验证并接收

size:{
			type:Number,
			default:46
		},
		type:{
			type:Number,
			default:0
		},
		color:{
			type:String,
			default:'#39b54a'
		}
	}

最终完整代码如下：

<template>
	<view class="loading">
		<text ref="1" class="loadingicon">&#xe608;</text>
</template>

<script>
	const animation = weex.requireModule('animation')
	export default {
	data(){
		deg:360
	},
	mounted() {
		this.loading()
	}
	methods:{
		loading(){
			animation.transition(
			this.$efs.1,
			{
				styles:{
					transform:'rotate('+this.deg+'deg)',
					transformOrigin:'center center'
				},
				duration:8000
			},
			()=>{
				this.deg+=360;
				this.loading()
			}
			)
		}
	},
	props:{
		size:{
			type:Number,
			default:46
		},
		type:{
			type:Number,
			default:0
		},
		color:{
			type:String,
			default:'#39b54a'
		}
	}
	}
</script>

<style>

</style>

这就是自封装的loading组件

=====================================================================================

防抖和节流

防抖就是指触发事件后在 n秒内函数只能执行一次，如果在 n秒内又触发了事件，则会重新计算函数执行时间。

//防抖
// 思路:在规定时间内未触发第二次，则执行
function debounce (fn, delay) {
  // 利用闭包保存定时器
  let timer = null

  return function () {
    let context = this
    let arg = arguments
    // 在规定时间内再次触发会先清除定时器后再重设定时器
clearTimeout(timer)

    timer = setTimeout(function () {
      fn.apply(context, arg)
}, delay)

  }

}

function fn () {
  console.log('防抖')
}

addEventListener('scroll', debounce(fn, 1000))

节流就是指连续触发事件但是在 n秒 中只执行一次函数。可以使用时间戳和定时器来实现

//节流
// 思路：在规定时间内只触发一次
function throttle (fn, delay) {
  // 利用闭包保存时间
  let prev = Date.now()

  return function () {
    let context = this
    let arg = arguments
let now = Date.now()

    if (now - prev >= delay) {
      fn.apply(context, arg)
      prev = Date.now()
}

  }

}

function fn () {
  console.log('节流')
}

addEventListener('scroll', throttle(fn, 1000))

函数柯里化

函数柯里化也是闭包的一种形式。就是把接收的多个参数转换为单一的参数的函数，接收余下的参数并返回结果的新函数技术
特点:

接收单一参数，将更多的参数通过回调函数来搞定；
返回一个新函数，用于处理所有的想要传入的参数；
需要利用call/apply与arguments对象收集参数；
返回的这个函数正是用来处理收集起来的参数。

作用:

能进行部分传值，而传统函数调用则需要预先确定所有实参。如果你在代码某一处只获取了部分实参，然后在另一处确定另一部分实参，这个时候柯里化和偏应用就能派上用场。

uni-app的通讯录，信息列表以及添加好友界面的搜索和根据状态来判断是否是好友来决定跳转的页面

通讯录页面

通讯录页面主要就是右侧的根据好友首字母的拼音缩写形成的一个竖向的条。可以根据这个列表快速查找到已有好友。再根据拼音缩写给每个好友分类

添加好友

点击右上角的添加好友后跳转到添加好友的页面
在这个页面可以进行搜索，语音搜索。搜索到后进行触摸操作后，根据它的id判断是否是自己的好友如果是自己好友的话会跳转到一个好友详细信息的页面中。
在这个页面可以进行删除好友和发消息的操作。
如果不是好友的话就会跳到添加好友的页面中。进行添加好友操作

信息列表

信息列表根据接口获取到的值，进行渲染后就可以出来了。再进行布局完善。