first commit

历届学生/吴欣阳/项目开发/上课项目/QQ导航.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body,
+        ul,
+        li,
+        p,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        .tag {
+            background: #1479d7;
+            overflow: hidden;
+            height: 50px;
+            width: 1400px;
+            margin: 0 auto;
+            padding-left: 20px;
+            box-sizing: border-box;
+            border-radius: 3px;
+        }
+
+        .tag li {
+            float: left;
+            line-height: 50px;
+            width: 79px;
+            text-align: center;
+        }
+
+        .tag li a {
+            color: white;
+            padding: 4px 5px;
+        }
+
+        .tag li a:hover {
+            color: #14539a;
+            background-color: #cbe1ed;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="tag">
+        <li><a href="">新闻</a></li>
+        <li><a href="">视频</a></li>
+        <li><a href="">图片</a></li>
+        <li><a href="">军事</a></li>
+        <li><a href="">NBA</a></li>
+        <li><a href="">娱乐</a></li>
+        <li><a href="">财经</a></li>
+        <li><a href="">科技</a></li>
+        <li><a href="">时尚</a></li>
+        <li><a href="">汽车</a></li>
+        <li><a href="">房产</a></li>
+        <li><a href="">教育</a></li>
+        <li><a href="">文化</a></li>
+        <li><a href="">星座</a></li>
+        <li><a href="">游戏</a></li>
+
+    </ul>
+</body>
+
+</html>

历届学生/吴欣阳/项目开发/上课项目/ajax案例/css/previewImage.css

@@ -0,0 +1,119 @@
+body,
+ul,
+li,
+a,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+}
+
+.smallImg {
+    width: 100px;
+}
+
+.hidden {
+    display: none;
+}
+
+.zhezhao {
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 998;
+    opacity: .5;
+}
+
+.preview {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+}
+
+.closed {
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    text-align: center;
+    line-height: 35px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    border-radius: 100%;
+    z-index: 999;
+}
+
+.action .d {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    border-color: #fff;
+    position: absolute;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 100%;
+    z-index: 999;
+}
+
+.left {
+    left: 40px;
+}
+
+.right {
+    right: 40px;
+}
+
+.operation {
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    border-color: #fff;
+    position: absolute;
+    border-radius: 22px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.operation li {}
+
+.operation li i {
+    font-size: 23px;
+    color: #fff;
+}
+
+.xz {
+    display: inline-block;
+    transform: rotateY(180deg);
+}
+
+.mainImg {
+    height: 100%;
+}

历届学生/吴欣阳/项目开发/上课项目/ajax案例/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+<ul>
+
+</ul>
+
+<button>下一页</button>
+    
+</body>
+<script src="js/ajax.js"></script>
+<script src="js/utils.js"></script>
+<script>
+
+
+    var page = 0, totalPage = 0;
+
+    function getIndexList() {
+        ajax.get({
+            url: 'http://127.0.0.1:3000/api/json/classList',
+            data: {
+                id: 130,
+                page: page
+            },
+            success: (res) => {
+                totalPage = res.result.total_page
+                renderList(res.result)
+            },
+            error: (err) => {
+                console.log(err);
+            },
+        })
+    }
+
+    function renderList(list) {
+        list.data.forEach(v => {
+            $("ul").innerHTML +=
+                `
+                    <li>
+                       <a href="./info.html?id=${v.id}">
+                        <img width="200" src="${replace(v.preview)}" alt="">
+                        <p>${v.title}</p>
+                       </a>
+                    </li>
+                `
+        })
+    }
+
+    $("button").onclick = function () {
+        page+=1;
+        if (page <= totalPage) {
+            getIndexList();
+        } else {
+            alert("没有数据了")
+        }
+    }
+
+    getIndexList()
+
+
+
+</script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/ajax案例/info.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="./css/previewImage.css">
+  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+</head>
+<body>
+  <div class="info">
+
+  </div>
+<button>下一页</button>
+</body>
+<script src="js/ajax.js"></script>
+<script src="js/utils.js"></script>
+<script src="./js/previewImage.js"></script>
+<script>
+  var id = location.search.split("=")[1],
+     page = 1, total_page = 0, beishu = -1;
+
+  function GetInfo() {
+    ajax.get({
+      url: 'http://127.0.0.1:3000/api/json/info',
+      data: {
+        id: id,
+        page: page
+      },
+      success: (res) => {
+        total_page = res.result.total_page;
+        beishu+=1;
+        renderImg(res.result.data)
+      },
+      error: (err) => {
+        console.log(err);
+      },
+    })
+  }
+
+  function renderImg(list) {
+    var newImg = []
+
+    list.forEach(v => {
+      newImg.push(replace(v.src))
+      $(".info").innerHTML += `<img width="300" src="${replace(v.src)}" alt="">`
+    });
+
+    _(".info img").forEach((v,i) => {
+      v.onclick = () => {
+        console.log("newImg: ", newImg)
+        console.log("i: ", i)
+        var c = new PreviewImage({
+          image: newImg,
+          showIndex: i - (beishu * 5)
+        });
+        c = null
+      }
+    })
+  }
+
+  $("button").onclick = function () {
+    page+=1;
+    if (page <= total_page) {
+      GetInfo();
+    } else {
+      alert("没有数据了")
+    }
+  }
+
+  GetInfo()
+
+
+</script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/ajax案例/js/ajax.js

@@ -0,0 +1,48 @@
+class Ajax {
+
+    // url 接口地址
+    // 请求参数
+    // 请求方法
+    // 请求成功的回调
+    // 请求失败的回调
+
+    http = new XMLHttpRequest();
+    constructor () {
+    }
+
+    //http://127.0.0.1:3000/api/json/index ?id=1&page=2
+    get(option) {
+        var params = ""
+        for (const key in option.data) {
+            params+= `&${key}=${option.data[key]}`
+        }
+        params = params.replace("&", "?")
+        option.url = option.url + params
+
+        this.http.open("GET", option.url);
+        this.http.send()
+        this.onreadystatechange(option)
+    }
+
+    post(option) {
+      this.http.open("POST", option.url);
+      this.http.setRequestHeader('Content-Type', 'application/josn');
+      this.http.send(JSON.stringify(option.data))
+      this.onreadystatechange(option)
+    }
+
+
+    onreadystatechange(callback) {
+        this.http.onreadystatechange = () => {
+            if (this.http.readyState == 4) {
+              if (this.http.status == 200) {
+                callback.success(JSON.parse(this.http.response))
+              }  else {
+                callback.error(this.http)
+              }
+            }
+          }
+    }
+}
+
+var ajax = new Ajax()

历届学生/吴欣阳/项目开发/上课项目/ajax案例/js/previewImage.js

@@ -0,0 +1,267 @@
+class PreviewImage {
+
+    // 属性都是全局的
+    body = this.$("body");
+    option = {};
+    isBackMove = false;
+
+    x1 = 0;
+    y1 = 0;
+    l = 0;
+    t = 0;
+
+    constructor(option) {
+        if (!option.hasOwnProperty("image")) {
+            throw new Error("参数image缺少，请检查")
+        }
+
+        if (!option.hasOwnProperty("showIndex")) {
+            throw new Error("参数showIndex缺少，请检查")
+        }
+
+        this.option = option
+        console.log(this.option);
+
+        this.created();
+        this.BindClose();
+
+        this.BindPrevious();
+        this.BindNext();
+        this.BindSuoXiao();
+        this.BindFangDa();
+        this.BindFullScreen();
+
+        this.BindXuanZhuan();
+        this.MouseEvent();
+    }
+
+    // 1：把图片预览的html插入到网页上
+    created() {
+        this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
+                        <div class="zhezhao"></div>
+                        <div class="preview">
+                            <div class="closed">x</div>
+
+                            <div class="action">
+                                <div class="left d">&lt;</div>
+                                <div class="right d">&gt;</div>
+                            </div>
+
+                            <img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
+                                src="${this.option.image[this.option.showIndex]}" alt="">
+
+                            <ul class="operation">
+                                <li>
+                                    <i class="iconfont icon-suoxiao suoxiao"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fangda fangda"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fullscreen fullscreen"></i>
+                                </li>
+                                <li class="xz">
+                                    <i class="iconfont icon-shuaxin leftshuaxin"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-shuaxin rightshuaxin"></i>
+                                </li>
+                            </ul>
+
+
+                        </div>
+                    </div>`)
+
+    }
+
+    // 缩小
+    BindSuoXiao() {
+        this.$(".suoxiao").onclick = () => {
+            var value = this.Scale() - 0.2;
+            if (value != 0) {
+                this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
+            }
+        }
+    }
+
+    // 全屏
+    BindFullScreen() {
+
+        this.$(".fullscreen").onclick = () => {
+            // true 缩小
+            if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
+                this.$(".fullscreen").classList.remove("icon-fullscreen")
+                this.$(".fullscreen").classList.add("icon-suoxiao1")
+
+                this.$(".mainImg").style = `
+                    transform: scale(2) rotate(${this.Rotate()}deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+
+            // 放大
+            } else {
+                this.$(".fullscreen").classList.remove("icon-suoxiao1")
+                this.$(".fullscreen").classList.add("icon-fullscreen")
+
+                this.$(".mainImg").style = `
+                    transform: scale(1) rotate(0deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+            }
+        }
+    }
+
+    // 放大
+    BindFangDa() {
+        this.$(".fangda").onclick = () => {
+            this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
+        }
+    }
+
+    // 旋转
+    BindXuanZhuan() {
+        // -90
+        this.$(".leftshuaxin").onclick = () => {
+            this.xuanzhuan(-90)
+        }
+
+        // +90
+        this.$(".rightshuaxin").onclick = () => {
+            this.xuanzhuan(90)
+        }
+    }
+
+    MouseEvent() {
+
+        // 鼠标滑动的时候放大缩小网页
+        document.onmousewheel = (e) => {
+            if (e.wheelDelta == 210) {
+                this.$(".fangda").onclick()
+            } else {
+                this.$(".suoxiao").onclick()
+            }
+        }
+
+        // document.addEventListener('mousewheel',(e) => {
+        //     if (e.wheelDelta == 210) {
+        //         this.$(".fangda").onclick()
+        //     } else {
+        //         this.$(".suoxiao").onclick()
+        //     }
+        // },false)
+
+        // 鼠标在图片上按下的时候
+        this.$(".mainImg").onmousedown = (e) => {
+
+            e.preventDefault()
+
+            this.isBackMove = true
+
+            //获取鼠标按下的坐标
+            this.x1 = e.clientX;
+            this.y1 = e.clientY;
+
+            this.l = parseInt(this.$(".mainImg").style.marginLeft);
+            this.t = this.$(".mainImg").offsetTop;
+
+            this.ImgMove(".mainImg")
+        }
+        // 按住拖动，但鼠标从图片上离开的
+        // 给背景层绑定鼠标移动事件
+        this.$(".mainImg").onmouseleave = () => {
+            console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
+            if (this.isBackMove) {
+                this.ImgMove(".preview")
+            }
+        }
+
+        // 鼠标在背景层上松开
+        this.$(".preview").onmouseup = (ev) => {
+            console.log("鼠标在背景层上松开");
+            this.isBackMove = false
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+
+        // 鼠标在图片上松开
+        this.$(".mainImg").onmouseup = (ev) => {
+            console.log("鼠标在图片上松开");
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+    }
+
+    ImgMove(className) {
+        this.$(className).onmousemove = (ev) => {
+            var x2 = ev.clientX;
+            var y2 = ev.clientY;
+
+            //计算出鼠标的移动距离
+            var x = x2 - this.x1;
+            var y = y2 - this.y1;
+
+            //移动的数值与元素的left，top相加，得出元素的移动的距离
+            var lt = y + this.t;
+            var ls = x + this.l;
+
+            //更改元素的left，top值
+            this.$(".mainImg").style.marginLeft = ls + 'px';
+            this.$(".mainImg").style.marginTop = lt + 'px';
+        }
+    }
+
+    xuanzhuan(offset) {
+        this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
+    }
+
+    // 关闭按钮
+    BindClose() {
+        //1  var ddddc = this;
+
+        //2 es6 => 箭头函数
+        console.log("this1: ", this);
+
+        // this 指向
+        this.$(".closed").onclick = () => {
+            this.body.removeChild(this.$(".previewImage"))
+        }
+    }
+
+    // 上一页
+    BindPrevious() {
+        this.$(".left").onclick = () => {
+            this.option.showIndex -= 1;
+            if (this.option.showIndex < 0) {
+                this.option.showIndex = this.option.image.length - 1
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    // 下一页
+    BindNext() {
+        this.$(".right").onclick = () => {
+            this.option.showIndex += 1;
+            if (this.option.showIndex > this.option.image.length - 1) {
+                this.option.showIndex = 0
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    Scale() {
+        return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
+    }
+
+    Rotate() {
+        return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+
+}

历届学生/吴欣阳/项目开发/上课项目/ajax案例/js/utils.js

@@ -0,0 +1,12 @@
+function $(className) {
+  return document.querySelector(className);
+}
+
+function _(className) {
+  return document.querySelectorAll(className);
+}
+
+function replace(url) {
+  var s = "http://47.114.153.249:3000/api/json/url?url=";
+  return url.replace(s,'')
+}

历届学生/吴欣阳/项目开发/上课项目/js案例/funtion.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+<script>
+
+
+  function a (price) {
+      console.log(price);
+      price = price -1
+      return price;
+  }
+
+  var c = a(10);
+  console.log(c);
+
+</script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/game/css/index.css

@@ -0,0 +1,41 @@
+body{
+    margin: 0;
+    padding: 0;
+    background: #87d3ff url("../img/back.png");
+    height: 100vh;
+    background-size: 100% 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.people {
+    position: absolute;
+    bottom: 0;
+    width: 100px;
+}
+
+.right {
+    transform: rotateY(180deg);
+}
+
+.apple {
+    width: 40px;
+    position: absolute;
+    top: 0px;
+}
+.boom {
+    width: 60px;
+    position: absolute;
+    top: 0px;
+}
+
+.motion {
+    transition: all ease 0.5s;
+}
+.totalNums {
+    position: absolute;
+    right: 30px;
+    top: 30px;
+    font-size: 20px;
+    color: red;
+}

历届学生/吴欣阳/项目开发/上课项目/js案例/game/index..html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Titl2e</title>
+  <link rel="stylesheet" href="./css/index.css">
+</head>
+<body>
+
+<div class="totalNums">0分</div>
+<img src="./img/pepop.png" style="left: 0" class="people" alt="">
+<audio class="appleaudio" hidden controls src="./img/apple.mp3"></audio>
+<audio class="boomaudio" hidden controls src="./img/bomb.mp3"></audio>
+</body>
+<script src="./js/index.js"></script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/game/js/index.js

@@ -0,0 +1,136 @@
+var body = $("body"),
+    people = $(".people"),
+    clientWidth = document.body.clientWidth,
+    clientHeight = document.body.clientHeight,
+    totalNums = 0;
+
+// 1：让人物移动起来
+// 2：生成炸弹和苹果（随机生成）
+// 3：炸弹 苹果 和 人物的碰撞检测
+//    超过屏幕删除
+//    如果没有超过屏幕，需要进行碰撞检测
+//    炸弹 - 分数
+//    苹果 + 分数
+
+body.onmousemove = function (e) {
+    var x = e.x, moveX = x - 100;
+    people.style.left = `${moveX < 0 ? 0 : moveX}px`;
+
+    // 右移动
+    if (moveX > clientWidth / 2) {
+        people.classList.remove("right")
+    // 左移动
+    } else {
+        people.classList.add("right")
+    }
+}
+
+function CreatedResources(type) {
+    var x = parseInt(Math.random() * clientWidth) - (type == 'apple'? 40 : 60) ;
+    x < 0 ? x = 0 : x;
+
+    var apple = document.createElement("img");
+    apple.src = type == "apple" ? "./img/apple.png" : "./img/boom.png";
+    apple.className = type == "apple" ? "apple motion" : "boom motion";
+    apple.style.left = `${x}px`;
+    apple.style.top = `${type == 'apple'? -40 : -60}px`;
+    body.appendChild(apple);
+    motion(apple, type)
+}
+
+function motion (el, type) {
+    var apple = 0, bmob = 0
+    if (type == "apple") {
+        apple = setInterval(() => {
+            el.style.top = `${parseInt(el.style.top) + 30}px`;
+            if (parseInt(el.style.top) > clientHeight) {
+                body.removeChild(el)
+                clearInterval(apple)
+            } else {
+                JudgingCollision(el, apple)
+            }
+        },60)
+
+    } else {
+        bmob = setInterval(() => {
+            el.style.top = `${parseInt(el.style.top) + 50}px`;
+            if (parseInt(el.style.top) > clientHeight) {
+                setTimeout(()=> {
+                    try {
+                        body.removeChild(el)
+                        clearInterval(bmob)
+                    } catch (e) {}
+
+                },500)
+            } else {
+                JudgingCollision(el,bmob)
+            }
+        },80)
+
+    }
+
+
+}
+
+
+/**
+ * 判断是否碰撞
+ * @constructor
+ */
+function JudgingCollision(span, timeout) {
+    var people = $(".people");
+    var peopleX1 = parseInt(people.style.left);
+    var peopleX2 = parseInt(people.style.left) + people.clientWidth;
+    var peopleX3 = people.offsetTop;
+    var peopleX4 = people.offsetTop + people.clientHeight;
+    var spanX1 = parseInt(span.style.left);
+    var spanX2 = parseInt(span.style.left) + span.clientWidth;
+    var spanX3 = parseInt(span.style.top);
+    var spanX4 = parseInt(span.style.top) +  span.clientHeight;
+
+    // 碰撞检测
+    if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
+        // 没碰上
+    }else{
+        if (span.classList.contains("apple")) {
+            console.log("苹果");
+            totalNums+=30;
+            $(".appleaudio").play()
+            $(".totalNums").innerText = `${totalNums}分`
+            setTimeout(()=>{
+                body.removeChild(span)
+                clearInterval(timeout)
+            },540)
+        } else {
+            totalNums-=40;
+            span.src = "./img/bombimg.png"
+            $(".boomaudio").play()
+            $(".totalNums").innerText = `${totalNums}分`
+            setTimeout(()=>{
+                body.removeChild(span)
+                clearInterval(timeout)
+            },540)
+            console.log("炸弹")
+        }
+    }
+}
+
+function Created() {
+    var random = parseInt(Math.random() * 100);
+    if (random <= 80) {
+        CreatedResources("bomb")
+        console.log("生成炸弹")
+    } else {
+        CreatedResources("apple")
+        console.log("生成苹果")
+    }
+}
+
+setInterval(() => {
+    Created();
+},1000)
+
+
+function $(className) {
+    return document.querySelector(className)
+}

历届学生/吴欣阳/项目开发/上课项目/js案例/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>留言</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        .main {
+            width: 300px;
+            height: 250px;
+            margin: 20% auto;
+            border:1px solid #000;
+            position: relative;
+        }
+        textarea {
+            width: 100%;
+            height: 100%;
+        }
+        span {
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="main">
+        <textarea placeholder="请输入留言"></textarea>
+        <span>0/50</span>
+    </div>
+
+</body>
+
+<script>
+    var textarea = document.querySelector("textarea");
+    var span = document.querySelector("span");
+    textarea.oninput = function () {
+        var len = textarea.value.length;
+        if (len > 50) {
+            textarea.value = textarea.value.substring(0,50)
+        } else {
+            span.innerText = `${len}/50`;
+        }
+    }
+</script>
+
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/preview.html

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>预览</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_p89wlanilpr.css">
+    <style>
+        body,
+        ul,
+        li,
+        a,
+        p,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            text-decoration: none;
+        }
+
+        .smallImg {
+            width: 100px;
+        }
+
+        .zhezhao {
+            width: 100vw;
+            height: 100vh;
+            background: #000;
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            z-index: 998;
+            opacity: .5;
+        }
+
+        .preview {
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            z-index: 999;
+            display: flex;
+            justify-content: center;
+        }
+
+        .closed {
+            width: 40px;
+            height: 40px;
+            font-size: 24px;
+            color: #fff;
+            background-color: #606266;
+            text-align: center;
+            line-height: 35px;
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            border-radius: 100%;
+        }
+
+        .action .d {
+            top: 50%;
+            transform: translateY(-50%);
+            width: 44px;
+            height: 44px;
+            font-size: 24px;
+            color: #fff;
+            background-color: #606266;
+            border-color: #fff;
+            position: absolute;
+            text-align: center;
+            line-height: 40px;
+            border-radius: 100%;
+        }
+
+        .left {
+            left: 40px;
+        }
+
+        .right {
+            right: 40px;
+        }
+
+        .operation {
+            left: 50%;
+            bottom: 30px;
+            transform: translateX(-50%);
+            width: 282px;
+            height: 44px;
+            padding: 0 23px;
+            background-color: #606266;
+            border-color: #fff;
+            position: absolute;
+            border-radius: 22px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .operation li {}
+
+        .operation li i {
+            font-size: 23px;
+            color: #fff;
+        }
+
+        .xz {
+            display: inline-block;
+            transform: rotateY(180deg);
+        }
+
+        .mainImg {
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+
+  
+        <img class="smallImg" src="./img/1.jpg" alt="">
+
+        <div class="zhezhao"></div>
+        <div class="preview">
+            <div class="closed">x</div>
+
+            <div class="action">
+                <div class="left d">&lt;</div>
+                <div class="right d">&gt;</div>
+            </div>
+
+            <img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;" src="./img/4.jpg" alt="">
+
+            <ul class="operation">
+                <li>
+                    <i class="iconfont icon-suoxiao suoxiao"></i>
+                </li>
+                <li>
+                    <i class="iconfont icon-fangda fangda"></i>
+                </li>
+                <li>
+                    <i class="iconfont icon-fullscreen fullscreen"></i>
+                </li>
+                <li class="xz">
+                    <i class="iconfont icon-shuaxin leftshuaxin"></i>
+                </li>
+                <li>
+                    <i class="iconfont icon-shuaxin rightshuaxin"></i>
+                </li>
+            </ul>
+
+
+        </div>
+</body>
+
+
+<script>
+
+    var suoxiao = $(".suoxiao"),
+        fangda = $(".fangda"),
+        fullscreen = $(".fullscreen"),
+        leftshuaxin = $(".leftshuaxin"),
+        rightshuaxin = $(".rightshuaxin");
+
+    var x1, y1, l, t;
+
+    // 当鼠标在图片上按下的时候，修改这个变量为true，
+    // 如果鼠标滑动超过图片的区域，因为这个变量未true，
+    // 所以if判断通过，给背景层绑定移动事件实现可以继续拖动图片
+
+    // 当用户在背景层松开鼠标后，将这个变量改为false。
+    // 这样当用户在未按下图片但是从图片上滑动超过图片区域的时候，因为这个变量是false
+    // 所以不会执行，在背景层滑动鼠标图片也跟着一起移动的事件绑定
+    var isBackMove = false; 
+
+
+    suoxiao.onclick = function () {
+        var value = Scale() - 0.2;
+        if (value != 0) {
+            $(".mainImg").style.transform = `scale(${value}) rotate(${Rotate()}deg)`
+        }
+    }
+
+    fangda.onclick = function () {
+        $(".mainImg").style.transform = `scale(${Scale() + 0.2}) rotate(${Rotate()}deg)`
+    }
+    fullscreen.onclick = function () {
+        $(".mainImg").style.transform = `scale(2) rotate(${Rotate()}deg)`
+    }
+
+    // -90
+    leftshuaxin.onclick = function () {
+        xuanzhuan(-90)
+    }
+
+    // +90
+    rightshuaxin.onclick = function () {
+        xuanzhuan(90)
+    }
+
+    // 鼠标在图片上按下的时候
+    $(".mainImg").onmousedown = function (e) {
+        console.log("鼠标在图片上按下的时候");
+        e.preventDefault()
+
+        isBackMove = true
+
+        //获取鼠标按下的坐标
+        x1 = e.clientX;
+        y1 = e.clientY;
+
+        l = parseInt($(".mainImg").style.marginLeft);
+        t = $(".mainImg").offsetTop;
+
+        ImgMove(".mainImg")
+       
+    }
+
+    // 按住拖动，但鼠标从图片上离开的
+    // 给背景层绑定鼠标移动事件
+    $(".mainImg").onmouseleave = function () {
+        console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
+        if (isBackMove) {
+            ImgMove(".preview")
+        }
+        
+    }
+
+    // 鼠标在图片上松开
+    $(".mainImg").onmouseup = function (ev) {
+        console.log("鼠标在图片上松开");
+        $(".mainImg").onmousemove = null;
+        $(".preview").onmousemove = null;
+    }
+
+    // 鼠标在背景层上松开
+    $(".preview").onmouseup = function (ev) {
+        console.log("鼠标在背景层上松开");
+        isBackMove = false
+        $(".mainImg").onmousemove = null;
+        $(".preview").onmousemove = null;
+    }
+
+    
+
+    function ImgMove(className) {
+        $(className).onmousemove = function (ev) {
+            var x2 = ev.clientX;
+            var y2 = ev.clientY;
+
+            //计算出鼠标的移动距离
+            var x = x2 - x1;
+            var y = y2 - y1;
+
+            //移动的数值与元素的left，top相加，得出元素的移动的距离
+            var lt = y + t;
+            var ls = x + l;
+
+            //更改元素的left，top值
+            $(".mainImg").style.marginLeft = ls + 'px';
+            $(".mainImg").style.marginTop = lt + 'px';
+        }
+    }
+
+    // 左右旋转的代码封装
+    function xuanzhuan(offset) {
+        $(".mainImg").style.transform = `scale(${Scale()}) rotate(${Rotate() + offset}deg)`
+    }
+
+    // 获取缩放
+    function Scale() {
+        return Number($(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
+    }
+
+    // 获取旋转的数值
+    function Rotate() {
+        return Number($(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
+    }
+
+
+    function $(a) {
+        return document.querySelector(a)
+    }
+</script>
+
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/css/previewImage.css

@@ -0,0 +1,119 @@
+body,
+ul,
+li,
+a,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+}
+
+.smallImg {
+    width: 100px;
+}
+
+.hidden {
+    display: none;
+}
+
+.zhezhao {
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 998;
+    opacity: .5;
+}
+
+.preview {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+}
+
+.closed {
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    text-align: center;
+    line-height: 35px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    border-radius: 100%;
+    z-index: 999;
+}
+
+.action .d {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    border-color: #fff;
+    position: absolute;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 100%;
+    z-index: 999;
+}
+
+.left {
+    left: 40px;
+}
+
+.right {
+    right: 40px;
+}
+
+.operation {
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    border-color: #fff;
+    position: absolute;
+    border-radius: 22px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.operation li {}
+
+.operation li i {
+    font-size: 23px;
+    color: #fff;
+}
+
+.xz {
+    display: inline-block;
+    transform: rotateY(180deg);
+}
+
+.mainImg {
+    height: 100%;
+}

历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>图片预览封装</title>
+    <link rel="stylesheet" href="./css/previewImage.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+
+</head>
+
+<body>
+
+    <div class="list"></div>
+</body>
+
+<script src="./js/previewImage.js"></script>
+<script>
+
+    var imgArr = [
+        './img/11.png',
+        './img/12.jpg',
+        './img/13.jpg',
+        './img/14.jpg',
+        './img/15.png',
+        './img/16.jpg',
+        './img/17.jpg',
+    ]
+
+    imgArr.forEach(function (v) {
+        document.querySelector(".list").innerHTML += `<img width="100" src="${v}"/>`
+    });
+
+
+    document.querySelectorAll(".list img").forEach(function (v, i) {
+        v.onclick = function () {
+            var c = new PreviewImage({
+                image: imgArr,
+                showIndex: i
+            });
+            c = null
+        }
+    })
+
+
+
+
+</script>
+
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/js/previewImage.js

@@ -0,0 +1,267 @@
+class PreviewImage {
+
+    // 属性都是全局的
+    body = this.$("body");
+    option = {};
+    isBackMove = false;
+
+    x1 = 0;
+    y1 = 0;
+    l = 0;
+    t = 0;
+
+    constructor(option) {
+        if (!option.hasOwnProperty("image")) {
+            throw new Error("参数image缺少，请检查")
+        }
+
+        if (!option.hasOwnProperty("showIndex")) {
+            throw new Error("参数showIndex缺少，请检查")
+        }
+
+        this.option = option
+        console.log(this.option);
+
+        this.created();
+        this.BindClose();
+
+        this.BindPrevious();
+        this.BindNext();
+        this.BindSuoXiao();
+        this.BindFangDa();
+        this.BindFullScreen();
+
+        this.BindXuanZhuan();
+        this.MouseEvent();
+    }
+
+    // 1：把图片预览的html插入到网页上
+    created() {
+        this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
+                        <div class="zhezhao"></div>
+                        <div class="preview">
+                            <div class="closed">x</div>
+
+                            <div class="action">
+                                <div class="left d">&lt;</div>
+                                <div class="right d">&gt;</div>
+                            </div>
+
+                            <img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
+                                src="${this.option.image[this.option.showIndex]}" alt="">
+
+                            <ul class="operation">
+                                <li>
+                                    <i class="iconfont icon-suoxiao suoxiao"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fangda fangda"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fullscreen fullscreen"></i>
+                                </li>
+                                <li class="xz">
+                                    <i class="iconfont icon-shuaxin leftshuaxin"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-shuaxin rightshuaxin"></i>
+                                </li>
+                            </ul>
+
+
+                        </div>
+                    </div>`)
+
+    }
+
+    // 缩小
+    BindSuoXiao() {
+        this.$(".suoxiao").onclick = () => {
+            var value = this.Scale() - 0.2;
+            if (value != 0) {
+                this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
+            }
+        }
+    }
+
+    // 全屏
+    BindFullScreen() {
+
+        this.$(".fullscreen").onclick = () => {
+            // true 缩小
+            if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
+                this.$(".fullscreen").classList.remove("icon-fullscreen")
+                this.$(".fullscreen").classList.add("icon-suoxiao1")
+
+                this.$(".mainImg").style = `
+                    transform: scale(2) rotate(${this.Rotate()}deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+
+            // 放大
+            } else {
+                this.$(".fullscreen").classList.remove("icon-suoxiao1")
+                this.$(".fullscreen").classList.add("icon-fullscreen")
+
+                this.$(".mainImg").style = `
+                    transform: scale(1) rotate(0deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+            }
+        }
+    }
+
+    // 放大
+    BindFangDa() {
+        this.$(".fangda").onclick = () => {
+            this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
+        }
+    }
+
+    // 旋转
+    BindXuanZhuan() {
+        // -90
+        this.$(".leftshuaxin").onclick = () => {
+            this.xuanzhuan(-90)
+        }
+
+        // +90
+        this.$(".rightshuaxin").onclick = () => {
+            this.xuanzhuan(90)
+        }
+    }
+
+    MouseEvent() {
+
+        // 鼠标滑动的时候放大缩小网页
+        document.onmousewheel = (e) => {
+            if (e.wheelDelta == 210) {
+                this.$(".fangda").onclick()
+            } else {
+                this.$(".suoxiao").onclick()
+            }
+        }
+
+        // document.addEventListener('mousewheel',(e) => {
+        //     if (e.wheelDelta == 210) {
+        //         this.$(".fangda").onclick()
+        //     } else {
+        //         this.$(".suoxiao").onclick()
+        //     }
+        // },false)
+
+        // 鼠标在图片上按下的时候
+        this.$(".mainImg").onmousedown = (e) => {
+
+            e.preventDefault()
+
+            this.isBackMove = true
+
+            //获取鼠标按下的坐标
+            this.x1 = e.clientX;
+            this.y1 = e.clientY;
+
+            this.l = parseInt(this.$(".mainImg").style.marginLeft);
+            this.t = this.$(".mainImg").offsetTop;
+
+            this.ImgMove(".mainImg")
+        }
+        // 按住拖动，但鼠标从图片上离开的
+        // 给背景层绑定鼠标移动事件
+        this.$(".mainImg").onmouseleave = () => {
+            console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
+            if (this.isBackMove) {
+                this.ImgMove(".preview")
+            }
+        }
+
+        // 鼠标在背景层上松开
+        this.$(".preview").onmouseup = (ev) => {
+            console.log("鼠标在背景层上松开");
+            this.isBackMove = false
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+
+        // 鼠标在图片上松开
+        this.$(".mainImg").onmouseup = (ev) => {
+            console.log("鼠标在图片上松开");
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+    }
+
+    ImgMove(className) {
+        this.$(className).onmousemove = (ev) => {
+            var x2 = ev.clientX;
+            var y2 = ev.clientY;
+
+            //计算出鼠标的移动距离
+            var x = x2 - this.x1;
+            var y = y2 - this.y1;
+
+            //移动的数值与元素的left，top相加，得出元素的移动的距离
+            var lt = y + this.t;
+            var ls = x + this.l;
+
+            //更改元素的left，top值
+            this.$(".mainImg").style.marginLeft = ls + 'px';
+            this.$(".mainImg").style.marginTop = lt + 'px';
+        }
+    }
+
+    xuanzhuan(offset) {
+        this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
+    }
+
+    // 关闭按钮
+    BindClose() {
+        //1  var ddddc = this;
+
+        //2 es6 => 箭头函数
+        console.log("this1: ", this);
+
+        // this 指向
+        this.$(".closed").onclick = () => {
+            this.body.removeChild(this.$(".previewImage"))
+        }
+    }
+
+    // 上一页
+    BindPrevious() {
+        this.$(".left").onclick = () => {
+            this.option.showIndex -= 1;
+            if (this.option.showIndex < 0) {
+                this.option.showIndex = this.option.image.length - 1
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    // 下一页
+    BindNext() {
+        this.$(".right").onclick = () => {
+            this.option.showIndex += 1;
+            if (this.option.showIndex > this.option.image.length - 1) {
+                this.option.showIndex = 0
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    Scale() {
+        return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
+    }
+
+    Rotate() {
+        return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+
+}

历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/test.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <button id="btn">点我</button>
+</body>
+
+<script>
+
+    var body = document.body;
+    var btn = document.getElementById('btn');
+    body.innerHTML += "<div class='newDiv'>新元素</div>";
+    
+    btn.onclick = function () {
+        alert('hello');
+    }
+</script>
+
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/this.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+</body>
+<script>
+
+    // var o = {
+    //     user: "追梦子",
+    //     fn: function () {
+    //         console.log(this);
+    //         console.log(this.user);  //追梦子
+    //     }
+    // }
+    
+    // // o.fn();
+
+
+    // var a = o.fn
+    // a()
+
+
+    // function a () {}
+
+
+    // var a = (nums,b) => console.log(nums,b)
+
+    // a(1,100)
+
+</script>
+
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/笔记.txt

@@ -0,0 +1,60 @@
+1: class 类
+  什么类？现实生活中事物在编程中的映射和封装
+  面向对象的编程
+
+  类的属性
+
+  类的方法
+
+  构造函数  & 析构函数
+
+  封装
+  继承
+  多态
+
+  class BaseCar {
+
+    // 打开车门
+    open() {
+        console.log("打开车门");
+    }
+
+    // 关闭车门
+    close() {
+        console.log("关闭车门");
+    }
+}
+
+class SmallCar extends BaseCar {
+
+    // 属性
+    speed = null;
+
+    // 构造函数
+    constructor (bbb) {
+        super()
+        console.log("类被初始化的时候第一个被自动执行的方法");
+        this.speed = bbb
+    }
+
+    nomusic() {
+        console.log("不能播放音乐");
+        console.log(this.speed);
+    }
+}
+
+
+class BigCar extends BaseCar {
+    music() {
+        console.log("能播放音乐");
+    }
+}
+
+
+
+var a = new SmallCar({
+    test: "参数"
+});
+// var b = new BigCar();
+
+a.nomusic()

历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/index.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+  <style>
+    .swiper-container {
+        width: 520px;
+        height: 280px;
+        overflow: hidden;
+        margin: 100px auto;
+        position: relative;
+    }
+    .swiper-pagination {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 20px;
+        display: flex;
+        justify-content: center;
+    }
+    .swiper-pagination-item {
+        width: 15px;
+        height: 15px;
+        border-radius: 100%;
+        background: #fff;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+    .swiper-wrapper {
+        display: flex;
+    }
+    .swiper-button {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 25px;
+        cursor: pointer;
+    }
+    .swiper-button-prev {
+        left: 10px;
+    }
+    .swiper-button-next {
+        right: 10px;
+    }
+    .active {
+        background: red;
+    }
+    .dh {
+        transition-duration: 300ms;
+    }
+
+  </style>
+</head>
+<body>
+
+
+<div class="swiper-container">
+
+  <div class="swiper-wrapper dh" style="transform: translateX(0px);">
+    <div class="swiper-slide">
+      <img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
+    </div>
+  </div>
+
+  <!-- 如果需要分页器 -->
+  <div class="swiper-pagination">
+    <div class="swiper-pagination-item active"></div>
+    <div class="swiper-pagination-item"></div>
+    <div class="swiper-pagination-item"></div>
+  </div>
+
+  <!-- 如果需要导航按钮 -->
+  <div class="swiper-button swiper-button-prev iconfont icon-zuo"></div>
+  <div class="swiper-button swiper-button-next iconfont icon-zhankai-copy"></div>
+
+
+</div>
+</body>
+<script>
+
+    var pagination = _(".swiper-pagination .swiper-pagination-item");
+    var timer;
+    // 上一页
+    $(".swiper-button-prev").onclick = function () {
+        motion(520,'prev')
+    }
+
+    // 下一页
+    $(".swiper-button-next").onclick = function () {
+        motion(-520,'next')
+    }
+
+    // 运动
+    function motion(offset, type) {
+
+            var totalDistance = translateX() + offset;
+            if (totalDistance < -1040) {
+                totalDistance = 0
+            }
+
+            if (totalDistance > 0) {
+                totalDistance = -1040
+            }
+            SetTranslateX(totalDistance)
+            // 要去的下一页的下标
+            var index = Math.abs(totalDistance / 520)
+            changePagination(index)
+    }
+
+    // 小圆点点击切换轮播图
+    pagination.forEach((v,i) => {
+        v.onclick = () => {
+            changePagination(i)
+        }
+    });
+
+    function changePagination(i) {
+        pagination.forEach(item => item.classList.remove("active"))
+        pagination[i].classList.add("active")
+        SetTranslateX(i * -520)
+    }
+
+    // 让图片移动
+    function SetTranslateX(distance) {
+        $(".swiper-wrapper").style.transform = `translateX(${distance}px)`
+    }
+
+    function AutoPlay() {
+        timer = setInterval(() => {
+            $(".swiper-button-next").onclick()
+        },1000)
+    }
+
+    $(".swiper-container").onmouseover = function () {
+        clearInterval(timer)
+    }
+
+    $(".swiper-container").onmouseleave = function () {
+        AutoPlay()
+    }
+
+    AutoPlay()
+
+    // 返回元素上的距离
+    function translateX() {
+        return Number($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
+    }
+
+    function $(className) {
+        return document.querySelector(className);
+    }
+
+    function _(className) {
+        return document.querySelectorAll(className);
+    }
+</script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.css

@@ -0,0 +1,45 @@
+.swiper-container {
+    width: 520px;
+    height: 280px;
+    overflow: hidden;
+    margin: 100px auto;
+    position: relative;
+}
+.swiper-pagination {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+    display: flex;
+    justify-content: center;
+}
+.swiper-pagination-item {
+    width: 15px;
+    height: 15px;
+    border-radius: 100%;
+    background: #fff;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.swiper-wrapper {
+    display: flex;
+}
+.swiper-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 25px;
+    cursor: pointer;
+}
+.swiper-button-prev {
+    left: 10px;
+}
+.swiper-button-next {
+    right: 10px;
+}
+.active {
+    background: red;
+}
+.dh {
+    transition-duration: 300ms;
+}

历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
+  <link rel="stylesheet" href="./swiper.css">
+</head>
+<body>
+
+
+<div class="swiper-container">
+
+  <div class="swiper-wrapper" style="transform: translateX(0px);">
+    <div class="swiper-slide">
+      <img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://img.alicdn.com/imgextra/i2/6000000008153/O1CN01ApOjk02A67oNUTDKP_!!6000000008153-0-octopus.jpg" alt="">
+    </div>
+  </div>
+
+  <!-- 如果需要分页器 -->
+  <div class="swiper-pagination"></div>
+
+  <!-- 如果需要导航按钮 -->
+  <div class="swiper-button swiper-button-prev iconfont icon-zuo"></div>
+  <div class="swiper-button swiper-button-next iconfont icon-zhankai-copy"></div>
+
+</div>
+
+<button onclick="test()">点我</button>
+</body>
+
+<script src="./swiper.js"></script>
+<script>
+  var lb = new Swiper(".swiper-container",{
+    loop: false,
+    autoPlay: false,
+    autoTime: 1000,
+    initialSlide: 0,
+    speed: 300,
+    on: {
+      slideChange: (index) => {
+        console.log(index)
+      }
+    }
+  })
+
+  function test() {
+    lb.slideTo(2)
+  }
+
+  // function a () {
+  //   var test = 1;
+  //   console.log(test) // 1
+  //
+  //   var c = function () {
+  //     test+=1;
+  //     console.log(test) //2  2
+  //   }
+  //
+  //   return c;
+  // }
+  //
+  // var ee = a()
+  //
+  // ee() // 2
+  // ee() // 3
+  //
+  // // 闭包：函数内部的函数，访问外函数变量的过程
+  // // 优点：可以对变量进行缓存，避免重复计算
+  // // 缺点：导致内存占用过高，引发卡顿
+
+</script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/swiper.js

@@ -0,0 +1,204 @@
+// 自执行函数
+// 闭包
+(function () {
+
+    class Swiper {
+        config = {
+            timer: null,
+            el: '.swiper-container',
+            width: () => {
+                return  document.querySelector(this.config.el).offsetWidth
+            },
+            maxLength: () => {
+                return document.querySelectorAll(".swiper-slide").length;
+            },
+            maxWidth: () => {
+                return (this.config.maxLength() - 1) * this.config.width()
+            },
+            loop: false,
+            autoPlay: false,
+            autoTime: 3000,
+            initialSlide: 0,
+            speed: 300,
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            },
+            pagination: {
+                el: '.swiper-pagination',
+            },
+            fx: true,// true 表示向下，false向上奏
+            on: {}
+        }
+        constructor(el, option) {
+            if (typeof el != "string" || el.length == 0 || document.querySelector(el) == null) {
+                throw new Error("el参数必传，需要是字符串，并且 选择器需要存在")
+            }
+
+            this.config.el = el;
+
+            this.config.loop = option.loop || this.config.loop;
+            this.config.autoPlay = option.autoPlay || this.config.autoPlay;
+            this.config.autoTime = option.autoTime || this.config.autoTime;
+            this.config.initialSlide = option.initialSlide || this.config.initialSlide;
+            this.config.speed = option.speed || this.config.speed;
+            this.config.navigation.prevEl = option?.navigation?.prevEl || this.config.navigation.prevEl;
+            this.config.navigation.nextEl = option?.navigation?.nextEl || this.config.navigation.nextEl;
+            this.config.pagination.el = option?.pagination?.el || this.config.pagination.el;
+            this.config.on = option?.on ||  this.config.on;
+
+            console.log( this.config)
+            this.init();
+        }
+
+        init () {
+            this.BindNext();
+            this.BindPrev();
+            this.createdPagination();
+
+            // 设置默认显示第几章图
+            this.SetTranslateX(this.config.initialSlide * -this.config.width())
+            this.changePagination(this.config.initialSlide)
+
+            // 设置轮播图切换的动画
+            this.$(".swiper-wrapper").style.transitionDuration = `${this.config.speed}ms`
+
+            if (this.config.autoPlay) {
+                this.AutoPlay();
+                this.$(this.config.el).onmouseover = () => clearInterval(this.config.timer)
+                this.$(this.config.el).onmouseleave = () => this.AutoPlay()
+            }
+        }
+
+        BindNext() {
+            this.$(this.config.navigation.nextEl) != null
+            ? this.$(this.config.navigation.nextEl).onclick = () => {
+                this.motion(-this.config.width())
+            }
+            : ''
+        }
+
+        BindPrev() {
+            this.$(this.config.navigation.prevEl) != null
+            ? this.$(this.config.navigation.prevEl).onclick = () => {
+                this.motion(this.config.width())
+            }
+            : ''
+        }
+
+        motion(offset) {
+            var totalDistance = this.translateX() + offset;
+
+            if (!this.config.loop) {
+                if (totalDistance == -this.config.maxWidth()) {
+                    console.log("移动到最后一张图了")
+                    this.$(this.config.navigation.nextEl).onclick = null;
+                } else {
+                    this.BindNext();
+                }
+
+                if (totalDistance == 0) {
+                    console.log("移动到第一张图了")
+                    this.$(this.config.navigation.prevEl).onclick = null
+                } else {
+                    this.BindPrev()
+                }
+            }
+
+
+            if (totalDistance < -this.config.maxWidth()) {
+                totalDistance = 0
+            }
+
+            if (totalDistance > 0) {
+                totalDistance = -this.config.maxWidth()
+            }
+            this.SetTranslateX(totalDistance)
+            // 要去的下一页的下标
+            var index = Math.abs(totalDistance / this.config.width())
+            this.changePagination(index)
+        }
+
+        // 生成小圆点
+        createdPagination() {
+            if (this.$(this.config.pagination.el) != null ) {
+                for (var i = 0; i < this.config.maxLength(); i++) {
+                    this.$(this.config.pagination.el).innerHTML+= `
+                 <div class="swiper-pagination-item ${i == 0 ? 'active' : ''}"></div>
+                `
+                };
+
+                this.bindPaginationClick();
+            }
+        }
+
+        bindPaginationClick() {
+            var itemAll = this._(".swiper-pagination-item")
+            itemAll.forEach((v,i)=> {
+                v.onclick = () => {
+                    this.BindNext();
+                    this.BindPrev();
+                    this.changePagination(i)
+                }
+            })
+        }
+
+        changePagination(i) {
+            this.config.on.hasOwnProperty("slideChange") ? this.config.on?.slideChange(i) : ''
+            var pagination = this._(".swiper-pagination-item")
+            if (pagination.length != 0) {
+                pagination.forEach(item => item.classList.remove("active"))
+                pagination[i].classList.add("active")
+                this.SetTranslateX(i * -this.config.width())
+            }
+        }
+
+        slideTo(index) {
+            this.SetTranslateX(index * -this.config.width())
+            this.changePagination(index)
+        }
+
+        AutoPlay() {
+            this.config.timer = setInterval(() => {
+                if (this.config.loop) {
+                    this.$(this.config.navigation.nextEl).onclick()
+                } else {
+                    if (this.translateX() / -this.config.width() >= this.config.maxLength()-1) {
+                        this.config.fx = false
+                        this.motion(this.config.width())
+                    } else {
+                        if (this.config.fx) {
+                            this.motion(-this.config.width())
+                        } else {
+                            this.motion(this.config.width())
+                            if (this.translateX() / -this.config.width() == 0) {
+                                this.config.fx = true
+                            }
+                        }
+                    }
+                }
+            },this.config.autoTime)
+        }
+
+        translateX() {
+            return Number(this.$(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
+        }
+
+        SetTranslateX(distance) {
+            this.$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
+        }
+
+        $(className) {
+            return document.querySelector(className)
+        }
+
+        _(className) {
+            return document.querySelectorAll(className)
+        }
+
+
+    }
+
+    window.Swiper = Swiper
+})()
+

历届学生/吴欣阳/项目开发/上课项目/js案例/swiper/笔记.txt

@@ -0,0 +1,47 @@
+实现的功能：
+
+自定义参数：
+1：loop: false // 循环模式选项
+【完成】2：自动播放
+
+   autoPlay: true // false 【完成】
+   autoTime: 3(默认) 用户可以自定义 【完成】
+
+【完成】3：是否需要前进后退按钮
+	如果需要
+  1：写上html
+  2：
+	  // 如果需要前进后退按钮
+	  navigation: {
+	    nextEl: '.swiper-button-next',
+	    prevEl: '.swiper-button-prev',
+	  },
+
+【完成】4：是否需要小圆点
+  如果需要
+  1：写上html
+  2：
+    pagination: {
+      el: '.swiper-pagination',
+    },
+
+【完成】5：initialSlide: 0(默认) 设置显示第几张图
+【完成】6：speed: 300(默认) 设置图片切换的速度
+
+
+功能（方法）：
+
+1：slideChange() 轮播图切换的时候，调用这个方法，返回下标
+new Swiper('.swiper-container',{
+  on:{
+    slideChange: function(){
+      alert('改变了，activeIndex为'+this.activeIndex);
+    },
+  },
+})
+
+mySwiper.on('slideChange', function () {
+  //...
+});
+
+2：slideTo(index)  传入参数，切换轮播图

历届学生/吴欣阳/项目开发/上课项目/js案例/富强.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100vh;
+        }
+        span {
+            transition: all ease 1s;
+        }
+    </style>
+</head>
+<body>
+</body>
+
+<script>
+    // 1：为整个body绑定一个点击事件，点击后应该在鼠标点击的地方生成一个文字
+    //    鼠标点击的地方：获取鼠标点击后的x，y轴距离
+    //    文字如何出现：依次走数组每一个元素
+    //    让字产生随机的颜色
+    //    生成一个标签 span
+    //    最后把js生成的span放到网页上
+
+    // 2：让网页上的元素向上移动，在移动结束后消失
+    //    让元素移动，修改定位的 top 距离
+    //    让元素消失，直接从body上删除元素span
+    
+    var body = document.querySelector("body");
+    
+    var list = ["富强","民主", "文明", "和谐", "自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
+    var index = 0;
+
+    body.onclick = function (e) {
+        var X = e.x, Y = e.y;
+
+        var span = document.createElement("span");
+        span.innerText = list[index]
+
+        // 随机产生一个色相
+        var color = parseInt(Math.random() * 360);
+
+        span.style = `
+           position: fixed;
+           left: ${X}px;
+           top: ${Y}px;
+           color: hsl(${color},100%,50%,1);
+        `
+
+        body.appendChild(span)
+
+        var direction = [
+            'LeftTop', 'LeftBottom',
+            'RightTop', 'RightBottom',
+        ];
+
+        var directionIndex = parseInt(Math.random() * direction.length)
+
+
+        motion(direction[directionIndex], span, X, Y)
+
+        function motion(direction, el, x, y) {
+            var newX = Math.random() * x;
+            var newY = Math.random() * y;
+
+            setTimeout(function() {
+                switch (direction) {
+                    case "LeftTop":
+                        el.style.left = `${x - newX}px`;
+                        el.style.top = `${y - newY}px`;
+                        break;
+
+                    case "RightTop":
+                        el.style.left = `${x + newX}px`;
+                        el.style.top = `${y - newY}px`;
+                        break;    
+                    
+                    case "LeftBottom":
+                        el.style.left = `${x - newX}px`;
+                        el.style.top = `${y + newY}px`;
+                        break; 
+                    
+                    case "RightBottom":
+                        el.style.left = `${x + newX}px`;
+                        el.style.top = `${y + newY}px`;
+                        break;       
+                    default:
+                        break;
+                }
+            },50)
+
+            setTimeout(function() {
+                body.removeChild(el)
+            },1050)
+        } 
+        
+
+        index+=1;
+        if (index > 11) {
+            index = 0;
+        }
+    }
+
+
+    
+</script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/广告.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>广告</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        .ad {
+            width: 300px;
+            height: 300px;
+            position: fixed;
+            right: 0;
+            bottom: 0;
+            background: red;
+        }
+        .ad span {
+            width: 60px;
+            height: 30px;
+            background: #000;
+            color: #fff;
+            text-align: center;
+            line-height: 30px;
+            position: absolute;
+            right: 0;
+            top:0;
+        }
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="ad">
+        <span>x关闭</span>
+    </div>
+</body>
+<script>
+  var close = document.querySelector(".ad span");
+  var ad = document.querySelector(".ad");
+  var count = 0; // 记录用户点击了几次
+  close.onclick = function () {
+      console.log("对氨基");
+      count+=1;
+      if (count == 1) {
+        // location.href = "https://www.baidu.com/"
+        open("https://www.baidu.com/")
+      } else {
+        ad.classList.add("hidden")
+      }
+  }
+</script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/搜索建议.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>搜素建议</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        ul li span {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <input type="text" placeholder="请输入关键词">
+    <ul>
+      
+    </ul>
+</body>
+<script>
+    var keyword = document.querySelector("input");
+
+    var list = ['html学习', '不想学习', '想吃饭', '我没吃饱', '不写代码', '我的学习代码没写完，懒得学习'];
+    var ul = document.querySelector("ul");
+    var NewsList = []
+    // 1: 实现搜索列表的展示
+    //   获取用户在输入框中输入的数值
+    //   拿到数值和数组中每条数据进行判断，符合条件单独保存起来
+
+    // 2：给关键字加红色
+
+
+    // 想
+    keyword.oninput = function () {
+        NewsList = [];
+        if (keyword.value.length != 0) {
+            list.forEach(function (v) {
+                if (v.includes(keyword.value)) {
+                    v = v.replaceAll(keyword.value, `<span>${keyword.value}</span>`)
+                    NewsList.push(v)
+                }
+            });
+
+
+            ul.innerHTML = ""
+            NewsList.forEach(function(v) {
+                ul.innerHTML += `<li>${v}</li>`
+            })
+            console.log(NewsList);
+        } else {
+            ul.innerHTML = ""
+        }
+    }
+
+</script>
+
+</html>

历届学生/吴欣阳/项目开发/上课项目/js案例/滚动固定.html

@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>滚动固定</title>
+    <style>
+        .header {
+            width: 100%;
+            height: 60px;
+            background: red;
+        }
+        .fixed {
+            position: fixed;
+            width: 100%;
+            left: 0;
+            right: 0;
+            top: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="header"></div>
+    <ul>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+        <li>8</li>
+        <li>9</li>
+        <li>10</li>
+        <li>11</li>
+        <li>12</li>
+        <li>13</li>
+        <li>14</li>
+        <li>15</li>
+        <li>16</li>
+        <li>17</li>
+        <li>18</li>
+        <li>19</li>
+        <li>20</li>
+        <li>21</li>
+        <li>22</li>
+        <li>23</li>
+        <li>24</li>
+        <li>25</li>
+        <li>26</li>
+        <li>27</li>
+        <li>28</li>
+        <li>29</li>
+        <li>30</li>
+        <li>31</li>
+        <li>32</li>
+        <li>33</li>
+        <li>34</li>
+        <li>35</li>
+        <li>36</li>
+        <li>37</li>
+        <li>38</li>
+        <li>39</li>
+        <li>40</li>
+        <li>41</li>
+        <li>42</li>
+        <li>43</li>
+        <li>44</li>
+        <li>45</li>
+        <li>46</li>
+        <li>47</li>
+        <li>48</li>
+        <li>49</li>
+        <li>50</li>
+        <li>51</li>
+        <li>52</li>
+        <li>53</li>
+        <li>54</li>
+        <li>55</li>
+        <li>56</li>
+        <li>57</li>
+        <li>58</li>
+        <li>59</li>
+        <li>60</li>
+        <li>61</li>
+        <li>62</li>
+        <li>63</li>
+        <li>64</li>
+        <li>65</li>
+        <li>66</li>
+        <li>67</li>
+        <li>68</li>
+        <li>69</li>
+        <li>70</li>
+        <li>71</li>
+        <li>72</li>
+        <li>73</li>
+        <li>74</li>
+        <li>75</li>
+        <li>76</li>
+        <li>77</li>
+        <li>78</li>
+        <li>79</li>
+        <li>80</li>
+        <li>81</li>
+        <li>82</li>
+        <li>83</li>
+        <li>84</li>
+        <li>85</li>
+        <li>86</li>
+        <li>87</li>
+        <li>88</li>
+        <li>89</li>
+        <li>90</li>
+        <li>91</li>
+        <li>92</li>
+        <li>93</li>
+        <li>94</li>
+        <li>95</li>
+        <li>96</li>
+        <li>97</li>
+        <li>98</li>
+        <li>99</li>
+        <li>100</li>
+        <li>101</li>
+        <li>102</li>
+        <li>103</li>
+        <li>104</li>
+        <li>105</li>
+        <li>106</li>
+        <li>107</li>
+        <li>108</li>
+        <li>109</li>
+        <li>110</li>
+        <li>111</li>
+        <li>112</li>
+        <li>113</li>
+        <li>114</li>
+        <li>115</li>
+        <li>116</li>
+        <li>117</li>
+        <li>118</li>
+        <li>119</li>
+        <li>120</li>
+        <li>121</li>
+        <li>122</li>
+        <li>123</li>
+        <li>124</li>
+        <li>125</li>
+        <li>126</li>
+        <li>127</li>
+        <li>128</li>
+        <li>129</li>
+        <li>130</li>
+        <li>131</li>
+        <li>132</li>
+        <li>133</li>
+        <li>134</li>
+        <li>135</li>
+        <li>136</li>
+        <li>137</li>
+        <li>138</li>
+        <li>139</li>
+        <li>140</li>
+        <li>141</li>
+        <li>142</li>
+        <li>143</li>
+        <li>144</li>
+        <li>145</li>
+        <li>146</li>
+        <li>147</li>
+        <li>148</li>
+        <li>149</li>
+        <li>150</li>
+        <li>151</li>
+        <li>152</li>
+        <li>153</li>
+        <li>154</li>
+        <li>155</li>
+        <li>156</li>
+        <li>157</li>
+        <li>158</li>
+        <li>159</li>
+        <li>160</li>
+        <li>161</li>
+        <li>162</li>
+        <li>163</li>
+        <li>164</li>
+        <li>165</li>
+        <li>166</li>
+        <li>167</li>
+        <li>168</li>
+        <li>169</li>
+        <li>170</li>
+        <li>171</li>
+        <li>172</li>
+        <li>173</li>
+        <li>174</li>
+        <li>175</li>
+        <li>176</li>
+        <li>177</li>
+        <li>178</li>
+        <li>179</li>
+        <li>180</li>
+        <li>181</li>
+        <li>182</li>
+        <li>183</li>
+        <li>184</li>
+        <li>185</li>
+        <li>186</li>
+        <li>187</li>
+        <li>188</li>
+        <li>189</li>
+        <li>190</li>
+        <li>191</li>
+        <li>192</li>
+        <li>193</li>
+        <li>194</li>
+        <li>195</li>
+        <li>196</li>
+        <li>197</li>
+        <li>198</li>
+        <li>199</li>
+        <li>200</li>
+        <li>201</li>
+        <li>202</li>
+        <li>203</li>
+        <li>204</li>
+        <li>205</li>
+        <li>206</li>
+        <li>207</li>
+        <li>208</li>
+        <li>209</li>
+        <li>210</li>
+        <li>211</li>
+        <li>212</li>
+        <li>213</li>
+        <li>214</li>
+        <li>215</li>
+        <li>216</li>
+        <li>217</li>
+        <li>218</li>
+        <li>219</li>
+        <li>220</li>
+        <li>221</li>
+        <li>222</li>
+        <li>223</li>
+        <li>224</li>
+        <li>225</li>
+        <li>226</li>
+        <li>227</li>
+        <li>228</li>
+        <li>229</li>
+        <li>230</li>
+        <li>231</li>
+        <li>232</li>
+        <li>233</li>
+        <li>234</li>
+        <li>235</li>
+        <li>236</li>
+        <li>237</li>
+        <li>238</li>
+        <li>239</li>
+        <li>240</li>
+        <li>241</li>
+        <li>242</li>
+        <li>243</li>
+        <li>244</li>
+        <li>245</li>
+        <li>246</li>
+        <li>247</li>
+        <li>248</li>
+        <li>249</li>
+        <li>250</li>
+        <li>251</li>
+        <li>252</li>
+        <li>253</li>
+        <li>254</li>
+        <li>255</li>
+        <li>256</li>
+        <li>257</li>
+        <li>258</li>
+        <li>259</li>
+        <li>260</li>
+        <li>261</li>
+        <li>262</li>
+        <li>263</li>
+        <li>264</li>
+        <li>265</li>
+        <li>266</li>
+        <li>267</li>
+        <li>268</li>
+        <li>269</li>
+        <li>270</li>
+        <li>271</li>
+        <li>272</li>
+        <li>273</li>
+        <li>274</li>
+        <li>275</li>
+        <li>276</li>
+        <li>277</li>
+        <li>278</li>
+        <li>279</li>
+        <li>280</li>
+        <li>281</li>
+        <li>282</li>
+        <li>283</li>
+        <li>284</li>
+        <li>285</li>
+        <li>286</li>
+        <li>287</li>
+        <li>288</li>
+        <li>289</li>
+        <li>290</li>
+        <li>291</li>
+        <li>292</li>
+        <li>293</li>
+        <li>294</li>
+        <li>295</li>
+        <li>296</li>
+        <li>297</li>
+        <li>298</li>
+        <li>299</li>
+        <li>300</li>
+    </ul>
+</body>
+
+<script>
+    var header = document.querySelector(".header");
+    window.onscroll = function (e) {
+        var y = document.querySelector("html").scrollTop;
+        if (y > 300) {
+            // header.className += " fixed"
+            header.classList.add("fixed")
+        } else {
+            header.classList.remove("fixed")
+        }
+    }
+</script>
+</html>

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/.hbuilderx/launch.json

@@ -0,0 +1,11 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+            "type": "uniCloud",
+            "default": {
+                "launchtype": "local"
+            }
+        }
+    ]
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/App.vue

@@ -0,0 +1,17 @@
+<script>
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style lang="less">
+@import "./common/less/_.less";
+</style>

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/common/less/_.less

@@ -0,0 +1,3 @@
+@import "normalize";
+@import "colors";
+@import "mixins";

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/common/less/colors.less

@@ -0,0 +1 @@
+@theme: red;

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/common/less/mixins.less

@@ -0,0 +1,185 @@
+
+.hairline(@position, @color) when (@position = top) {
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: auto;
+    right: auto;
+    height: 1px;
+    width: 100%;
+    background-color: @color;
+    display: block;
+    z-index: 15;
+    // .transform-origin(50% 0%);
+    html.pixel-ratio-2 & {
+      .transform(scaleY(0.5));
+    }
+    html.pixel-ratio-3 & {
+      .transform(scaleY(0.33));
+    }
+  }
+}
+.hairline(@position, @color) when (@position = left) {
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: auto;
+    right: auto;
+    width: 1px;
+    height: 100%;
+    background-color: @color;
+    display: block;
+    z-index: 15;
+    // .transform-origin(0% 50%);
+    html.pixel-ratio-2 & {
+      .transform(scaleX(0.5));
+    }
+    html.pixel-ratio-3 & {
+      .transform(scaleX(0.33));
+    }
+  }
+
+}
+.hairline(@position, @color) when (@position = bottom) {
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: auto;
+    top: auto;
+    height: 1px;
+    width: 100%;
+    background-color: @color;
+    display: block;
+    z-index: 15;
+    html.pixel-ratio-2 & {
+      .transform(scaleY(0.5));
+    }
+    html.pixel-ratio-3 & {
+      .transform(scaleY(0.33));
+    }
+  }
+}
+.hairline(@position, @color) when (@position = right) {
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: auto;
+    bottom: auto;
+    width: 1px;
+    height: 100%;
+    background-color: @color;
+    display: block;
+    z-index: 15;
+    // .transform-origin(100% 50%);
+    html.pixel-ratio-2 & {
+      .transform(scaleX(0.5));
+    }
+    html.pixel-ratio-3 & {
+      .transform(scaleX(0.33));
+    }
+  }
+}
+
+// Shadow
+.depth(@level:1) {
+  & when (@level = 0) {
+    box-shadow: none;
+  }
+  & when (@level = 1) {
+    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
+  }
+  & when (@level = 2) {
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+  }
+  & when (@level = 3) {
+    box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
+  }
+  & when (@level = 4) {
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
+  }
+  & when (@level = 5) {
+    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
+  }
+  & when (@level = 6) {
+    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
+  }
+  & when (@level = 7) {
+    box-shadow: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12);
+  }
+  & when (@level = 8) {
+    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+  }
+  & when (@level = 9) {
+    box-shadow: 0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);
+  }
+  & when (@level = 10) {
+    box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
+  }
+  & when (@level = 11) {
+    box-shadow: 0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12);
+  }
+  & when (@level = 12) {
+    box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12);
+  }
+  & when (@level = 13) {
+    box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+  }
+  & when (@level = 14) {
+    box-shadow: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12);
+  }
+  & when (@level = 15) {
+    box-shadow: 0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12);
+  }
+  & when (@level = 16) {
+    box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
+  }
+  & when (@level = 17) {
+    box-shadow: 0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12);
+  }
+  & when (@level = 18) {
+    box-shadow: 0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12);
+  }
+  & when (@level = 19) {
+    box-shadow: 0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12);
+  }
+  & when (@level = 20) {
+    box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12);
+  }
+  & when (@level = 21) {
+    box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12);
+  }
+  & when (@level = 22) {
+    box-shadow: 0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12);
+  }
+  & when (@level = 23) {
+    box-shadow: 0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12);
+  }
+  & when (@level = 24) {
+    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
+  }
+}
+
+.no-scrollbar() {
+  &::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    opacity: 0 !important;
+  }
+}
+
+.ellipsis() {
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  overflow:hidden;
+  word-wrap: break-word;
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/common/less/normalize.less

@@ -0,0 +1,419 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/common/less/page/Home.less

@@ -0,0 +1,5 @@
+@import "../_";
+.title {
+  color: @theme;
+  display: flex;
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/config/index.js

@@ -0,0 +1,17 @@
+export default {
+	devBaseUrl: 'http://127.0.0.1:3000/api/json',
+	prodBaseUrl: 'http://127.0.0.1:3000/api/json',
+    urlList: {
+        index: '/index'
+    },
+    checkUrl: function () {
+        switch (process.env.NODE_ENV) {
+          case "development":
+            return this.devBaseUrl;
+            break;
+          case "production":
+            return this.prodBaseUrl;
+            break;
+        }
+      }
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/http/index.js

@@ -0,0 +1,64 @@
+import config from "../config";
+
+class http {
+
+    constructor() {
+        this.Interceptor()
+    }
+
+    get(params) {
+        return new Promise((resolve, reject) => {
+            uni.request({
+                url: params.url,
+                data: params.data,
+                header: Object.assign({
+                    token: uni.getStorageSync('token')
+                }, params.header),
+                success: (res) => {
+                    resolve(res.data)
+                }
+            });
+        })
+    }
+
+    post () {
+
+    }
+
+    Interceptor() {
+        uni.addInterceptor('request', {
+            invoke(args) {
+                uni.showLoading({ title: '加载中...' });
+                args.url = config.checkUrl() + args.url
+            },
+            success(args) {
+                uni.hideLoading();
+                switch (args.data.status) {
+                    case 200:
+                        args.data = args.data.result;
+                        break;
+
+                    case 500:
+                        uni.showModal({
+                            title: '温馨提示',
+                            content: args.data.msg,
+                            success: function (res) {
+                                if (res.confirm) {
+                                    console.log('用户点击确定');
+                                } else if (res.cancel) {
+                                    console.log('用户点击取消');
+                                }
+                            }
+                        });
+                        throw new Error(args.data.msg);
+                        break;
+
+                    default:
+                        break;
+                }
+            }
+        })
+    }
+}
+
+export default new http()

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/main.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import App from './App'
+import _ from './serve/_'
+
+Vue.config.productionTip = false
+
+App.mpType = 'app'
+
+Vue.prototype.$http = _
+
+const app = new Vue({
+    ...App
+})
+app.$mount()

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/manifest.json

@@ -0,0 +1,101 @@
+{
+    "name" : "vyvy",
+    "appid" : "__UNI__F935440",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {
+                "payment" : {},
+                "ad" : {}
+            },
+            "splashscreen" : {
+                "androidStyle" : "common"
+            }
+        },
+        "uniStatistics" : {
+            "enable" : false
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true,
+        "uniStatistics" : {
+            "enable" : false
+        }
+    },
+    "mp-alipay" : {
+        "usingComponents" : true,
+        "uniStatistics" : {
+            "enable" : false
+        }
+    },
+    "mp-baidu" : {
+        "usingComponents" : true,
+        "uniStatistics" : {
+            "enable" : false
+        }
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true,
+        "uniStatistics" : {
+            "enable" : false
+        }
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "h5" : {
+        "uniStatistics" : {
+            "enable" : false
+        }
+    },
+    "mp-qq" : {
+        "uniStatistics" : {
+            "enable" : false
+        }
+    }
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/pages.json

@@ -0,0 +1,56 @@
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "哈哈哈",
+				"app-plus": {
+					"titleNView": {
+						"buttons": [{
+							"text": "\ue534",
+							"float": "left",
+							"fontSrc": "/static/uni.ttf",
+							"fontSize": "22px",
+							"color": "#FFFFFF"
+						}]
+					}
+				}
+			}
+		},
+		{
+            "path" : "pages/about/about",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "关于我",
+                "enablePullDownRefresh": false
+            }
+            
+        },
+		{
+            "path" : "pages/info/info",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
+	"globalStyle": {
+		"navigationBarBackgroundColor": "#fff000",
+		"backgroundColor": "#fff000"
+	},
+	"tabBar": {
+	    "color": "#7A7E83",
+	    "selectedColor": "#3cc51f",
+	    "borderStyle": "black",
+	    "backgroundColor": "#ffffff",
+	    "list": [{
+	        "pagePath": "pages/index/index",
+	        "text": "首页"
+	    }, {
+	        "pagePath": "pages/about/about",
+	        "text": "关于我"
+	    }]
+	}
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/pages/about/about.vue

@@ -0,0 +1,23 @@
+<template>
+	<view>
+		关于我
+		<h2>哈哈哈</h2>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/pages/index/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="content">
+    <image class="logo" src="/static/logo.png"></image>
+
+    <view class="text-area">
+      <view
+        class="title"
+        v-for="(item, index) in newsArr"
+        @click="enterInfo(item)"
+        :key="index"
+      >
+        {{ item.title }}
+      </view>
+    </view>
+
+    <view @click="enterInfo">详情</view>
+  </view>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      title: "测试",
+      newsArr: [
+        { id: 1, title: "测试1" },
+        { id: 2, title: "测试2" },
+        { id: 3, title: "测试3" },
+        { id: 4, title: "测试4" },
+      ],
+    };
+  },
+  onLoad() {
+    this.getInfo()
+  },
+  methods: {
+    async getInfo() {
+      var res = await this.$http.index.home({ id: 1 });
+	    console.log(res);
+    },
+    enterInfo(item) {
+      // #ifdef APP-PLUS
+      uni.setScreenBrightness({
+        value: 0.6,
+        success: function () {
+          console.log("success");
+        },
+      });
+      // #endif
+      // uni.navigateTo({
+      // 	url: `/pages/info/info?id=${item.id}`
+      // })
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import "../../common/less/page/Home.less";
+</style>

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/pages/info/info.vue

@@ -0,0 +1,25 @@
+<template>
+	<view>
+		详情 {{ id }}
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				id: null
+			}
+		},
+		onLoad(option) {
+			this.id = option.id
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/serve/_.js

@@ -0,0 +1,5 @@
+import IndexServe from "./indexServe";
+
+export default {
+  index: new IndexServe()
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/serve/indexServe.js

@@ -0,0 +1,14 @@
+import http from "../http";
+import config from "../config";
+
+export default class IndexServe {
+
+  async home (data = {}, header = {}) {
+    return await http.get({
+      url: config.urlList.index,
+      data: data,
+      header: header
+    })
+  }
+
+}

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/uni.scss

@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:24rpx;
+$uni-font-size-base:28rpx;
+$uni-font-size-lg:32rpx;
+
+/* 图片尺寸 */
+$uni-img-size-sm:40rpx;
+$uni-img-size-base:52rpx;
+$uni-img-size-lg:80rpx;
+
+/* Border Radius */
+$uni-border-radius-sm: 4rpx;
+$uni-border-radius-base: 6rpx;
+$uni-border-radius-lg: 12rpx;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 10px;
+$uni-spacing-row-base: 20rpx;
+$uni-spacing-row-lg: 30rpx;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 8rpx;
+$uni-spacing-col-base: 16rpx;
+$uni-spacing-col-lg: 24rpx;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:40rpx;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:36rpx;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:30rpx;

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/unpackage/cache/apk/apkurl

@@ -0,0 +1 @@
+https://service.dcloud.net.cn/build/download/fdfff4c0-f5f1-11eb-a24b-519014e130c4

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/unpackage/cache/apk/cmManifestCache.json

@@ -0,0 +1 @@
+b1kWame9yBmby5SJKXZdMiBIfIZ7jYUx3ZnXt20I8klef9B7ZTIAFKtSJZT7FZLkNVTUaqHJ1NTLz3cR/Xwlp8l6cbtytTxXjbILQhnDTeifarimsC4rdW6NHuixREC7RWySkCCrbqteNvjyPy/tdMU3E8wm14l2kJwXkerTqE8x/d/pkekm4Cza78Z2DgejvyKZCknLYGESliPbHZz6jQzU8xygszYEd9n35s0lAWqm9yTn9sGNouvHLIum4KYIH167GizSBsTHeomECuGLjniRJtz6qCSkqb23rFrBvyInAjQ37qyK46dgCnugowJ+JTMz4GsqrePW0xucirNYbuH/CMWWv16gT8T0VKg8rw+AlQJGHmNIvVtaNCT1XWspi/LMn9ipILcfCnjLCeVpcq0EYh+2YuhTYrRQPMsB+kCosZWym17BARtB8J9RD/krYhNpzV2s7+/Aool+ymrzPMZqig0XK52k/rgtcjAkuwb/bN04unmdtEa5BQJQwZ5Y9TWCRTGNPiX8rU8GY+WrvajGxBoteUZIAidMFaRwsm3tcyaZa5JcbGLo3RYLlvLC1dSFs2UuMjU6cQiOnjZMBua8KaaEJa0P2+NXG8ISIhwYcNc2UlLctKzGObH9dPRVdZP+ZuFT1toNiURwuVXj5mXUH574fb+ahoEYVrBIGQP/EW9J3WiQ5iOsAadq/rqBrQybofBiLppHtsKhtpIJUcnEXpep3oKT99vqJMHwpEMfZISZ4a7QE4MPNF8S+pM5WIoqkTG/DicsjI4InV6qRhLgNhDJrzdwMHbkXyCfmyYoXLt0gON0IkflQwz9WqTYPA/1yvXfJjZXQhGkagIg5V7vx8Vr5eITHrmMposfV49FwKIrMSumuOj+N6N1bEOZ+nehcpdgDucSzOBll23mV1hMnqt2I3vGulGCH/uA8fhthIAC3yGWUVLNx9OJ5oYyHL8SnWQAoe4cfknSlRi+g0Gf393KXkAjxXChTOXylAFX1uBBb3Bc3DqhiD2ibgV/8tiqa11WtBMpv5pNZKyZaKIcR/i0QKj9ylxC297DUC0bbu3wVzH4SsRLD04+oJclFzVwosAuL0KrQA6dDzcmPaeFL+9pNIKTuX8GqMURfLqqcQl5OXyXPQ8t+GbwIe2HsBz3A7CZWdjC3rUmNNcC1xcLPt/cr/L4cgN0w2Tg2h0tnwydArq2zLvAy24gLMLYBigpsEgu8vgzy6gkso0IrpBofz+tyAAW2IZtANnWx4CMI+GV0qV9iBDhfNC5vqj2yMGJtD13jv7fPukfXvNSPzJZv1wzZbpA7W44e1IHrA31wKqf+KpP506qmzG4fVqbo6+Mu10skrtug8m2MygqB4SqeWLKLA69hW1yd4ZnV7EXAV2odtCOQdziLof157l6dw4A/0+5ACvVsCwmRJwbQdUnA7VENvyaNPfRsb7Z7PtNEMStvSgZRmxngN/9S1En/tPaPPnG98y2546tHuN153efY8a3Ebam2s1b1xcsGc6+0qCIdbvI4zUYCMG+j7UI/JyEbbxhaa2I3YC3EwdKFXUSP71jPrCIrwuX4vgnIgtqGaA0mXxAAwX3IpGvwCfZvJqNJtLl5EVfThSlSYbF8PgfKG/MK6krs2ZfwwM/qAG/t+k/u/zzmvnYJfRywprh8/ayjyr5W7TkvW4yYiVW+L6k817uOSSgaDirQecUs+i9qAP90gjL2SXmnyqI55YMice/GpvqkhP8LDFdQpgRcRafh/YjrdQBceQ9F7YyWZOeVyAIe/cdLNcfqL7ajqdBlq5FPitIFAg+jHBQQf7EMMwg1b//yLuVQJwwysIaqrDbEV0FlmY5rxRTT7MDnVuMzSpsP9F5yEp2sDOib1lz9p5QfrCvGApb9y8bFQx6+m9eHSQpwWR1oswrMKXB5W3bB/Dp3e+E1viDEkgF3oB5XYcEd1mUkKM8us3/o9ZAnTYK0QtSPxDTVqtkcuExdPzqQvm2fgO0W5McuzeGVKYFwgvHnJpiy4mOGC+Ip1JpX6RS8cjIBBIo1hQh828Zh90z1ULZE4tnwQ0k+bb53X/vSKeR7HxeNBs39kguKqMt4kkO5wAcbv8zoyBm7c9drsUQZbGvd84DwFxr0BksjtF4fLLYEOjyMlQD9rip7sNTIGmaD+ryHgLsnb/ry79WrU0fBrVoR7gVx3O3/9yTOyy/+/4gj+G2DTfzyOX244zd2DuDad6QWnbQe8zwrv0sXq1PkC+BqSlVqbCU/FlJ8RH1cWcCOantgivelmZjqPnpjKIuUJrtSh2oqoothmUec1Uz/rhFTGAdnuJxPr5k7U4IKaHV7B/DJXJ8pgfwfMC1yAXOcoqEPbl8/xVqiKlAHmFUd7v/CB9KpQ4OXcxhSnJidn5zXVDPyfqytrkZDrG12evLlYJyB0mbG+y0aiwv0LDxeoKw4qvg/HrFgHqqfvsRhKtV1gnLzfYdyJODJ1NdH0alxC7uMlNeUb9/MGW9tGQ5Orq7pY8aQf+qeMeqysw+4HN8Coo20nZMSPSkoZ1LaS9W9HtTIR1gs6Gw+C45vEx0NS+21BkUZxshXyS7pE1oxfEn1BV5HVwhcNoCzS4Tm199Th1fAta9YO0+WMdPtVkd0NymoaziSUc3ZqzzwxRF5oOuUriQ0ICAUoxSWp84n+HFytpi45FoEOa5lxwARqkS0V0ZpaWed/fUDNDK1VREBTs5Y6n1psAO0+EWF6DYRSHgWAJ4VpZWQX1ztG6k1X91lxxIAI2xfSL7oHDnhKiI9f1mTPIbZXIFfnd1HmTH7dYyMW5AiHHZuoaYaAKFws2VtEW0/vOAvzIitXRK4+f/5BcfAmFE4A2baQWlYYR4N+zZSrNFumVqnIMG79uO3Tda8uq/F1QeBRnRPcy1MXPBI9UYdVUaWeXuhS4oiZFbk8mqGHO8+pFNFuVMP/U5h50ZyLMTmXMgOtGzIyYRJgAqRSLdjAJD9XfNFaxbZl4dQ97zLoqrFnCJ+YG3tUaT6/KD5rEJhfq8fBdfY+8g9jbFGxO1q3lacSAJJLsFQ+r/WMWVx+RYezu7zFJ/ma/kf71veik/Vju359VWoatKmSLkM/CFk2zR+o4v9J2wR2XVsHWe3HNfE4gnXPJvW8AQOIv4EJkXiVM4VsIz81ZIDDyAJitz062ZZlVZo8mdsUwc0Zk/LNn/5fNiLBTxmU6j+yORd+il7KZT6IPSPu6zwoTmq873fuhGspJmrUA4SdLq8YaMUXN2jOPurB9LBFpLVtbaZvdlQQfivWuLOT4MOrIdnQcyhUnBrHpt3R2dyZO4qxz40SgztXrnthcxqj074J1zWuiTpACT+/x80CYNG/Ey1zm6l3Ss3rbFiB4NeZvXMgJ/uenCH/sqcYqzka3Z+5tMI7wAvnPRyzqR3GLOdb/ujxc+aAfGeGzw6Sgj1FA+ggvJ9n9BvqYdypEcMLzk424vkFw6Ggif5RLq23FMIp1swL0S1gozOhO8iozvJ6zo7hoKStzT6bmSVrzAnzgT1vpW6JP41Mk3fmhHfNYUXf7vOlM+MLi+OVCZbRpjS/voF4LKZbiTfgqUrnm6mzC3UtC+v4rRpOXHP/oeMLDGPALz5qlYT2TxOVoU2H33ZAHPHP4oaen8ufNZG2Gq7XWtBzulzb7Z4rA1xw4s9EuRlysVeP2/buFfBWKiZwvB0FpFxNyaPlMP8p9/HSB0bhrfX6d5AEVdXXlq+qysan64Y5gc/FUpF6bbOBI/uRRPV/FP/KY+l97M2gDEBIIfV4pxG4f7Utn2vz9DPa30MoBQ32Kyy8qshVJe1K8ooIO3cEwQ4WTsLwrD7R7T9C4lr3IZaJjv1s0XXhH7edR4ubcdrgDGAac7p0gJCgKce5RRiOYxf8Oyprrf6InvGL7Ipdp72lMgBXEABifFtwRjHpiEB6MJ2FFYHDfYHGQBefgUSChH/8ZgFoi8gzrDul196UQMJrBYvUmIqLRU+L+ZMiJuwLe+dumTZ74YqBkdLSX1g0GY4aua4MWhj3O4qmowpGO92OV6y2KxdYLu8jhpcO7SCLQ+LT+bVZt/fgTXJHtkkBTiNQzEbuPBE1A0wb0QyshytogewOyKpHHmkwsl1JowCOga+pOzrtWBZBjEm8FqT/GuFNb1JLLlL0MboAWJA7smsokEr8DzqdEKlyTs4HZi15ZyMKUpDWcJBTt40IWGIFdyastjyFpHreZsO5+j3weyLCx1Y3bXr+z3NbdZoWFutL+suLsq+gM6JF6K1WFx3Q4wKg8g8mXTo+vjCAWO+ewTON3p6VCbA/NUpRSZ8JZCHpDoz4xliQPl1lUrnp1nKiPj2yjFc5vHbOPJATUg2EEf6Qxl+acTHm68Dxoj4TkioO2YRIASN1it539d3ivBoLOExGocU3nFAx2OgwVWnvZIyOa7

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/unpackage/cache/certdata

@@ -0,0 +1,3 @@
+andrCertfile=C:/kj/HBuilderX/plugins/app-safe-pack/Test.keystore
+andrCertAlias=android
+andrCertPass=ep/Tdjka4Y7WYqDB6/S7dw==

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/unpackage/cache/wgt/__UNI__F935440/__uniappview.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var __UniViewStartTime__ = Date.now();
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title>View</title>
+    <link rel="stylesheet" href="view.css" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="__uniappes6.js"></script>
+    <script src="view.umd.min.js"></script>
+    <script src="app-view.js"></script>
+  </body>
+
+</html>

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/unpackage/cache/wgt/__UNI__F935440/app-config-service.js

@@ -0,0 +1,8 @@
+
+var isReady=false;var onReadyCallbacks=[];
+var isServiceReady=false;var onServiceReadyCallbacks=[];
+var __uniConfig = {"pages":["pages/index/index","pages/about/about","pages/info/info"],"window":{"navigationBarBackgroundColor":"#fff000","backgroundColor":"#fff000"},"tabBar":{"color":"#7A7E83","selectedColor":"#3cc51f","borderStyle":"black","backgroundColor":"#ffffff","list":[{"pagePath":"pages/index/index","text":"首页"},{"pagePath":"pages/about/about","text":"关于我"}]},"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"vyvy","compilerVersion":"3.1.22","entryPagePath":"pages/index/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
+var __uniRoutes = [{"path":"/pages/index/index","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"哈哈哈","titleNView":{"buttons":[{"text":"","float":"left","fontSrc":"/static/uni.ttf","fontSize":"22px","color":"#FFFFFF"}]}}},{"path":"/pages/about/about","meta":{"isQuit":true,"isTabBar":true},"window":{"navigationBarTitleText":"关于我","enablePullDownRefresh":false}},{"path":"/pages/info/info","meta":{},"window":{"navigationBarTitleText":"","enablePullDownRefresh":false}}];
+__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
+__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
+service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:Math.round(f/20)})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:void 0,window:void 0,document:void 0,frames:void 0,self:void 0,location:void 0,navigator:void 0,localStorage:void 0,history:void 0,Caches:void 0,screen:void 0,alert:void 0,confirm:void 0,prompt:void 0,fetch:void 0,XMLHttpRequest:void 0,WebSocket:void 0,webkit:void 0,print:void 0}}}});

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/unpackage/cache/wgt/__UNI__F935440/app-config.js

