古怪学习笔记

古怪学习笔记，亲测可用，对于项目开发，提示任务进度，可以提高代码的复用率，笔记中都有比较详细的注释。

数据展示

数据表格展示

tp中

h5

<!DOCTYPE html>
<html>

<head>
    <title>{$Think.config.title}</title>
    <meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1">
    <meta name="format-detection" content="telephone=yes"/>
    <script type="text/javascript">
        document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.getBoundingClientRect().width ||
            window.screen.width) / 20 + 'px'
        window.onresize = function () {
            document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.getBoundingClientRect().width ||
                window.screen.width) / 20 + 'px'
        }
    </script>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>

</head>

<body class="container">
<table class="layui-table" id="list" lay-filter="list"></table>
</body>

<script type="text/javascript" src="__static__/js/jQuery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script>
    layui.use(['table'], function () {
        var $ = layui.jquery,
            table = layui.table;
        tableIn = table.render({
            elem: '#list',
            url: '{:url("show")}',
            method: 'post',
            title: '数据表',
            toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
            // defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            //     title: '提示'
            //     ,layEvent: 'LAYTABLE_TIPS'
            //     ,icon: 'layui-icon-tips' }],
            defaultToolbar: false,
            cols: [[
                // {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', width: 80, type: 'numbers', fixed: true, sort: true},
                {field: 'username', title: '名字', width: 150,},
                {field: 'wxname', title: '微信名', width: 150,},
                {field: 'tel', title: '电话', width: 150,},
                {field: 'score', title: '雪球', width: 150,},
                // {field: 'create_time', title: '创建时间', width: 180,templet:'#create_time'},
            ]],
            limits: [5, 10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true
        });
    })
</script>
</html>

php

/**
 * 展示数据表
 * 作者：糜家智
 * 时间：2021/7/13 10:20
 */
public function show(Request $request){
    if ($request->isPost()) {
        $keys = $this->request->post('keys', '', 'trim');

        $where = [];
        if ($keys != '') {
            $where[] = ['title', 'like', '%' . $keys . '%'];
        }

        $page = $this->request->post('page');
        $limit = $this->request->post('limit');
        $tol = ($page - 1) * $limit;

        $banner = model('user')->where($where)->limit($tol, $limit)
            ->order('score desc')
            ->select();
        $count = model('user')->where($where)->count();
        if (!$banner) error();
        success($banner, $count);
    }
    return view();
}

原生php

<!DOCTYPE html>
<html>

<head>
    <title>报名名单</title>
    <meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1">
    <meta name="format-detection" content="telephone=yes"/>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
    <style>
        .layui-laypage-skip{display: block !important;}
        .layui-table-page{height: 118px !important;text-align: center !important;}
        #list{margin-top: -18px;}
        .title{position: absolute;width: 100%;top: 4vw;z-index: 999;text-align: center}
    </style>
</head>

<body class="container">
<p class="title">报名名单</p>
<table class="layui-table" id="list" lay-filter="list"></table>
</body>

<script type="text/javascript" src="./js/jQuery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script>
    layui.use(['table'], function () {
        var $ = layui.jquery,
            table = layui.table;
        tableIn = table.render({
            elem: '#list',
            url: 'select.php',
            method: 'post',
            title: '数据表',
            toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: false,
            cols: [[
                {field: '0', title: 'ID', type: 'numbers', fixed: true},
                {field: '2', title: '微信名', width: 100,},
                {field: '3', title: '名字', width: 100,},
                {field: '4', title: '电话', width: 120,},
                {field: '5', title: '地址', width: 150,},
                {field: '7', title: '身份证号', width: 100,},
            ]],
            limits: [5, 10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true
        });
    })
</script>
</html>

查询数据的select.php

<?php
header('Content-type:text/json');
require_once('php/mysql.class.php');
$db = new Mysql(
    array('dbhost' => '124.71.68.151',
        'dbuser' => 'guguan',//用户名
        'dbpsw' => 'guguan2021.',//数据库密码
        'dbname' => 'guguan',//数据库名字
        'dbcharset' => 'utf8mb4'//字符集
    )
);
$table = 'ty_20210709_user';
$page = $_POST['page'];
$limit = $_POST['limit'];
$tol = ($page - 1) * $limit;

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $find = $db->findAll("select * from $table limit $tol,$limit");
    $count = $db->findOne('select count(id) from '.$table);
    echo json_encode(["code" => 0, "data" => $find, "count" => $count[0]]);
    exit();
}
?>

排行榜展示

简单模拟，效果没问题

引入js：<script src="https://cdn.bootcdn.net/ajax/libs/iScroll/5.2.0/iscroll-infinite.min.js" defer></script>

ajax初次加载

scrollData = function () {
   var myScroll = new IScroll("#wrapper", {
      scrollbars: false,//有滚动条
      mouseWheel: false,//允许滑轮滚动
      interactiveScrollbars: true,//滚动条可以拖动
      scrollY: true,//纵向滚动条可以使用
      freeScroll: true,//既有上下又有左右（自由滚动）
      probeType: 1,//对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。
   });

   //开始滚动时触发的事件
   myScroll.on("scrollStart", function () {
      rankData()
   });
}

rankData = function () {
   loading = weui.loading('loading...');

   $.ajax({
      type: "POST",
      url: actionRoot + 'get_rank',
      dataType: 'json',
      data: {
         page: page
      },
      //请求成功
      success: function (res) {

         if (res.code == 1) {

            var data = res.data;
            var limit = (page - 1) * 10;

            for (var i = 0; i < data.length; i++) {
               var value = i + limit + 1;
               var num = value;
                
               if (value === 1){
                  num = '<img class="rank-img" src="'+sources_root+'img/rank1.png">';
               }

               if (value === 2){
                  num = '<img class="rank-img" src="'+sources_root+'img/rank2.png">';
               }

               if (value === 3){
                  num = '<img class="rank-img" src="'+sources_root+'img/rank3.png">';
               }

               $(`<div class="rank-c">
                       <div class="rank-one">${num}</div>
                       <div><img class="rank-head" src="${data[i].wxhead}"></div>
                       <div class="wx-name">${data[i].wxname}</div>
                       <div class="grade">${data[i].score}</div>
                   </div>`).appendTo($("#wrapper"))
            }

            loading.hide();
            $(".ranking").show()
            page++;
         } else {
            mui.toast(res.msg, {duration: '1000', type: 'div'})
         }
      },

      //请求失败，包含具体的错误信息
      error: function (e) {
         console.log(e);
      }
   });

}

$(".pageh0-4-2").click(function() {
   rankData()
   setTimeout(function () {
      scrollData()
   }, 1000)
})

ajax二次加载

var myScroll = new IScroll("#wrapper", {
   scrollbars: false,//有滚动条
   mouseWheel: false,//允许滑轮滚动
   interactiveScrollbars: true,//滚动条可以拖动
   scrollY: true,//纵向滚动条可以使用
   freeScroll: true,//既有上下又有左右（自由滚动）
   probeType: 1,//对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。
});

var page = 2;

//开始滚动时触发的事件
myScroll.on("scrollStart", function () {
   loading = weui.loading('loading...');

   $.ajax({
       type: "POST",
       url: actionRoot + 'get_rank',
       dataType: 'json',
       data: {
           page: page
       },
       //请求成功
       success: function (res) {

           if (res.code == 1) {
               var data = res.data;
               var limit = (page - 1) * 10;

               for (var i = 0; i < data.length; i++) {
                   $(`<div class="rank-c">
                       <div class="rank-one">${i + limit + 1}</div>
                       <div><img class="rank-head" src="${data[i].wxhead}"></div>
                       <div class="wx-name">${data[i].wxname}</div>
                       <div>${data[i].score}</div>
                   </div>`).appendTo($("#wrapper"))
               }

               loading.hide();
               page++;
           } else {
               mui.toast(res.msg, {duration: '1000', type: 'div'})
           }
       },

       //请求失败，包含具体的错误信息
       error: function (e) {
           console.log(e);
       }
   });
});

页面和样式


<div class="ranking" style="display: none">
    <div class="close">
    </div>
    <img data-src="__static__/img/rank.png" class="rankimg">
    <div class="rank-table" id="wrapper">

        {volist name="rank" id="vo" key="k"}
        <div class="rank-c">
            {if condition="$k eq 1"}
            <div class="rank-one"><img class="rank-img" data-src="__static__/img/rank1.png"></div>
            {elseif condition="$k eq 2"}
            <div class="rank-one"><img class="rank-img" data-src="__static__/img/rank2.png"></div>
            {elseif condition="$k eq 3"}
            <div class="rank-one"><img class="rank-img" data-src="__static__/img/rank3.png"></div>
            {else/}
            <div class="rank-one">{$k}</div>
            {/if}
            <div><img class="rank-head" data-src="{$vo.wxhead}"></div>
            <div class="wx-name">{$vo.wxname}</div>
            <div>{$vo.score}</div>
        </div>
        {/volist}

    </div>
</div>

.ranking{position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);}
.rankimg{width: 80vw;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.close{position: absolute;width: 5vw;height: 5vw;left: 50%;top: 50%;transform: translate(-710%, -1172%);}
.rank-table{
    font-size: 12px;width: 65vw;position: absolute;left: 50%;top: 50%;height: 102vw;overflow: hidden;
    overflow-y: scroll;transform: translate(-50%, -47%);display: flex;flex-direction: column;justify-items: center;
}
.rank-c{margin-top: 2vw;display: flex;flex-direction: row;justify-items: center;align-items: center;justify-content: space-around;}
.wx-name{width: 30%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.rank-head{width: 9vw;height: 9vw;border-radius: 100%;position: sticky !important;}
.rank-img{width: 4vw;margin-left: -1vw;margin-top: -1vw;}
.rank-one{width: 4vw;height: 4vw;text-align: left}

图片资源

页面显示

分享弹窗

<div class="share" style="display: none;position:absolute;height: 100%;width: 100%;background-color: rgba(0,0,0,0.6)">
    <img style="width: 94%;left: 3%" data-src="__static__/img/share_alert.png" class="" a-eff="bounceInUp"
         a-fun="" a-dur="1s" a-del="1s"/>
</div>

$(".share").click(function () {
    $(".share").hide()
})

助力

分享助力

引入js

<script type="text/javascript" src="__static__/js/wxshares.js?v=2" defer></script>

main.js

getCount = function(type, isCom, callback) {
   return false;
   if (!isCom) {
      isCom = null
   }
   if (!type) {
      type = null
   }
   loading = weui.loading('loading...');
   $.ajax({
      type: 'POST',
      async: false,
      data: {
         'type': type,
         'isCom': isCom
      },
      url: actionRoot + 'getDrawcount',
      success: function(res) {
         console.log(res.msg)
         loading.hide();
         if (res.code == 1) {
            weui.alert('恭喜您获得一次额外游戏机会！')
         }

      }
   })
}

wxshares.js 中找到对应方法

数据提交

用户信息提交

适用于弹窗为一整张图片，输入框、关闭和提交按钮覆盖图片

<!--        填写用户信息 -->
<div class="info popover">
    <div class="info-con">
        <div class="close-info"></div>
        <input type="text" name="username">
        <input style="margin-top: 19.8vw" type="number" name="tel">

        <img data-src="__static__/img/info-bg.png" btn="" class="info-bg ani" a-eff="zoomIn" a-fun=""
             a-dur="1s" a-del="0.5s"/>

        <div class="sub-info"></div>
    </div>
</div>

.info-con{
    position: absolute;left: 50%;top: 35%;width: 100%;height: auto;
    transform: translate(-50%, -50%);
}
.info-bg{width: 80%;left: 10%;}
input{
    border: 0;margin-left: 54%;transform: translate(-50%,0);
    width: 32%;margin-top: 8.7vw;position: absolute;z-index: 999;
    height: 5vw;background-color: transparent;
    padding-left: 2vw;
}
.close-info{
    position: absolute;left: 83%;top: 2vw;transform: translate(-50%, 0);
    width: 4vw;height: 4vw;z-index: 999;
}
.sub-info{
    position: absolute;left: 50%;top: 33vw;transform: translate(-50%, 0);
    width: 27vw;height: 10vw;z-index: 999;
}

关闭弹窗

$(".close-info").click(function () {
   $(".info").hide()
})

提交信息

//提交信息
$(".sub-info").click(function() {
   let name = $("input[name='username']").val();
   let tel = $("input[name='tel']").val();
   if (name == "" || tel == "") {
      return weui.alert("请填写完整信息")
   }
   if (!checkMobile(tel)) {
      return weui.alert("请填写正确的手机号");
   }
   loading = weui.loading("loading...");
   $.post(
      actionRoot + "putinfo", {
         username: name,
         tel: tel,
      },
      function(res) {
         loading.hide();
         if (res.code == 1) {
            weui.alert("信息提交成功！");
         } else {
            weui.alert(res.msg);
         }
         $(".info").hide();
      }, "json");
})

/**
 * 提交信息
 * 作者：糜家智
 * 时间：2021/7/21 15:20
 */
public function putInfo(Request $request)
{
    $find = model('User')->where('openid', $this->openid)->find();

    if (!$find) $this->error('网络错误');

    if ($find['tel']) {
        $this->success('已经提交过了，无需重复！');
    }

    $username = $request->post('username');
    $tel = $request->post('tel');

    $insert_data = [
        'username' => $username,
        'tel' => $tel,
    ];

    $res = model('User')->where('openid', $this->openid)->update($insert_data);

    if ($res) {
        return ['code' => 1, 'msg' => '信息提交成功！', 'data' => ['wxname' => $this->wxname, 'openid' => $this->openid, 'wxhead' => $this->wxhead]];
    } else {
        $this->error('网络错误，请稍后再试');
    }
}

function checkMobile(str) {
   var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
   if (!myreg.test(str)) {
      return false;
   } else {
      return true;
   }
}

weui下拉选择

var dataArr = [
    {
        label: '',
        value: ''
    }
];
$(".address").click(function () {
    weui.picker(dataArr, {
        defaultValue: '', // 这里是value
        onChange: function (result) {
        },
        onConfirm: function (result) {
            $("input[name='address']").val(result[0].value)
        },
        id: 'search_xqpicker'
    });
});