1.1插值中只能写表达式 不能写代码
1.2标记的内容使用js时要使用插值 如果给一个属性添加js语法 要使用绑定指令
1.3 class中可以绑定一个数组或者对象 如果为数组 则数组的每一项都会是该元素的值 作为如果是对象则key值是class值 value值是布尔值 用布尔值判断class是否添加
1.4 v-once只渲染元素和组件一次
1.5 v-html可以将标记的文本按照标记的方式输出 可以防止编译过程出现奇怪的东西
2.1 data必须声明返回一个初始数据对象的函数 => 返回结果对象格式
2.2不加key值序号会改变
2.3class中如果书写js代码 需要v-bind绑定
2.4数组的includes()方法：返回一个布尔值 表示数组是否包含给定的值 ***
2.5条件渲染：利用条件判断是否需要渲染 v-if，v-else 或者 v-if，v-if-else,v-else (v-if和v-else的值是相对的)
2.6 v-if(节点操作) 和 v-show(css样式操作 display操作) 在条件为真时都会显示出来且结果相同 但是在条件为假时 v-if就真的不存在了 而v-show只是隐藏了
2.7事件修饰符(写法：@click.stoo="")
- .stop 阻止事件冒泡
- .prevent 阻止默认事件发生
- .capture 捕获冒泡 既有冒泡发生时 有该修饰符的dom元素先执行 若有多个 则从外到内依次执行
- .self 将事件绑定到自身 只有自身才能触发 常用于避免冒泡
- .once 设置事件只能触发一次
键盘修饰符：.enter .tab .delete…(也可以用keycode值代替)
2.8表单的value变化用ev.detail.value获取
练习：单选 多选(6.15csdn) 删除数组中的数据
3.1数组的push,shift,pop等称为数组的变异方法 会重新渲染列表 例如 - arr.push(“ddd”)重新渲染 添加了ddd - arr[3]=“ddd” 只是渲染数组的第三项 如第三项存在 则修改第三项的值为ddd 若第三项不存在 则数组中加入了ddd但是在页面不会被渲染
3.2若使用this.obj[“d”]=456;给对象添加新的属性 可以添加进去但是不会在页面渲染 应使用把原对象解构出来到新的对象 给新的对象添加新的属性值this.obj = { ...this.obj, "d":456 }
3.3对象转数组方法Object.keys(obj)
3.4当你的一个变量需要其他变量的计算而得到时 其他的变量会发生变化 此时要用computed计算–提高性能 (computed和data,methods是同一级别 里面是函数 返回他的值)
3.5计算属性的setter:当手动修改计算属性的值时 触发setter函数 执行一些自定义的操作
3.6当一个值的改变影响了很多数据的值 需要使用watch监听
3.7自定义组件 语法如下： class XzyTab extends HTMLElement{//定义类继承于 constructor(){//构造函数 super();//调用父类的构造函数 const shadom = this.attachShadow({ mode:'open';//是否可以获得组件内部元素 open为开放的封装模式 closed为关闭的封装模式 }) //生成组件时执行的代码 不能使用innerHTML 需要动态创建元素 var oStyle = document.creatElement("style"); oStyle.innerHTML = ``; shadom.appendChild("oStyle"); } } custtomElements.define('xzy-tab',XzyTab);//第一个是组件名 第二个是类名
- 自定义属性 ： 例如组件内部设置data属性可以自定义传值 在书写的代码中用 获取属性的值getAttribute 获取属性的值
var data = this.getAttribute("data")
3.8数组的join方法将数组转换成字符串
3.9从服务器中接收的数据 用JSON.parse()方法解析成js使用的数据
练习 给对象添加新的属性 自定义组件之选项卡
5.1pages.json 中的page属性代表当前项目所有页面的注册信息 第一个页面是主页
5.2页面跳转 (1)<navigator url="../text/text">跳转</navigator> (2)声明函数 例如toText (){//在方法中声明函数 写uni.navigateTo() uni.navigateTo({ url:"../text/text", success() { console.log("成功"); } })
uni.navigateTo()保留当前页面 跳转
uni.redirectTo()关闭当前页面 跳转
uni.reLaunch()关闭当前页面 并关闭之前没有关闭的页面
uni.switchTab(OBJECT)跳转到tabBar页面 并关闭所有非tabBar页面(tabBar页面指小程序下导航)
uni.navigateBack()关闭当前页面 返回上一级或多级页面(参数{delta:“返回的页面数”})
5.3项目的生命周期在APP.vue中
页面生命周期
5.4sass：uni.sass文件中可通过定义颜色变量控制项目的颜色改变 例如：$uni-color-primary: #007aff;
5.5pages tabBar 见笔记
页面跳转 (1)跳转 (2)声明函数 例如toText (){//在方法中声明函数 写uni.navigateTo() uni.navigateTo({ url:"…/text/text", success() { console.log(“成功”); } })
uni.navigateTo()保留当前页面 跳转
uni.redirectTo()关闭当前页面 跳转
uni.reLaunch()关闭当前页面 并关闭之前没有关闭的页面
uni.switchTab(OBJECT)跳转到tabBar页面 并关闭所有非tabBar页面(tabBar页面指小程序下导航)
uni.navigateBack()关闭当前页面 返回上一级或多级页面(参数{delta:“返回的页面数”})
当需要跳转到tabBar页面时 只能用uni.switchTab()跳转
6.1map组件 (设置经纬度属性)
6.2 表单元素-button
- size属性 (default:默认大小,mini:小尺寸)
- type属性(default:白色,warn:红色) 可改用default自行写样式
- plain属性:是否镂空true/false
- disabled:是否禁用
- openType:许多的功能
6.3checkbox-group:多项选择器 内部由多个checkbox组成 属性说明如下:
- @change:选中项发生改变是触发的change事件
- value:选中时触发的change事件 并携带的value
通过ev.detail.value()判断谁被选中
6.4editor富文本编译器
6.5表单中的值发生改变时出发@input事件
6.6lable 用来和改进表单组件的可用性 使用for属性(绑定控件的id)或将控件放在该标签下 当点击时 就会触发对应的控件
6.7picker: 从底部弹起的滚动选择器 支持五种选择器 通过model区分
- mode = “selextor”
练习：tabBar页面 checkbox-group的多选效果
6-7-1.1HTML5的新组件-video和audio 因为flash并不属于浏览器 pc端需要插件才能运行 且在手机不兼容(audio除了width,height,poster 其他和video相同)
- src属性引入视频音频地址 source做兼容处理
- width/height 设置视频宽高 (等比缩放)
- poster:设置视频播放前预览图片的地址
- controls:显示或隐藏媒体用户控制界面
- autoplay:媒体是否自动播放
- loop:媒体是否循环播放
- muted:媒体是否静音
- prelode:是否预先加载数据 ({none:不预先加载,metedata:预先只加载媒体文件元数据(时常。大小),auto:优先加载})
通过js选择器获取oVideo元素属性(oAudio除了videoWidth,videoHeight,poster其他和video相同)属性如下：
- videoWidth/videoHeight 视频实际尺寸(显示为0时表示视频并没有加载完成 可以在window.onlode的时候获取)
- poster
- duration 媒体总播放时长(只读) 在window.onlode的时候获取
- currentTime 媒体的播放进度(已经播放多久)
- muted (true表示静音)
- volume:0.0-1.0音量相对值
- controls:true表示显示
- loop:true表示循环
- paused:媒体是否处于暂停状态 true表示暂停(只读)
- ended:是否播放完毕 true表示播放完毕(只读)
- currentSrc:以字符串形式返回媒体地址(只读)->绝对路径
6-7-1.2 oVid元素和oAud元素方法：
- play() 媒体播放
- pause() 媒体暂停
- load() 重新加载媒体(如你修改了source的Src地址 若不是用load方法重新加载 仍显示之前的视频)
oVid元素和oAud元素事件： - play: 在视频、音频播放前触发
- ended: 在视频，音频播放结束时触发
- pause: 在视频，音频暂停时触发
6-7-1.3offsetWidth等是只读属性 不能赋值
7.1uni-app中video组件
- initial-time=“20” 从20s开始播放
- duration 显示的播放时间
- page-gesture=“false” 是否开启音量和亮度调节手势 true/false
- video规定尺寸300*225
- objectFit=“cover” 当视频大小和video容器大小不一致时 视频的表现形式{contain:包含,fill:填充,cover:覆盖}
- poster 若controls值为false则poster无效
7.2uni.createVideoContext(,)//第二个参数传入组件实例this
7.3 uni-app中的video获取通过onReady: onReady:function(res){ this.videoCon = uni.createVideoContext('myVideo',this) }
7.4视频的弹幕 属性：
- danmu-List 弹幕列表
- danmu-btn 是否显示弹幕按钮 只在初始化有效 不能动态变更
- enable-danmu 是否展示弹幕 只在初始化有效 不能动态变更
7.5条件编译：用特殊的注释作为标记 在编译时 根据这些特殊的注释 将注释中的代码编译到不同平台 写法：以 #ifdef #ifndef 开头 加 %平台 以#endif结尾
- #ifdef : if defined 仅在某平台存在
- #ifndef : if not defined 除了某平台均存在
%平台可取值如下
- APP-PLUS 对应App平台
- H5 对应H5
- MP-WEIXIN 对应微信小程序
- MP-BAIDU
- MP-TOUTIAO 字节跳动
- MP 微信 支付吧 百度 字节跳动 360 qq
JS和CSS都支持条件编译
例如：<!-- #ifdef MP-WEIXIN --> <text>只在微信小程序</text> <!-- #endif --> <!-- ifdef MP_WEIXIN || H5 --> <text>微信或者H5</text> <!-- endif -->
录音 自己发弹幕 进度条效果 picker 地图
8.1地理定位(HTML5新特性) 首先应监测用户设备浏览器是否支持地理定位，除非用户同意，否则不支持```function getLocation(){
if(navigator.getLocation){
navigator.getLocation.getCurrentPosition(showPosition,showError);
}else{
alert(“浏览器不支持地理定位”)
}
}` ``
// 成功时调用function showPosition(position){ var lat = position.coords.latitude;//纬度 var lag = position.coords.longitude;//经度 alert('纬度'+lat+',经度'+lag); }
// 失败时调用function showError(error){ switch(error.code){ case error.PERMISSION_DENIED: alert("定位失败，用户拒绝请求地理定位"); break; case error.POSITION_UNAVAILABLE: alert("定位失败 位置信息不可用"); break; case erroe.TIMEOUT: alert("定位失败 请求获取用户位置超时"); break; case error.UNKNOWN_ERROR: alert("定位失败 定位系统失效"); break; } }
8.2uniapp中地图组件
8.3 我们用变量储存数据关闭页面会被销毁 若需要一段时间 可用cookie
cookie存储以域名区分 不同浏览器存放cookie位置不同
cookie数据是一种键值对格式为：cookie=值(两个值之间有一个；和 空格)
一个域名存放的 cookie是有限的 每个cookie存放内容大小也有限制
封装了设置cookie
8.4中文编解码 encodeURI(str)：编码 decodeURI(str)：解码
8.5HTML5提供两种客户端存储数据的方法：localStorage-无时间限制的数据存储(单个域名存储量较大) sessionStorage-针对session数据存储(只在session内有效 存储量更大)这两个不会请求服务器
cookie不适合大量数据存储 每个域名存储量比较小 所有域名存储量有限制 每次请求会发送到服务器
9.1uni-app 数据缓存
- uni.setStorageSync(key,DATA)–DATE:需要存储的内容 只支持原生类型以及通过JSON.stringify(将js数据转化成字符串)序列化的对象=>同步
- uni.getStorageSync(key)=>同步00-【
笔记本制作
10.1 HTML5新标记 datalist 定义选项列表
output 定义不同类型的输出
details(折叠效果):描述文档或文档某个部分的细节{summary:标题，figure:规定独立的内容}
10.2新的表单控件 -type=“number” 数值的输入域 min max为数字的限定
-type=“range” 数字值滑动条 除了最大最小值还有步长 必须满足(最大值减最小值的结果可以被step整除)
10.3新的表单控件还有
- color data time datatime-local month week email search tel url
10.4HTML5新增属性 draggable:是否允许用户拖动元素(true可拖拽) 拖拽效果要配合js一起设置
-
ondragstart: 拖拽前触发(事件对象为被拖拽元素)
-
ondrag 拖拽前和拖拽结束之间 连续触发 (事件对象为被拖拽元素)
-
ondragend 拖拽结束触发(事件对象为被拖拽元素)
-
ondragenter 进入目标元素触发 相当于onmouseover(事件对象为目标元素)
-
ondragover 进入目标(鼠标位置进入) 离开目标之前 连续触发(事件对象为目标元素)
-
ondragleave 离开目标元素触发(鼠标位置离开) 相当于onmouseout(事件对象为目标元素)
-
ondrop 在目标元素上释放鼠标 必须在dragover上阻止默认事件—ev.preventDefault
(事件对象为目标元素) -
dataTRansvfer对象 (属于event) ：
-
ev.dataTRansvfer.setData(两个参数);(例如ev.dataTransfer.setData(“index”,index++);)设置数据方法=>ondragstart事件
-
ev.dataTRansvfer.getDate();获取数据方法=>ondrop事件 - effectAllowed:设置光标
-
ev.dataTransfer.setDragImage(Oimg,Oimg.offsetWidth/2,Oimg.offsetHeight/2); 设置拖放效果为一张图片
事件顺序
- drop不触发：dragstart>drag>dragover>dragleave>dragend
- drop触发：dragstart>drag>dragover>drop>dragend
10.5ev.dataTRansvfer.files：获取外部拖拽的文件 返回一个fileList列表 fileList有个type属性 返回文件的类型
10.6表单验证
10.7contentEditable属性：值设置成true会使该元素内容被编辑 该属性默认是继承的 designMode: 全局对象属性 值设置成true时 所有支持contentEditable属性的元素都可被编辑
11.1canvas画布：创建一个canvas标签 和img类似 只有两个可选属性width(默认300px ) height(默认150px) 没有src alt属性 也可以使用css设置canvas宽高 但是如果宽高属性和初始化比例不一致 会出现缩放 除非确实需要缩放 否则永远不要使用css设置宽高属性
var oCG = oC.getContext(“2d”);//获得2d绘图工具
canvas元素起点为左上角(0,0)点 x向右增大y向下增大 所有元素相对原点定位
- oCG.fillStyle=color;设置填充颜色
- oCG.strokeStyle=color;设置描边颜色
- oCG.lineCap =“round”;端点样式butt方形，round圆角 square(多出宽的一半)
- oCG.lineJoin=“round”;边界连接点样式 miter直角 round圆角 bevel斜角
- oCG.moveTo();将画笔移动到下xy点
- oCG.lineTo();绘制直线路径 从上一个点到这个点
- oCG.lineWidth=5;描边宽度
- oCG.beginPath();开始绘制新路径 用于区分之前的
- oCG.closePath();闭合路径(将开始和结束连起来)
- oCG.stroke();描边 从上一个beginPath绘制到此命令
- oCG.stroke();填充
11.2图形绘制 xy是距离左上角坐标 width height是尺寸
- oCG.rect(x,y,width,height)
- oCG.strokeRect(x,y,width,height)直接用描边画出来
- oCG.fillRect(x,y,width,height)直接用填充画出来
- oCG.clearRect(x,y,width,height)清楚该矩形的绘制
- oCG.arc(x,y,r,起始弧度,结束弧度,是否为逆时针) xy为圆心坐标 true是逆时针
圆心到三点钟方向是起始位置 弧度公式rad = deg*Math.pi/180
11.3文字绘制
oCG.font = “30px bold 宋体”;//设置字体
oCG.fillStyle = “red”;//设置颜色
oCG.textAlign = “left”;//设置水平对齐方式
oCG.textBaseline = “middle”;//设置垂直对齐方式
oCG.fillText(“要写的文字”,200,100);//绘制文字 指定坐标
// 对齐方式和指定坐标有关系 例如上面就是文字左边的坐标为200，100
12.1绘制图片 绘制视频
- var img = new Image();//创建行对象
- img.src = “图片路径”;
- img.onload = function (){
oCG.drawImage(img,sx,sy,sWidth,sHeight,x,y,width,height) 即从画布的(x,y)点绘制宽高为width,height的img
从img的(sx,sy)点开始截取画出宽高为sWidth,sHeight的img
}
12.2绘制背景图：不在dom中的图片需要先加载 图片加载成功后绘制背景图
- oCG.fillStyle = oCG.createPattern(obj,“repeat”);用图片绘制填充图 设置完成后可以用此填充图来绘制任何形状
- oCG.arc(200,200,120,0,360*Math.PI/180,false);
- oCG.fill();
canvas也可以绘制阴影 渐变 贝塞尔曲线 等 但是性能差
12.3 配置状态的保存和恢复 类似js函数作用域 在一个oCG.save();和oCG.restore();生效 其中的内容不受全局影响
12.4 arr.sort();数组的排序 括号内接收函数 返回-1时 升序
[…arr1].sort((a,b)=>a-b);
12.5画布的变形 画布变形的是整个画布 一旦设置所有后续绘制都被影响 所以让变形只对需要变形的绘制起效 就要用到save() restore()方法
- oCG.translate(); x,y轴偏移值 每次位移后 原点应回去
- oCG.scale();x,y轴缩放因子
- oCG.rotate();弧度 正值为顺时针