@@ -0,0 +1 @@
+(function(e){function r(r){for(var n,l,i=r[0],p=r[1],a=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);f&&f(r);while(s.length)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var p=t[i];0!==o[p]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={"app-config":0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e["default"]}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this["webpackJsonp"]=this["webpackJsonp"]||[],p=i.push.bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var f=p;t()})([]);

历届学生/吴欣阳/项目开发/上课项目/uniapp 模板/unpackage/cache/wgt/__UNI__F935440/manifest.json

@@ -0,0 +1 @@
+{"@platforms":["android","iPhone","iPad"],"id":"__UNI__F935440","name":"vyvy","version":{"name":"1.0.0","code":"100"},"description":"","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"target":"id:1","autoclose":true,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"light","background":"#fff000"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"splashscreen":{"androidStyle":"common"},"google":{"permissions":["<uses-feature android:name=\"android.hardware.camera\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"packagename":"uni.UNIF935440","password":"","aliasname":"","keystore":"html5plus://test","custompermissions":true},"apple":{"devices":"universal"},"plugins":{"ad":{},"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}},"orientation":["portrait-primary"],"icons":{"ios":{"prerendered":"false","iphone":{"app@2x":"","app@3x":"","spotlight@2x":"","spotlight@3x":"","settings@2x":"","settings@3x":"","notification@2x":"","notification@3x":""},"appstore":"","ipad":{"app":"","app@2x":"","proapp@2x":"","spotlight":"","spotlight@2x":"","settings":"","settings@2x":"","notification":"","notification@2x":""}},"android":{"hdpi":"icon-android-hdpi.png","xhdpi":"icon-android-xhdpi.png","xxhdpi":"icon-android-xxhdpi.png","xxxhdpi":"icon-android-xxxhdpi.png"}}},"uniStatistics":{"enable":false},"allowsInlineMediaPlayback":true,"safearea":{"background":"#ffffff","bottom":{"offset":"auto"}},"uni-app":{"compilerVersion":"3.1.22","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"tabBar":{"color":"#7A7E83","selectedColor":"#3cc51f","borderStyle":"rgba(0,0,0,0.4)","backgroundColor":"#ffffff","list":[{"pagePath":"pages/index/index","text":"首页"},{"pagePath":"pages/about/about","text":"关于我"}],"height":"50px","child":["lauchwebview"],"selected":0},"launch_path":"__uniappview.html","adid":"125309060407"}}