一、CSS动画
1.动画原理及2D变换
1.平移（translate）
第一个参数 水平平移量 右为正方向
第二个参数 竖直平移量 下为正方向
2.旋转（ rotate）
参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180°
沿轴进行顺时针旋转为正方向，0°代表竖直向上
3.缩放（scale）
参数：比率 1 为原本大小
4.倾斜（skew）
5.变化的原点
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
/* 设置transform的原点 */
/* 原点的位置会影响旋转的圆心，缩放的位置 */
/* 待选值: top bottom left right center 还可以填入像素值 */
transform-origin: center;
/* 第一个参数代表水平偏移量 第二个参数代表竖直偏移量 */
/* transform-origin: right center; */
/* transform-origin: center bottom; */
/* 当值为像素值的时候，像素值的参考位置是元素的左上角 */
/* transform-origin: 20px 70px; */
transform: rotate(0deg);
transform: scale(0.1);
}
.point {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 270px;
left: 220px;
}
</style>
<body>
<div class="box"></div>
<div class="point"></div>
</body>2.过渡动画
<style>
/* 什么是transition？ */
/* transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态 */
.box {
width: 100px;
height: 100px;
background-color: #f00;
/* 定义初始状态 */
transform: translateX(0px);
/* transition: all 1s ease-in; */
/* 播放过度动画至少包含 transition-property transition-duration */
/* 指定css属性能够产生过度动画 */
transition-property: left, transform;
/* transition-property 还有两个待选项
none: 无
all: 所有属性都能播放过渡动画
*/
transition-property: all;
/* 动画播放的时长 */
transition-duration: 2s;
/* 动画播放的速度曲线 */
/* 待选项
linear: 匀速直线运动
ease-in: 慢进
ease-out: 慢出
ease-in-out: 慢进慢出
cubic-bezier: 曲线函数
*/
transition-timing-function: linear;
/* 动画播放延迟 */
transition-delay: 3s;
/* 合成属性
语法:
transition: property duration timing-function delay;
*/
transition: all 3s linear 3s;
}
</style>
<body>
<div class="box"></div>
</body>3.3d变换和animation动画
1.animation动画
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
/* 动画属性如下 */
/* 动画animation必须包含 名称和时长两个属性才会进行播放 */
/* animation一下四个属性可以和 tansition一块儿进行记忆 */
/* 动画名称 */
animation-name: move;
/* 动画播放时长 */
animation-duration: 3s;
/* 动画播放的速度曲线 */
animation-timing-function: linear;
/* 动画延迟 */
/* animation-delay: 3s; */
/* 以下属性为 animation 独有的属性 */
/* 动画的迭代次数
infinite 无限次
*/
animation-iteration-count: 1;
/* 动画播放方向
待选项:
normal: 顺向播放
reverse: 反向播放
alternate: 来回播放
alternate-reverse: 反向来回播放
*/
animation-direction: normal;
/* 动画填充模式（动画播放结束后所保留的状态）
forwards: 保留结束帧的状态
backwards: 保留起始帧的状态
both: 保留初始和结束时的状态
*/
animation-fill-mode: both;
/* 可以定义复合属性，取代上面的所有属性 */
/* 赋值顺序，可以参考如下顺序 */
/* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
/* duration | timing-function | delay | name */
/* duration | name */
/* animation: 2s move;
animation: 2s linear 3s move; */
animation: move 3s linear 2s forwards;
}
/* 动画帧序列 */
@keyframes move {
/* 起始帧 */
from {
/* 每一帧中描述该元素的状态 */
transform: translateX(0px);
opacity: 0;
}
/* 可以用百分比来代表动画的中间状态 */
50% {
transform: translateX(600px);
opacity: 1;
}
/* 结束帧 */
to {
transform: translateX(300px);
}
}
</style>
<body>
<div class="box"></div>
</body>2.动画的播放和暂停
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
@keyframes move {
from {
transform: translateX(0px);
}
to {
transform: translateX(300px);
}
}
</style>
<body>
<div class="box"></div>
<button class="btn1">播放</button>
<button class="btn2">暂停/继续</button>
</body>
<script>
let btn = document.querySelector('.btn1')
let btn2 = document.querySelector('.btn2')
let box = document.querySelector('.box')
btn.addEventListener('click', () => {
box.style.animation = 'move 1s linear forwards infinite alternate running'
})
btn2.addEventListener('click', () => {
// animationPlayState 动画播放状态
// paused 暂停
// running 播放
if (box.style.animationPlayState === 'paused') {
box.style.animationPlayState = 'running'
} else {
box.style.animationPlayState = 'paused'
}
})
</script>3.3d变换
<style>
* {
margin: 0;
}
.scene {
height: 100vh;
/* 变换样式
perserve-3d 代表将元素变成一个3D空间
*/
transform-style: preserve-3d;
/* 灭点到屏幕的距离 */
/* 若三维场景中不添加 perspective 则三维场景是一个正交视图 */
perspective: 300px;
/* 透视原点（灭点所在的坐标）
原点为 0 值时，所在位置是scene的左上角
*/
/* perspective-origin: center center; */
perspective-origin: 0 0;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
top: 100px;
left: 300px;
transform: rotateY(65deg);
}
</style>
<body>
<!-- 创建一个场景，用来显示三维图形 -->
<div class="scene">
<!-- 给三维空间中添加三维元素 -->
<div class="box"></div>
</div>
</body>4.渐变色分栏布局与响应式
1.渐变色
<style>
.box {
height: 300px;
/* 背景的渐变色实际上是设置的 background-image 而不是 background-color */
/* 线性渐变 */
/* 语法: linear-gradient(direction, color1, color2, color3 ... )
direction: 渐变色的朝向 以 to 开头, 或者可以添加角度值; 默认值为 to top
color1 color2 ...: 渐变的颜色序列
*/
background-image: linear-gradient(30deg, #f00, #0f0, #00f);
/* 颜色值后可以添加像素距离，该像素值代表着该颜色所处的位置，该位置颜色将到下一个位置的颜色之间进行渐变 */
background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);
/* 重复线性渐变 */
background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);
/* 径向渐变 */
background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);
background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);
/* 重复径向渐变 */
background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);
}
</style>
<body>
<div class="box"></div>
</body>2.响应式布局
<style>
/* 语法：@media media-type and (condition1) and (condition2) ... */
/* 媒体类型 media-type：
备选项
all: 所有设备
print：打印机的预览模式
screen：显示屏
speech：语音合成器
*/
/* min-width: 屏幕最小宽度 */
/* max-width: 屏幕最大宽度 */
@media screen and (min-width: 600px) and (max-width: 900px) {
.box {
background-color: orange !important;
}
}
@media screen and (min-width: 900px) {
.sidebar {
display: block !important;
}
}
@media screen and (max-width: 900px) {
.sidebar-mini {
display: block !important;
}
}
body {
margin: 0;
}
.box {
height: 100px;
background-color: #f00;
}
.sidebar {
width: 4em;
height: 100vh;
border-right: 5px solid #000;
font-size: 32px;
display: none;
}
.sidebar>div {
border-bottom: 5px solid #000;
line-height: 6ex;
text-align: center;
}
.sidebar-mini {
width: 2em;
height: 100vh;
border-right: 5px solid #000;
font-size: 32px;
display: none;
}
.sidebar-mini>div {
border-bottom: 5px solid #000;
line-height: 6ex;
text-align: center;
}
</style>
<body>
<!-- <div class="box"></div> -->
<div class="sidebar">
<div>首页</div>
<div>视频</div>
<div>音乐</div>
</div>
<div class="sidebar-mini">
<div>首</div>
<div>视</div>
<div>音</div>
</div>
</body>二、jquery
jquery 使用的方法：
1. 查询并存储元素
2. 操作元素，包括修改元素样式，绑定事件等
什么是jquery 对象
// 使用jquery $() 函数查询出来的返回值 就是一个jquery 对象
// $box 就是一个jquery 对象
// let $box = $('.box')
获取jquery对象的方法有两种
// 1. 使用 css 选择器
let $li = $('ul>li')
// 2. 使用 dom 对象
// 先查询一个dom对象
let box = document.querySelector('.box')
// 使用dom对象获取一个jquery对象
let $box = $(box)
创建并插入元素
// 创建一个节点，该节点就是一个jquery对象
let $box = $(`<div class="box">new</div>`)
// 某个元素追加一个子节点
// $(document.body).append($box)
// 追加一个子节点到另一个元素中
// $box.appendTo($(document.body))
// 某个元素追加一个节点到头部
// $(document.body).prepend($box)
// 追加一个子节点到另一个元素的头部
// $box.prependTo($(document.body))
let $box2 = $('.box').eq(1)
// 某个元素的前面追加一个元素
// $box2.before($box)
// 某个元素被添加到另一个元素的前面
// $box.insertBefore($box2)
// 某个元素的后面添加一个元素
// $box2.after($box)
// 某个元素被添加到另一个元素的后面
$box.insertAfter($box2)
jquery对象的一些方法
1、eq 读取对应索引位置的jquery对象
let $li = $lis.eq(1)
// 因为 $li 是jquery对象 所以可以直接使用jquery操作它
$li.css('color', '#0f0')
/2、get 读取对应索引位置的dom对象
// let li = $lis.get(2)
// li.style.color = '#f00'
// 使用 [] 方括号的方式去获取索引对应的 dom 对象
// 其结果等价于 get 函数获取的结果
let li = $lis[2]
li.style.color = '#f00'
3、// 添加类
$box.addClass('active')
4、// 判断是否存在某个类名
$box.hasClass('active')
5、// 删除类
$box.removeClass('active')
6、// 读取属性
let clazz = $box.attr('class')
console.log(clazz);
7、// 赋值属性
$box.attr('my-data', 'hello world')
8、// 删除属性
$box.removeAttr('class')
9、// 每一个元素都使用 div 来进行包裹
// $('li').wrap('<div class="fs"></div>')
10、// 所有的 li 元素用一个 div 进行包裹
$('li').wrapAll('<div class="fs"></div>')
11、// index() 查询某个节点在集合中的索引
let index = $('.box').index($('.box:nth-child(3)'))
console.log(index);
12、// find() 查询某个节点的后代节点
let $span = $('.box-list').find('.box>span')
console.log($span);
13、// js api 的查询方法
let boxList = document.querySelector('.box-list')
// 查询boxList的子节点
console.log(boxList.querySelector('.box>span'));
14、// closest 查询最近的父节点
console.log($span.closest('.box-list'));
jquery对象绑定事件
// 和dom对象绑定事件进行类比
// dom 对象有两种绑定事件的方法
// 1. 使用 事件属性 例如: onclick onmousemove
// 对应 jquery 的写法如下
$btn.click(ev => {
console.log('click');
// ev 是jquery封装的事件对象
console.log(ev);
})
// 再例如
$btn.mousemove(ev => {
console.log('mousemove');
})
// 可以直接使用事件对应的函数去触发事件，例如:
$btn.click()
$btn.mousemove()
// 2. 使用事件监听器
// $btn[0].addEventListener('click', ev=>{})
// 对应的jquery写法：
const handler = ev => {
console.log(ev);
console.log(1);
}
// 绑定事件
$btn.on('click', handler)
$btn.on('click', ev => {
console.log(ev);
console.log(2);
})
// 绑定一次性事件
$btn.one('click', ev => {
console.log(ev);
console.log('one');
})
// 解绑指定事件处理程序
// $btn.off('click', handler)
// 解绑所有事件处理程序
$btn.off('click')三、canvas画布
使用canvas的步骤
1. 创建canvas标签
2. 给canvas标签设置 width height 属性
3. 通过js 获取canvas标签
4. 通过canvas标签获取context画布上下文（画布对象）
5. 通过context绘制画布
1、绘制实心矩形(rectangle)
x: 水平坐标
y: 竖直坐标
坐标原点在canvas左上角
w: 宽度
h: 高度
ctx.fillRect(x, y, w, h)2、镂空矩形
参数和实心矩形相同
ctx.strokeRect(x, y, w, h)3、 清空矩形, 用于清空画布
ctx.clearRect(0, 0, 800, 600)4、绘制实心文字
语法：ctx.fillText(text, x, y, max-width)
text: 要渲染的文本
x,y: 文本渲染的坐标位置
max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度
ctx.fillText('祖国万岁!!', 200, 100, 100)
5、镂空文字
参数和实心文本相同
ctx.strokeText('祖国万岁!!', 200, 300)
6、设置颜色和线宽
ctx.strokeStyle = '#ff0'
ctx.lineWidth = 15
7、画线分两个步骤:
1. 描点（设置路径）
2. 画线（将所描的点连接起来）
// 步骤一
// 使用 beginPath 开启路径
ctx.beginPath()
// 移动笔头但不会记录路径上的线条
ctx.moveTo(400, 100)
// 用线绘制到下一个点
ctx.lineTo(200, 200)
ctx.lineTo(600, 200)
ctx.lineTo(400, 100)
// 将路径封闭
ctx.closePath()
// 注意：beginPath在画新的路径的时候必须调用，closePath选择性调用
// 步骤二
// 为了显示图形需要调用以下函数
// 将路径所包围的图形用纯色来填充
// ctx.fill()
// 将路径用镂空线条进行绘制
ctx.stroke()
ctx.strokeStyle = '#f00'
ctx.beginPath()
ctx.moveTo(400, 400)
ctx.lineTo(500, 400)
// 角度转弧度的公式: rad = (PI / 180) * deg
// 弧线
// ctx.arc(x, y, r, start, end)
//x: 圆心横坐标
//y: 圆心纵坐标
//r: 圆半径
//start: 起始弧度 0度时的方向为水平向右 顺时针为正方向
//end: 结束弧度
ctx.arc(400, 400, 100, 0, Math.PI / 180 * 30)
ctx.closePath()
ctx.fill()
// ctx.stroke()8、绘制图片
image: img 标签的 dom 对象
dx dy: 图片在canvas中的坐标
dWidth dHeight: 图片在canvas中的宽高
sx, sy: 参考图片源，截图的坐标
sWidth, sHeight: 截图的宽高
// 语法:
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);四、多媒体标签、swiper和animate.css
1、多媒体标签
属性： width 标签宽度
height 标签高度
controls 控制面板
muted 静音
autoplay 自动播放
src 媒体源
preload 预载模式
loop 循环
poster 海报
<body>
<!-- <video height="300" src="./video/oceans.mp4" controls muted loop poster="./img/desktop.png"></video> -->
<!-- 使用自动播放+静音，能实现自动播放的效果 -->
<!-- <video height="300" src="./video/oceans.mp4" controls autoplay muted></video> -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio -->
<!-- 音频播放器 -->
<!-- 由于audio和video都属于HTMLMediaElement的实例
所以audio的所有使用方法和video一样
可以通过 instanceof 来判断一个对象是否是某个类型的实例
video instanceof HTMLMediaElement
-->
<!-- <audio src="./audio/moon.mp3" controls loop></audio> -->
<!-- source 标签若有多个，那么浏览器会从上至下加载直到某一个被加载成功为止 -->
<audio controls>
<!-- 数据源标签 -->
<source src="./audio/a44.mp3">
<source src="./audio/b44.mp3">
<source src="./audio/c4.mp3">
</audio>
<video height="300" src="./video/oceans.mp4"></video>
<!-- 自定义控制器 -->
<div>
<button class="play">播放</button>
<button class="pause">暂停</button>
当前时间：<span class="current-time"></span>
总时间：<span class="total-time"></span>
<input class="inp" /><button class="go-to">跳转到此时间</button>
<button class="v-up">音量+</button>
<button class="v-down">音量-</button>
<button class="muted">静音</button>
</div>
<!-- 可以通过以下网站自定义滑块样式
http://danielstern.ca/range.css/?ref=css-tricks#/
-->
<input type="range" min="0" max="100" step="20" value="0"><span class="range-value">0</span>
<br />
<!-- picture -->
<picture>
<!-- source 标签中有多个待选项时，使用srcset规定资源路径 -->
<!-- media 设置媒体查询 -->
<!-- 媒体查询的顺序由大到小 -->
<source srcset="./img/1.png" media="(min-width: 800px)">
<source srcset="./img/2.png" media="(min-width: 600px)">
<img width="500" src="./img/desktop.png">
</picture>
</body>
<script>
let inputRange = document.querySelector('input[type=range]')
let rangeValue = document.querySelector('.range-value')
inputRange.addEventListener('input', () => {
rangeValue.textContent = inputRange.value
})
// 可以使用 Audio 类名来创建 audio 标签
// let audio = new Audio()
// audio.src = './audio/a4.mp3'
// audio.play()
let video = document.querySelector('video')
let playBtn = document.querySelector('.play')
let pauseBtn = document.querySelector('.pause')
let totalTime = document.querySelector('.total-time')
let currentTime = document.querySelector('.current-time')
let inp = document.querySelector('.inp')
let goToBtn = document.querySelector('.go-to')
let vUpBtn = document.querySelector('.v-up')
let vDownBtn = document.querySelector('.v-down')
let mutedBtn = document.querySelector('.muted')
let timer
// 播放
playBtn.addEventListener('click', () => {
video.play()
// 显示总时长
// textContent 标签体的文本内容
// duration 代表媒体时长，单位: 秒
totalTime.textContent = video.duration
currentTime.textContent = video.currentTime
clearInterval(timer)
timer = setInterval(() => {
// currentTime 代表当前播放的时间
currentTime.textContent = video.currentTime
}, 1000)
})
// 暂停
pauseBtn.addEventListener('click', () => {
video.pause()
})
// 跳转进度
goToBtn.addEventListener('click', () => {
let currentTime = Number(inp.value)
// 直接赋值 video 的 currentTime 就可以跳转进度
video.currentTime = currentTime
})
// 音量+
vUpBtn.addEventListener('click', () => {
// volume 是一个 0~1 的数字 用于控制音量
video.volume = video.volume + 0.1 > 1 ? 1 : video.volume + 0.1
})
// 音量-
vDownBtn.addEventListener('click', () => {
// volume 是一个 0~1 的数字 用于控制音量
video.volume = video.volume - 0.1 < 0 ? 0 : video.volume - 0.1
})
// 静音
mutedBtn.addEventListener('click', () => {
video.muted = !video.muted
})
</script>2.swiper.js:是个专门用于播放滚动动画的工具
官网地址：<https://swiperjs.com/>
参考地址：<https://www.swiper.com.cn/>
安装：
1、cdn：从 <https://swiperjs.com/get-started#use-swiper-from-cdn> 找到 `cdn` 地址并引入即可
2、npm：在终端窗口中，通过两句命令 npm init -y 和 npm i swiper
3.animate.css
<link rel="stylesheet" href="./css/animate.min.css">
<style>
h1 {
/* 自定义动画样式 */
/* animation-delay: 10s !important; */
animation-timing-function: cubic-bezier(0, 1.34, 1, -0.4) !important;
animation-duration: 10s !important;
}
</style>
<body>
<!-- 动画必须添加 animate__animated
其次添加动画名称所代表的类名
-->
<!-- <h1 class="animate__animated animate__bounceInDown">hello world</h1> -->
<!-- 辅助类 -->
<!-- 延迟 -->
<!-- <h1 class="animate__animated animate__bounceInDown animate__delay-2s">hello world</h1> -->
<!-- 播放速度
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
-->
<!-- <h1 class="animate__animated animate__bounceInDown animate__slower">hello world</h1> -->
<!-- 动画播放次数
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite
-->
<!-- <h1 class="animate__animated animate__bounceInDown animate__infinite">hello world</h1> -->
<!-- 动态添加动画 -->
<!-- <h1>hello world</h1>
<button class="play">播放</button> -->
<!-- 动画的叠加
只需要添加多级元素来播放不同的动画即可
-->
<!-- <div class="animate__animated animate__fadeInUpBig">
<h1 class="animate__animated animate__bounceInRight">hello world</h1>
</div> -->
<!-- 自定义动画
由于animate.css本质上是使用的 animation 样式播放的动画，所以可以手动强制修改 animation相关样式，来实现自定义
-->
<h1 class="animate__animated animate__bounce">hello world</h1>
</body>
<script>
// 知识点：
// 什么是animate.css?
// 如何安装
// 如何静态播放动画
// 动画辅助类
// 延迟 animation-delay
// 播放速度 animation-duration
// 重复次数
// 如何动态播放动画
// 如何叠加多组动画
// 自定义动画
// 官网：https://animate.style/
// 什么是animate.css?
// animate.css 是一个 css 的动画库
const h1 = document.querySelector('h1')
const playBtn = document.querySelector('.play')
playBtn.addEventListener('click', () => {
// 动态播放动画的原理，实际上就是动态添加类名
h1.classList.add('animate__animated', 'animate__bounceInRight', 'animate__slower')
})
// 动画播放结束事件
h1.addEventListener('animationend', () => {
h1.className = ''
})
</script>
五、微信小程序
1.微信小程序基础
微信小程序是一个基于微信app为开发和运行环境的一个小性软件
1.小程序项目结构
项目下的文件和文件夹的作用如下：
components: 小程序的自定义组件
images: 图片文件夹
pages: 存放页面文件的文件夹
index: 页面文件夹
index.js: 页面的js代码
index.json: 页面的配置
index.wxml: html模板文件
index.wxss: 页面的样式文件
app.js: 微信小程序的程序入口(程序入口：开始执行代码的地方)
app.json: 小程序应用程序的全局配置文件
app.wxss: 小程序的全局样式(.wxss文件是小程序的样式文件)
envList.js: 小程序云环境列表
project.config.json: 小程序项目的配置
sitemap.json: 小程序路由配置
2.常用标签
<!-- page 标签相当于 html 中的 body -->
<page></page>
<!-- view 标签相当于 html 中的 div -->
<view></view>
<!-- text 相当于 html 中的 span -->
<text></text>
<!-- image 相当于 html 中的 img -->
<image></image>
<!-- block 是一个自身不会显示的标签 -->
<block></block>3.单位rem和rpx
rem 是 html 中的长度单位，代表相对根节点(html)上字体的大小
rpx 是 微信wxml中的长度单位，750px 屏幕的宽度下，1rpx = 1px
所以 px 到 rpx 的转换公式为:`rpx = (750 / 当前设备宽度) * px`
4.模板语法
//插值
//作用：用于将变量值插入页面
//语法：
<!-- name 变量，定义在 js 文件的 data 中 -->
{{name}}
//注意：插值运算的花括号中{{}}，填写的内容其实是js表达式
## 循环渲染
作用：可以将数组数据循环显示到页面中
语法：
```wxml
<!-- wx: 开头的写在标签头部的东西 称为指令 -->
<!-- array: 来自js data中的数组 -->
<!-- 使用 wx:for 一定要加上 wx:key，wx:key的值是array对象中的不可重复的属性 -->
<view wx:for="{{array}}" wx:key="id">
<!-- index: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前索引 -->
<!-- item: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前数组成员 -->
{{index}}: {{item}}
</view>
```
## 条件渲染
可以根据条件判断，选择性的渲染页面
语法：
```wxml
<view wx:for="{{table}}" wx:key="name">
<text>{{index}}: 姓名 = {{item.name}}; 年龄 = {{item.age}}; 性别 = </text>
<!-- wx:if 指令的值为布尔表达式，为true是渲染该节点，否则不渲染 -->
<text wx:if="{{item.sex==='male'}}">男</text>
<!-- wx:if 可以和 wx:elif、wx:else 连用 -->
<text wx:elif="{{item.sex==='female'}}">女</text>
<text wx:else>其他</text>
</view>
```2.小程序应用开发
1.阿里iconfont的使用
阿里iconfont是阿里的矢量图库，图库提供各式各样的图标
矢量图描述了绘图时所使用的坐标点，在等比例缩放图片时，图片不会变模糊。
图库使用流程:
网址：<https://www.iconfont.cn/>
安装流程：
1. 选择图标，加入自己的项目
2. 下载自己项目
3. 解压下载的zip文件
4. 引入解压文件中的 iconfont.css 文件
使用方法：
1. 使用 span 标签，给标签 class 加入 iconfont
2. 在自己的项目中选择一个图标的 class
3. 在 span 标签中加入所选 class 即可
注意：iconfont图标被当作字符使用，所以调节大小时，使用 font-size 属性
在微信小程序中使用iconfont
1. 在 iconfont 网站的项目中点击 `项目设置` 设置字体类型为 `Base64` 然后下载项目
2. 将 iconfont.css 改名为 iconfont.wxss
3. 将 iconfont.wxss 放入小程序项目目录下
4. 在小程序的 app.wxss 第一行代码加入 @import '...' (此处是iconfont.wxss文件路径)
安装好后其余使用方法和 html 中的方法一样
2.页面底部选项卡
在 app.json 中 增加 tabBar 配置就能添加选项卡
{
"tabBar": {
"selectedColor": "#444", // 选中的按钮的文本颜色
"list": [ // 按钮列表
{
"pagePath": "pages/read/read", // 跳转的页面路径
"text": "领读", // 按钮的文字描述
"iconPath": "image/tab_icon1.png", // 未选中时的图标路径
"selectedIconPath": "image/tab_icon1_active.png" // 选中时的图标路径
}
]
},
}注意：要显示选项卡，按钮列表中，必须要有一个配置的 pagePath 属性值，是小程序的入口页面
注意：底部选项卡指定的页面不能是分包里的页面
自定义底部选项卡图标
可以在阿里适量图库下载需要的图标（一般来说是一个镂空图标和一个填充图标）
将下载后的图片复制到小程序项目目录下，然后再tabBar配置选项中配置即可
3.导航与页面间传参
导航：引导页面跳转到指定位置
导航方法有两种：1. 页面标签进行导航，类似 html 中的 a 标签；2. 使用js进行导航，类似于 location.href
## 使用 navigator 标签
文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
语法：
```html
<!-- url：要跳转到的页面路径 -->
<!-- 若要传递参数，可以在url后面增加 ?key=value 的参数 -->
<navigator url="path"></navigator>
```
## 使用 wx.navigateTo 函数
文档：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
语法：
```js
function(){
wx.navigateTo({
// path: 要跳转的路径
// key=value: 要传递的参数
url: 'path?key=value'
})
}
// wx.navigateTo 跳转到某页 会新增堆栈
// wx.redirectTo 重定向到某页 不会新增堆栈
// wx.navigateBack 返回
```
> 参数的获取可以在另一个页面的 onLoad 声明周期函数中 options 变量中存放着参数
3.云开发
云环境：云端（远程端）的运行程序的平台
云函数：云函数就是在云端（远程端）调用的函数
调用函数时，首先发起网络通信，让服务器调用函数，然后通过网络返回结果
定义云函数：
1. 在编辑器的 cloudFunctions 文件夹中右键 新建node.js云函数
2. 编辑index.js中的main函数 返回想要的返回值
// index.js 是入口文件，云函数被调用时会执行该文件导出的 main 方法
// event 包含了调用端（小程序端）调用该函数时传过来的参数，同时还包含了可以通过 getWXContext 方法获取的用户登录态 `openId` 和小程序 `appId` 信息
const cloud = require('wx-server-sdk')
exports.main = async (event, context) => {
let a = event.a // 获取函数参数
let b = event.b // 获取函数参数
let { OPENID, APPID } = cloud.getWXContext() // 这里获取到的 openId 和 appId 是可信的
let sum = a + b
return {
OPENID,
APPID,
sum
}
}调用云函数：
1. 必须先初始化云环境
// 在 app.js 的 onLaunch 中初始化云环境
onLaunch() {
wx.cloud.init({
// env 参数说明：
// env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境（第一个创建的环境）
env: 'cloud1-xxxxxx',
traceUser: true,
})
}2. 初始化完就可以使用 wx.cloud.callFunctions 调用函数了
// 调用云函数
wx.cloud.callFunction({
// 云函数名
name: 'now',
// 要传递的参数
data: {
x: 1,
y: 2
},
// 通信成功的回调
success(res) {
console.log('success');
console.log(res);
console.log(new Date(res.result.now).toString());
},
// 通信失败回调
fail(reason) {
console.error('error');
console.error(reason);
},
// 无论成功还是失败
// 通信结束后都会调用complete
complete(res) {
console.info('complete');
console.info(res)
}
})云数据库：数据库软件在服务器上运行
增删改查是数据库的四个操作
1. 增：添加数据
2. 删：删除数据
3. 改：修改数据
4. 查：查询数据
//小程序中使用数据库
//初始化数据库连接
//1. 在 app.js 的 onLaunch 中 初始化数据库
//app.js
App({
onLaunch: function () {
......
this.globalData = {}
// 初始化数据库
const db = wx.cloud.database()
// 在全局对象中保存db对象
this.globalData.db = db
}
})
//2. 在使用数据库的页面中获取db对象
const db = getApp().globalData.db
//3. 获取要操作的数据库表
// 获取数据库表 参数为表名
const collection = db.collection('collectionName')
//4. 通过表对象执行数据库操作
//插入数据
insert() {
// 获取插入数据的表格
// 参数是表格名
const students = db.collection('students')
// 使用add函数插入数据
students.add({
// 要插入到数据库的数据
data: {
name: '法外狂徒张三',
sex: 'other',
age: 30
},
success(res) {
console.log(res);
},
fail(reason) {
console.error(reason);
}
})
}
//查询数据
//从形式上来分，可以分为 列表查询和分页查询
//列表查询：适用于手机等移动端查询一个数据列表的查询方法
//分页查询：用于将数据像书页一样分页码进行查询
//此处以列表查询为例
// 获取数据库表
const students = db.collection('students')
// 查询数据并按照数据的更新时间进行排序
// orderBy 函数用于数据排序
// 第一个参数：排序字段
// 第二个参数：排序方法（是升序asc还是降序desc）
// limit 用于规定返回数据量
// get 查询函数 通常放在链式调用的尾部
students.orderBy('updateTime', 'desc').limit(2).get({
success(res) {
console.log(res);
}
})
// 添加查询条件和查询指令
// 查询指令：用于规定如何查询的一些查询方法
// 文档地址：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/query.html
const _ = db.command // 获取指令对象
// where 添加查询约束（where是约束的意思）
students.orderBy('updateTime', 'desc').limit(2).where({
// 参数是个对象
// key 要添加约束的对象
// value 什么样的约束 此处的例子 是查询 updateTime 字段小于指定值的数据
updateTime: _.lt(new Date('Mon Sep 13 2021 09:40:13 GMT+0800'))
}).get({
success(res) {
console.log(res);
}
})
//更新数据
update() {
const students = db.collection('students')
const _ = db.command // 获取指令对象
// 获取对应id的文档对象
const student = students.doc('cd045e75613eabf80d332db93f080137')
student.update({
// data 要修改的字段集合
data: {
// 规范的做法是使用 set 指令经行修改
// name: _.set('修成正果张三'),
name: '修成正果张三',
updateTime: new Date() // 更新时间
},
success(res) {
console.log(res);
}
})
// 多条数据的更新如下
// 调用表格的 where 函数添加查询条件
students.where({
sex: 'male'
}).update({ // 调用 update 函数进行更新
data: {
age: 16
},
success(res){}
})
}
//删除数据
remove() {
const students = db.collection('students')
// 获取对应id的文档对象
// 此处的id就是想要删除的数据的id
const student = students.doc('cd045e75613eabf80d332db93f080137')
// remove 删除对应id的数据
student.remove({
success(res) {
console.log(res);
}
})
// 批量删除
// 调用表格的 where 函数添加查询条件
students.where({
sex: 'male'
}).remove({ // 调用 remove 函数进行删除
success(res){}
})
}
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
