前端深度学习

1,css动画

1，动画原理及2D变换

transform: 变换，用于描述物体的位置旋转缩放
translate: 平移
rotate 旋转 参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180° 沿轴进行顺时针旋转为正方向，0°代表竖直向上
scale 缩放 参数：比率 1 为原本大小
skew 倾斜
设置transform的原点:transform-origin

2，过渡动画

transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态,当中应该包含
定义初始状态
指定css属性能够产生过度动画
动画播放的时长
动画播放的速度曲线
动画播放延迟

3，3d变换和animation动画

1，animation动画

动画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);
            }
        }
        // animationPlayState 动画播放状态
        // paused 暂停
        // running 播放

2，3d变换

.scene {
            height: 100vh;

            /* 变换样式
                perserve-3d 代表将元素变成一个3D空间
            */
            transform-style: preserve-3d;

            /* 灭点到屏幕的距离 */
            /* 若三维场景中不添加 perspective 则三维场景是一个正交视图 */
            perspective: 300px;

            /* 透视原点（灭点所在的坐标）
                原点为 0 值时，所在位置是scene的左上角
            */
            /* perspective-origin: center center; */
            perspective-origin: 0 0;
        }

3d变换 是让我们的元素看上去在三维空间中发生变换（平移 旋转 缩放 倾斜）

总结：
要使用3d变换需要依序执行以下步骤：
1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;
2. 在父元素上设置透视距离：perspective: 100px;
3. 给场景添加演员，给场景元素添加子元素
4. 在子元素上使用3d变换

4，渐变色分栏布局与响应式

