目录
属性值：
向右平移x像素向下平移y像素
向右平移x像素
向下平移y像素
像外平移z像素
绕中心点旋转
绕X轴旋转
绕Y轴旋转
绕Z轴旋转
x为缩放倍数
x为负数的时候代表反向
X轴缩放
Y轴缩放
Z轴缩放
倾斜角度
transform:translateX(100px) rotate(45deg) scale(0.5);
待选值： top bottom left right center 还可以填入像素值
eq读取对应索引位置的jQuery对象
let li = $lis.eq(1)
get读取对应索引位置的dom对象
let li = $lis.get(2)
某个元素追加一个子节点
$(document.body).append($box)
追加一个子节点到另一个元素中
$box.appendTo($(document.body))
某个元素追加一个子节点到头部
$box.prepend($box)
追加一个子节点到另一个元素的头部
$box.prependTo($(document.body))
某个元素的前面追加一个元素
$box2.before($box)
某个元素的后面添加一个元素
$box.after($box)
某个元素被添加到另一个元素的前面
$box.insertBefore($box2)
1、显示元素
$box.show()
2、隐藏元素
$box.hide()
3、开关元素
$box.toggle()
- $box.animate({
- marginleft:300px
- fontsize:64
- },2000,"linear",()=>{
- //动画播放结束后的回调函数
- console.log("动画播放完毕")
- })
1、渐入动画
$box.fadeIn(3000)
2、渐出动画
$box.fadeOut(3000)
3、开关渐变
$box.fadeToggle({
duration:5000
easing:"swing/linear"
step:(a)=>{
console.log("a")
}
})
4、滑上动画
$box.slideUp()
5、滑下动画
$box.slideDown()
6、滑动开关
$box.slideToggle()
1、使用事件属性
$btn.click(()=>{})
2、使用事件监听器
$btn.addEventListener("click",()=>{})
$lis.each((index,item)=>{})
通过each函数来遍历
1、读取样式
$box.css("width")
2、读取多个样式
$box.css(["width","height"."color"])
3、赋值样式
$box.css("width","300px")
1、添加类
$box.addClass("active")
2、判断是否存在某个类名
$box.hasClass("active")
3、删除类
$box.removeClass("active")
1、读取属性
$box.attr("class")
2、赋值属性
$box.attr("class","active")
3、删除属性
$box.removeAttr("class")
1、text(相当于dom中的innerText)
$p.text('hello world')
2、html(相当于dom中的innerHTML)
$p.html('hello world')
创建canvas标签
给canvas标签设置 width height 属性
通过js 获取canvas标签
通过canvas标签获取context画布上下文（画布对象）
通过context绘制画布
1、绘制实心矩形
ctx.fillRect(x, y, w, h)
2、绘制镂空矩形
ctx.strokeRect(x,y,w,h)
备注：
x: 水平坐标
y: 竖直坐标
坐标原点在canvas左上角
w: 宽度
h: 高度
ctx.fillText(text,x,y)
ctx.strokeText(text,x,y)
备注：
text：文本内容
x：水平坐标
y：竖直坐标
画线分为两个步骤：
1、描点
2、画线
步骤一(画图)：
1、使用beginPath开启路径
ctx.beginPath()
2、移动笔头但不会记录路径
ctx.moveTo(100,100)
3、用线绘制到下一个点
ctx.lineTo(200,200)
4、将路径封闭(可选择不封闭)
ctx.closePath()
步骤二(显示)：
步骤一只是画线，但是还没有显示图形，
为了显示图形还需要调用以下函数
1、将路径所包围的图形用纯色来填充
ctx.fill()
2、将路径用镂空线条来进行绘制
ctx.stroke()
角度转弧度的公式: rad = (PI / 180) * deg
画弧公式：
ctx.arc(x, y, r, start, end)
x: 圆心横坐标
y: 圆心纵坐标
r: 圆半径
start: 起始弧度 0度时的方向为水平向右 顺时针为正方向
end: 结束弧度
语法:
语法一： ctx.drawImage(image, dx, dy);
语法二：ctx.drawImage(image, dx, dy, dWidth, dHeight);
语法三：ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
参数解释：
image: img 标签的 dom 对象
dx dy: 图片在canvas中的坐标
dWidth dHeight: 图片在canvas中的宽高
sx, sy: 参考图片源，截图的坐标
sWidth, sHeight: 截图的宽高
获取像素值的API: ctx.getImageData(sx,sy,sw,sh)
应用一个imageDate数据： ctx.putImageData(imageData,sx,sy)
参数解释：
sx、sy:截取/渲染canvas中的坐标值
sw、sh：截取图片的宽高
imageData：添加图像像素点的集合
注意：获取到的像素点数组，每四个代表一个像素点！！
思路：计算出每个像素点的灰度值，然后给每个像素点的rgb赋值为灰度值
灰度公式：g = r0.299 + g0.587 + b*0.114
第一步：
计算出每个像素点的灰度值
g = r0.299 + g0.587 + b*0.114
第二步：
然后给rgb赋值为灰度值
imageData.data[i] = g
imageData.data[i + 1] = g
imageData.data[i + 2] = g
思路：首先计算出每个像素点的灰度值，然后判断每个像素点的值更趋近于白色还是黑色，如果更趋金于黑色就给rgb赋值为0，如果更趋近白色，就给rgb赋值为255
步骤一：
获取当前像素点的灰度值，
步骤二：
判断当前像素点更接近黑色还是白色
let temp = 255/2
color = g>temp?255:0
步骤三：
赋值rgb为黑色或者白色
imageData.data[i] = color
imageData.data[i + 1] = color
imageData.data[i + 2] = color
思路：反转色就是求rgb值的补值
imageData.data[i] = 255 - imageData.data[i]
imageData.data[i + 1] = 255 - imageData.data[i + 1]
imageData.data[i + 2] = 255 - imageData.data[i + 2]
属性：
width 标签宽度
height 标签高度
controls 控制面板
muted 静音
autoplay 自动播放
src 媒体源
preload 预载模式
loop 循环
poster 海报
基本用法：
使用自动播放+静音，能实现自动播放的效果
由于audio和video都属于HTMLMediaElement实例，所以audio所有使用方法与video一样
官网文档地址：Swiper API
使用npm安装
从npm安装swiper
$ npm install swiper
1、引入
引入下载资源包中的swiper-bundle.css和swiper-bundle.js
2、添加swiper HTML布局
...
3、swiper css样式/大小
.swiper {
width: 600px;
height: 300px;
}
参考地址：Swiper API
1、在JS中初始化swiper
const swiper = new Swiper('.swiper', {
// 滚动方向
direction: 'horizontal',
// 循环
loop: false,
// 特效
effect: 'coverflow',
// allowSlideNext: false,
// 分页模块
pagination: {
el: '.swiper-pagination',
},
// 导航模块
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 滚动条模块
scrollbar: {
el: '.swiper-scrollbar',
},
});
参考地址：Swiper API
1、添加事件配置
// 添加事件配置
on: {
// 当前激活索引发生变化事件
activeIndexChange(swiper) {
console.log('索引发生了变化');
// swiper 实例对象
console.log(swiper);
// activeIndex 当前激活页的索引
console.log(swiper.activeIndex);
}
}
2、使用on off绑定和解绑事件
// on off 绑定和解绑事件
// 滑块发生变化且动画播放完成事件
swiper.on('slideChangeTransitionEnd', (swiper) => {
console.log('滑块变化，动画播放完成');
console.log(swiper.activeIndex);
})
// 到达底部事件
swiper.on('reachEnd', (swiper) => {
console.log('已到达底部');
console.log(swiper.activeIndex);
})
// 解绑事件
swiper.off('slideChangeTransitionEnd')
参考地址：Swiper API
参考地址：Swiper API
官网参考文档：Animate.css | A cross-browser library of CSS animations.
使用npm安装：
新建一个文件夹打开集成终端
npm install animate.css --save
引入下载资源包中的animate.css或animate.min.css
动画必须添加animate_animated
hello world
延迟
animate__delay-2s
播放速度
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
动画播放次数
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite
由于animate.css本质上是使用的 animation 样式播放的动画，所以可以手动强制修改 animation相关样式，来实现自定义
h1 {
/* 自定义动画样式 */
/* animation-delay: 10s !important; */
animation-timing-function: cubic-bezier(0, 1.34, 1, -0.4) !important;
animation-duration: 10s !important;
}
注意：需要加！important
- Page({
- read() {
- console.log('read')
- // 函数中的 this 代表当前页面对象模型
- console.log(this)
- // 谁用this.data读取页面属性
- console.log(this.data.table)
- }
- })
给页面属性赋值的方法：
- Page({
- write() {
- // 使用this.setData函数进行赋值，参数是个json对象，需要修改哪个属性，就给该对象添加哪个属性
- this.setData({title: '天龙八部'})
- }
- })
安装流程：
选择图标，加入自己的项目
下载自己项目
解压下载的zip文件
引入解压文件中的 iconfont.css 文件
使用方法：
使用 span 标签，给标签 class 加入 iconfont
在自己的项目中选择一个图标的 class
在 span 标签中加入所选 class 即可
注意：iconfont图标被当作字符使用，所以调节大小时，使用 font-size 属性
在 iconfont 网站的项目中点击 项目设置 设置字体类型为 Base64 然后下载项目
将 iconfont.css 改名为 iconfont.wxss
将 iconfont.wxss 放入小程序项目目录下
在小程序的 app.wxss 第一行代码加入 @import '...' (此处是iconfont.wxss文件路径)
安装好后其余使用方法和 html 中的方法一样
配置项：全局配置 | 微信开放文档
在 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配置选项中配置即可
导航：引导页面跳转到指定位置
导航方法有两种：1. 页面标签进行导航，类似 html 中的 a 标签；2. 使用js进行导航，类似于 location.href
语法：
文档：wx.navigateTo(Object object) | 微信开放文档
语法：
- function(){
- wx.navigateTo({
- // path: 要跳转的路径
- // key=value: 要传递的参数
- url: 'path?key=value'
- })
- }
-
- // wx.navigateTo 跳转到某页 会新增堆栈
- // wx.redirectTo 重定向到某页 不会新增堆栈
- // wx.navigateBack 返回
参数的获取可以在另一个页面的 onLoad 声明周期函数中 options 变量中存放着参数
// 获取小程序实例对象 const app = getApp() app.globalData.x = 1 // 给小程序的全局对象赋值 // 只要不关闭小程序就能通过小程序全局对象保存参数
什么叫持久化？持久化就是长期存储数据到磁盘中，关闭应用程序后，存储的数据还在
异步是什么？异步就是程序执行的时候不会等待或卡顿
同步是什么？同步的程序在调用的时候会等待或卡顿
异步存储 wx.setStorage(Object object) | 微信开放文档 wx.setStorage(Object object)
wx.getStorage(Object object) | 微信开放文档 wx.getStorage(Object object)
异步删除 wx.removeStorage(Object object) | 微信开放文档 wx.removeStorage(Object object)
下面的是上述方法的同步版本
any wx.getStorageSync(string key) | 微信开放文档