1，渐变色

 /* 背景的渐变色实际上是设置的 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);

2，响应式布局

 /* 响应式是什么？
            当某个事情发生后，立即做出反应就叫响应式
            此处我们讨论的是页面的响应式
        */

        /* 什么是页面的响应式？
            页面的元素样式会根据页面的宽度做出变化
        */

        /* 为什么要使用页面响应式
            为了让同一个页面能够适配不同的设备
        */

        /* 如何实现响应式？ */
        /* 使用媒体查询，来实现响应式布局 */
        /* 媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式 */

        /* 语法：@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;
            }
        }

2,jquery

使用 $() 函数获取一个 jQuery 对象
eq 读取对应索引位置的jquery对象
get 读取对应索引位置的dom对象

// 某个元素追加一个子节点
// $(document.body).append($box)

// 追加一个子节点到另一个元素中
// $box.appendTo($(document.body))

// 某个元素追加一个节点到头部
// $(document.body).prepend($box)

// 追加一个子节点到另一个元素的头部
// $box.prependTo($(document.body))
// 某个元素的前面追加一个元素
// $box2.before($box)

// 某个元素被添加到另一个元素的前面
// $box.insertBefore($box2)

// 某个元素的后面添加一个元素
// $box2.after($box)

// 某个元素被添加到另一个元素的后面
// $box.insertAfter($box2)

index 遍历的数组成员的索引
value 对应索引元素的样式值

    // 添加类
    $box.addClass('active')

    // 判断是否存在某个类名
    $box.hasClass('active')

    // 删除类
    $box.removeClass('active')
    // 读取属性
    let clazz = $box.attr('class')
    console.log(clazz);

    // 赋值属性
    $box.attr('my-data', 'hello world')

    // 删除属性
    $box.removeAttr('class')
    // 相当于dom对象的innerText
    $p.text('<span style="color: red">hello</span>&nbsp;world')

    // 相当于dom对象的innerHTML
    $p.html('<span style="color: red">hello</span>&nbsp;world')

3,canvas画布

使用canvas的步骤
1. 创建canvas标签
2. 给canvas标签设置 width height 属性
3. 通过js 获取canvas标签
4. 通过canvas标签获取context画布上下文（画布对象）
5. 通过context绘制画布

// 绘制实心矩形(rectangle)
// ctx.fillRect(x, y, w, h)
// x: 水平坐标
// y: 竖直坐标
// 坐标原点在canvas左上角
// w: 宽度



// 绘制实心文字
// 语法：ctx.fillText(text, x, y, max-width)
// text: 要渲染的文本
// x,y: 文本渲染的坐标位置
// max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度
// ctx.fillText('祖国万岁!!', 200, 100, 100)




    // 设置颜色和线宽
    ctx.strokeStyle = '#ff0'
    ctx.lineWidth = 15

    // 画线分两个步骤:
    // 1. 描点（设置路径）
    // 2. 画线（将所描的点连接起来）

    // 步骤一
    // 使用 beginPath 开启路径
    ctx.beginPath()
    // 移动笔头但不会记录路径上的线条
    ctx.moveTo(400, 100)
    // 用线绘制到下一个点
    ctx.lineTo(200, 200)
    ctx.lineTo(600, 200)
    ctx.lineTo(400, 100)

    // 将路径封闭
    ctx.closePath()


	// 步骤二
    // 为了显示图形需要调用以下函数
    // 将路径所包围的图形用纯色来填充
    // ctx.fill()
    // 将路径用镂空线条进行绘制
    ctx.stroke()


	绘制图片
	// 语法:
    // 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: 截图的宽高

4,多媒体标签

5,微信小程序

微信小程序和前端学习差不多，差别不大

1，基础

1，底部选项卡

在 app.json 中 增加 tabBar 配置就能添加选项卡

{
    "tabBar": {
        "selectedColor": "#444", // 选中的按钮的文本颜色
        "list": [ // 按钮列表
            {
                "pagePath": "pages/read/read", // 跳转的页面路径
                "text": "领读", // 按钮的文字描述
                "iconPath": "image/tab_icon1.png", // 未选中时的图标路径
                "selectedIconPath": "image/tab_icon1_active.png" // 选中时的图标路径
            }
        ]
    },
}

2，导航与页面间传参

语法：

function(){
    wx.navigateTo({
        // path: 要跳转的路径
        // key=value: 要传递的参数
        url: 'path?key=value'
    })
}

// wx.navigateTo 跳转到某页 会新增堆栈
// wx.redirectTo 重定向到某页 不会新增堆栈
// wx.navigateBack 返回

3，获取页面元素

获取元素属性：

// fields 接收两个参数,
// 第一个参数：查询属性的配置
// 第二个参数：查询结束的回调
nodeRef.fields({
    dataset: true, // 自定义属性，也就是标签上 data- 开头的属性
    size: true, // 元素的宽高
    rect: true, // 元素的位置 top left right bottom
    properties: ['url'], // 元素的固有属性，不能查询 id class style 属性和绑定的事件属性
    computedStyle: ['backgroundColor', 'fontSize'] // 查询样式
}, (res)=>{
    // 该 res 就是查询的结果
    console.log(res)
})

4，事件

事件绑定语法:

<!-- key: bind catch capture-bind capture-catch 中的任意一个 -->
<!-- eventName: 事件名称 -->
<!-- eventHandler: 事件处理程序，值是一个字符串，代表对应js文件的方法名 -->
<button key:eventName="eventHandler">btn</button>

<!-- 例如绑定点击事件 -->
<button bind:tap="btnClick">click</button>

<!-- bind 和 catch 后面的冒号可以省略 -->
<button catchtap="btnClick">click</button>

5，授权

• 读取当前权限
• 判断是否存在权限
• 不存在权限就进行授权

// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
wx.getSetting({
    success(res) {
        if (!res.authSetting['scope.record']) {
            // 调用 wx.authorize 进行授权
            wx.authorize({
                scope: 'scope.record',
                success() {
                    // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
                    wx.startRecord();
                },
            });
        }
    },
});

6，组件

配置

// 在组件的配置中添加 properties 配置
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 声明属性 value
    value: {
      type: String, // 属性类型 可以通过设置 optionalTypes 来接收多种类型的数据
      value: 'o,k', // 属性默认值
      // 属性变化监听器
      observer: function (newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
        console.log(this)
      }
    }
  },
})

组件内设置属性的方法和 Page 设置 data 是一样的

// 使用 setData 设置属性
this.setData({value: 'hello'})

在 Page 中注册组件后就可以将组件作为标签使用了

// 注册组件
{
    "useingComponent": {
        "my-component": "path/to/component"
    }
}

<!-- 使用组件 -->
<!-- _value 是当前页面 data 中的值 -->
<my-component value="{{_value}}"></my-component>

2，云开发

1，云函数

云函数就是在云端（远程端）调用的函数

调用函数时，首先发起网络通信，让服务器调用函数，然后通过网络返回结果

定义云函数

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)
    }
})

2，云数据库

数据库是一个用于存放和组织数据的软件
是云数据库数据库软件在服务器上运行

小程序云开发使用的是文档型数据库，所以数据库中每条数据都是一个json对象，每个数据都有一个 _id 属性，该属性是本条数据的唯一标识符
增删改查是数据库的四个操作

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){}
    })
}

6，总结

这段时间的学习感觉理论知识偏多，考验记忆，理解能力也要能跟得上，反而是要写的代码比较简单

这篇好文章是转载于：学新通技术网