记《高校考勤系统》小程序（1）

我TM心态崩了呀
3,066 阅读8分钟

这是其他几篇的地址：
记《高校考勤系统》小程序（1）
记《高校考勤系统》小程序（2）
记《高校考勤系统》小程序（3）

引言

这是我自学小程序并上线的第一个算是完整的项目(其实是♀朋友的毕业设计需求🤯)，前端萌新一枚.其中肯定会有许多不合理或需要改进的地方请大家指出，谢谢！😎😎(前期准备工作就不介绍啦，我们直接进入正题)

avatar

一.功能需求整理，思路规划

  • 1.用户注册登录.
  • 2.教师及学生课程表信息关联、课程表信息查看.
  • 3.校园信息发布、签到任务发布、请假管理、用户管理.
  • 4.自己顺手加的天气，海报生成功能.

拿到需求想了想除了注册登录，主要划分两大块，一为普通学生用户功能，二为管理员教师功能.因为要在一个小程序中全部展示，所以思考在用户注册时添加‘status’字段作为后续用户权限判断依据来展示相对应的页面及功能。(也不知道这样做对不对😢，头大)

根据理解画了流程图

二.项目整体布局搭建

小程序主要划分为四块，所以首先我们在app.json中创建对应的tabbar.

实现效果：

三.用户注册登录

这里我新建了三张页面分别为启动动画过渡页、登录页、注册页.

启动动画过渡页:

  • 这里做了如流程图所示的判断：当用户打开小程序时首先进入过渡页，此页中先会获取用户的openid，然后在数据库用户集合中查找是否存在openid，如果已存在则跳转小程序首页，如果不存在则跳转登录页面，进行用户注册授权.（初次接触，想了想只能用这种笨方法，如果有好的方法请推荐给我😘😘😘）
    之前方法有Bug,在此判断用户是否存在的代码已做修改

点击查看js代码 
Page({
    data: {
            openid: '', //获取用户_openid
            panduan: '', //判断用是否存在
            arr: []
    },
    onLoad: function(options) {
        wx.cloud.callFunction({ //获取用户openid
          name: 'login',
          data: {},
        }).then(res => {
          this.openid = res.result.openid
        }).then(res => {
          const db = wx.cloud.database({
            env: 'env-urae8' //数据库环境名
          })
          db.collection('users').where({
            _openid: this.openid,  //判断数据库中是否存在openid
            })
            .get({
              success: function(res) {
                if (res.data.length == 0) {//不存在用户跳转登录页
                  wx.redirectTo({
                    url: '/pages/login/login' 
                  })
                } else if (res.data.length > 0) {//存在用户跳转首页
                  wx.reLaunch({
                    url: '/pages/index/index',
                  })
                }
                // console.log(res.data.length)
              }
            })
          })
      }
})

用户登录页:

  • 用户登录，首先需要输入已注册好的学号且用户授权成功，在此会判断数据库中输入学号的openid是否与当前openid一致，满足以上三点才能成功登录，本来是想多做点验证提高安全保障，没想到也是后面审核给自己挖了大坑，所以我自己设置了一个账号方便微信审核（即不需要验证openid，微信审核人员登录的openid与注册时录入数据库中的openid不一致，所以被打回了好几次，因为账号错误！！😕😒😑）

点击查看js代码 
Page({
    data: {
        userid:'',
        haveuserid:'no',
        openid: '',
        errMsg:''
    },
    onGotUserInfo(e){
        this.data.errMsg = e.detail.errMsg
        if (e.detail.errMsg == 'getUserInfo:ok'){
        this.setData({
            userBtn: true,
            trueBtn:false
        })
    }
    },
    useridInput(e){
        this.userid = e.detail.value
    },
    loginBtn(){
        this.data.haveuserid = 'no'  //清除判断是否存在用户名
        const db = wx.cloud.database({   //数据库新增用户注册信息
            env: 'env-urae8'
        })
        db.collection('users').get().then(res => {
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].userid === this.userid && res.data[i]._openid == this.openid) {
                    this.data.haveuserid = 'yes'
                }
            }
            var pattern = /^\d{6,12}$/
            if(this.userid == '***'){//这里是自己设置的一个管理员账户，方便审核
                wx.switchTab({
                    url: '/pages/index/index'
                })
            }else if (pattern.test(this.userid) && this.data.haveuserid == 'yes' && this.data.errMsg == 'getUserInfo:ok'){
                wx.switchTab({
                    url: '/pages/index/index'
                })
            }else if (this.data.errMsg == 'getUserInfo:fail auth deny' || this.data.errMsg == '') {
                wx.showToast({
                    title: '请授权后再登录',
                    icon: 'none',
                    duration: 2000
                })
            }else if (!pattern.test(this.userid)) {  //判断是否符合用户名
                wx.showToast({
                    title: '请输入6-12位数字',
                    icon: 'none',
                    duration: 1500
                })
            }else if (this.data.haveuserid == 'no') {
                wx.showToast({
                    title: '学号或工号错误或不存在,请重新输入或注册',
                    icon: 'none',
                    duration: 2000
                })
            } 
        })
    },
    registerBtn(){
        wx.redirectTo({
            url: '/pages/register/register'
        })
    },
    onLoad: function (options) {
        this.setData({
            trueBtn:true  //用户授权框样式
        })
        wx.cloud.callFunction({ //获取用户openid
            name: 'login',
            data: {},
            success: res => {
                this.openid = res.result.openid
            },
            fail: err => {
                wx.showToast({
                    icon: 'none',
                    title: '用户信息获取失败，请检查网络',
                })
            }
        })
    }
})

<view class="title">登录</view>
<view>
    <view class="input">
        <image src="../../images/userimg.png"></image>
        <input class="inputBtn" bindinput="useridInput" placeholder="请输入学号或工号"></input>
    </view>
    <view class="userBtn">
        <button hidden="{{ userBtn }}" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo"
            class="onGotUserInfo"></button>
        <image hidden="{{ trueBtn }}" class="true" src="../../images/true.png"></image>
        <text class="userTit">用户授权</text>
    </view>
    <button class="loginBtn shadow bg-blue" bindtap="loginBtn">登 录</button>
    <button class="registerBtn shadow bg-blue" bindtap="registerBtn">注 册</button>
</view>
点击查看wxss代码 
page {
    position: relative;
    background-color: white;
}
.title {
    margin-top: 200rpx;
    text-align: center;
    font-size: 40rpx;
}
.input{
    width: 60%;
    margin: 0 auto;
    margin-top: 120rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    background-color: #f6f6f6;
    display: flex;
    justify-content: start;
}
.input image{
    width: 30rpx;
    height: 30rpx;
    margin-top: 6rpx;
    display: block;
}
.inputBtn {
    width: 100%;
    height: 40rpx;
    margin-left: 20rpx;
}
.loginBtn, .registerBtn {
    width: 400rpx;
    margin: 0 auto;
    background-color: #07c160;
    color: white;
    font-weight: 600;
}
.loginBtn {
    margin-bottom: 60rpx;
    margin-top: 60rpx;
}
.userBtn {
    margin-top: 160rpx;
    margin-left: 190rpx;
    display: flex;
    justify-content: flex-start;
}
.onGotUserInfo {
    width: 44rpx;
    height: 44rpx;
    border-radius: 20rpx;
    padding: 0;
    margin: 0;
    border: 6rpx solid #07c160;
}
.true{
    width: 44rpx;
    height: 44rpx;
}
.userTit{
    margin-left: 12rpx;
}

用户注册页:

  • 注册页用了vant中Steps 步骤条这个组件 youzan.github.io/vant-weapp/…
    这里和登录页逻辑相似，首先会判断注册输入的账号在数据库中是否存在一致的学号和openid，如果存在提示直接登录，不存在则验证输入账号是否满足自己要求（我设置的条件是6-12位数字即可），如果满足以上全部条件，可以进行注册.注册成功跳转首页.

点击查看js代码 
const app = getApp()
wx.cloud.init();
Page({
    data: {
        steps: [{
                text: '第一步',
                desc: '授权登录'
            },
            {
                text: '第二步',
                desc: '输入信息'
            },
            {
                text: '第三步',
                desc: '完成注册'
            }
        ],
        active: 0,
        nextOne: true, //第一个下一步
        hiddenName: false, //授权登录
        userid: '', // 用户学号或者工号
        nickName: '', //用户名
        avatarUrl: '', //用户头像
        userStatus: '0', //用户注册状态
        step: 1,
        openid: '',
        haveuserid:'no'//判断是否存在用户名
    },
    nextOne() {
        this.setData({
            active: 1, //状态为步骤2
            firstBoxHide: true, //隐藏步骤1框
            secondBoxHide: false //显示步骤2框
        })
    },
    onGotUserInfo(e) {
        this.setData({
            nickName: e.detail.userInfo.nickName, //获取用户名
            avatarUrl: e.detail.userInfo.avatarUrl, //获取头像
            nextOne: false, //下一步按钮显示
            hiddenName: true, //授权按钮隐藏
            firstHide: false //显示用户信息
        })
        this.nickName = e.detail.userInfo.nickName
        this.avatarUrl = e.detail.userInfo.avatarUrl
    },
    useridInput(e) {
        this.userid = e.detail.value
    },
    secondBtn() {
        this.data.haveuserid = 'no'  //清除判断是否存在用户名
        const db = wx.cloud.database({   //数据库新增用户注册信息
            env: 'env-urae8'
        })
        db.collection('users').get().then(res => {
            for(var i = 0;i < res.data.length ; i++){
                if (res.data[i].userid === this.userid || res.data[i]._openid == this.openid){
                    this.data.haveuserid = 'yes'
                }
            }   
            var pattern = /^\d{6,12}$/
            if (!pattern.test(this.userid)) {  //判断是否符合用户名
                wx.showToast({
                    title: '请输入6-12位数字',
                    icon: 'none',
                    duration: 1500
                })
            } else if (this.data.haveuserid == 'yes') {  //判断数据库是否存在用户名
                wx.showToast({
                    title: '用户已存在,请直接登录',
                    icon: 'none',
                    duration: 1500
                })
                this.setData({
                    backBtn: false, //显示返回登录按钮
                })
            } else {
                this.setData({
                    secondBtn: true, //隐藏确定按钮
                    nextTwo: false //显示second框下一步按钮
                })
            }
        })
    },
    backBtn(){ //返回登录页面
        wx.redirectTo({
            url: '/pages/login/login'
        })
    },
    nextTwo() {
        this.setData({
            userid: this.userid,
            nickName: this.nickName,
            avatarUrl: this.avatarUrl,
            secondBoxHide: true, //隐藏second框
            thirdBoxHide: false, //显示third框
            nextTwo: true, //隐藏下一步2按钮
            active: 3, //初始状态为步骤3
        })
    },
    thirdBtn() { //完成注册按钮
        const db = wx.cloud.database({   //数据库新增用户注册信息
            env: 'env-urae8'
        })
        db.collection('users').add({
            data: {
                userid: this.userid,
                nickName: this.nickName,
                userStatus: this.data.userStatus
            },
            success: res => {
                wx.switchTab({
                    url: '/pages/index/index'
                })
            }
        })
    },
    onLoad: function(options) {
        this.setData({
            active: 0, //初始状态为步骤1
            nextOne: true, //隐藏下一步按钮
            firstHide: true, //隐藏用户框信息
            firstBoxHide: false, //
            secondBoxHide: true, //隐藏步骤2框
            nextTwo: true, //隐藏second框下一步按钮
            thirdBoxHide: true, //显示third框
            backBtn:true,  //隐藏返回登录按钮
        })
        //获取用户openid
        if (this.data.step === 1 && !this.data.openid) {
            wx.cloud.callFunction({
                name: 'login',
                data: {},
                success: res => {
                    app.globalData.openid = res.result.openid
                    this.step = 2,
                    this.openid = res.result.openid
                },
                fail: err => {
                    wx.showToast({
                        icon: 'none',
                        title: '用户信息获取失败，请检查网络',
                    })
                }
            })
        }
    }
})

<view class="cont">
    <view class="title">注册</view>
    <view class="cont_box">
        <van-steps class="van-steps" steps="{{ steps }}" active="{{ active }}" active-color="#07c160"
            inactive-icon="../../images/true.png" />
    </view>
    <view class="first" hidden="{{ firstBoxHide }}">
        <view class="user_box" hidden="{{ firstHide }}">
        <image class="avatarUrl" src="{{ avatarUrl }}"></image>
    </view>
    <view class="nickName" hidden="{{ firstHide }}">{{ nickName }}</view>
        <button hidden="{{hiddenName}}" open-type="getUserInfo" lang="zh_CN"
            bindgetuserinfo="onGotUserInfo" class="loginBtn shadow bg-blue">微信授权</button>
        <button class="nextOne shadow bg-blue" bindtap="nextOne" hidden="{{ nextOne }}">下一步</button>
    </view>
    <view class="second" hidden="{{ secondBoxHide }}">
        <input class="useridInput" bindinput="useridInput" placeholder="请输入学号或工号"></input>
        <button class="secondBtn shadow bg-blue" bindtap="secondBtn" hidden="{{ secondBtn }}">确定</button>
        <button class="nextTwo shadow bg-blue" bindtap="nextTwo" hidden="{{ nextTwo }}">下一步</button>
        <button class="backBtn shadow bg-blue" bindtap="backBtn" hidden="{{ backBtn }}">返回登录</button>
    </view>
    <view class="third" hidden="{{ thirdBoxHide }}">
        <view class="user_box" >
            <image class="avatarUrl" src="{{ avatarUrl }}"></image>
        </view>
        <view class="nickName">微信名：{{ nickName }}</view>
        <view class="userid">学号：{{ userid }}</view>
        <button class="thirdBtn shadow bg-blue" bindtap="thirdBtn">完成注册</button>
    </view>
</view>
点击查看wxss代码 
page {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: white;
}
.register_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.cont {
    width: 100%;
    margin-top: 200rpx;
    color: black;
    z-index: 1;
    display: flex;
    justify-content: start;
    flex-direction: column;
}
.cont .title {
    font-size: 46rpx;
    text-align: center;
    margin-bottom: 60rpx;
}
.van-steps {
    width: 82%;
    margin: 0 auto;
}
.first, .second, .third {
    width: 100%;
    height: 500rpx;
    position: relative;
    text-align: center;
}
.first .user_box, .third .user_box {
    width: 160rpx;
    height: 160rpx;
    border-radius: 80rpx;
    margin: 0 auto;
    margin-top: 50rpx;
    position: relative;
    overflow: hidden;
    box-shadow:0 2rpx 4rpx rgba(0, 0, 0, .3);
}
.nickName{
    height: 40rpx;
    line-height: 40rpx;
    margin-top: 26rpx;
    font-size: 30rpx;
}
.first .avatarUrl, .third .avatarUrl {
    width: 160rpx;
    height: 160rpx;
    position: absolute;
    top: 0;
    left: 0;
}
.first .success {
    margin-top: 20rpx;
}
.loginBtn, .nextOne, .nextTwo, .backBtn,.secondBtn,.thirdBtn {
    width: 240rpx;
    height: 80rpx;
    background-color: #07c160;
    color: white;
    line-height: 80rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 600;
    border: none;
    position: absolute;
    bottom: 0;
    left: calc(50% - 120rpx);
}
.secondBtn{
    bottom: 260rpx;
}
.backBtn {
    bottom: 130rpx;
}
/* 清除button样式 */
button {
    font-size: 28rpx;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}
button::after {
    border: none;
    background-color: transparent;
}
.button-hover {
    color: rgba(0, 0, 0, 0.8);
    background-color: transparent;
}
.second .useridInput {
    width: 60%;
    height: 40rpx;
    padding: 20rpx;
    border-radius: 12rpx;
    margin: 50rpx auto;
    text-align: left;
    background-color: #f6f6f6;
}
.third .userid {
    margin-top: 30rpx;
}

四.首页页面搭建

  • 天气数据来自阿凡达数据，也是比较了许多接口，这个相对返回数据比较可观且收费也在承受范围之内 www.avatardata.cn/.
  • UI样式参考了许多其他小程序（墨迹天气、小天气等）;
    天气小模块参考 juejin.cn/post/684490… ;
    腾讯地图api lbs.qq.com/qqmap_wx_js… ;

    感谢他们给予的帮助及参考👍👍👍

先来看看完成后的效果图

  • 1.获取当前定位城市信息.
    • 前期需要注册腾讯地图并认证，获取key，在项目中引入微信小程序JavaScript SDK，具体步骤可以参考腾讯地图api👆（链接见上）
    getUserLocation() {
    var qqmapsdk;
    var _this = this;
    wx.getSetting({ //判断是否授权
    success(res) {
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success(res) {
        // console.log('已授权')
        qqmapsdk = new QQMapWX({
          key: "****", //自己申请的key
        })
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success(addressRes) {
            // console.log(addressRes) //这里就可以获取到当前经纬度所在城市的详细信息
            _this.city = addressRes.result.ad_info.city; //获取当前所在城市
            })
          },
          fail(res) {
            console.log(res)
          }
        })
      },
      fail(res) {
        // console.log('未授权')
      }
    })
  }
})
},
  • 2.根据定位获取到的城市信息，调用天气接口获取当前城市天气数据.
    • wx.request({
    url: 'https://api.avatardata.cn/Weather/Query?key=你注册后的key值&cityname=' + 定位获取到的城市名,
    header: {
        'content-type': 'application/json' // 默认值
    },
    success(res) {
        //返回城市天气数据
    }
})
  • 3.根据当前天气状况判断天气模块的显示隐藏. 例如：
    • if (res.data.result.weather[i].info.day[1].indexOf('晴') >= 0) { //判断条件为接口返回数据
        //晴天天气模块显示其他隐藏
    } else if (res.data.result.weather[i].info.day[1].indexOf('阴') >= 0 || 
    res.data.result.weather[i].info.day[1].indexOf('云') >= 0) {
        //多云或阴天天气模块显示其他隐藏
    } else if (res.data.result.weather[i].info.day[1].indexOf('小雨') >= 0) {
        //小雨气模块显示其他隐藏 
    } else if (res.data.result.weather[i].info.day[1].indexOf('大雨') >= 0) {
        //大雨气模块显示其他隐藏           
    } else if (res.data.result.weather[i].info.day[1].indexOf('雪') >= 0) {
        //下雪天气模块显示其他隐藏            
    }
  • 4.因为返回的接口数据有些是自己不想要的，或者想自己添加一些新的图片文字，所以将数据重新编写成对象数组的形式，最后渲染出来就可以了.例如下面这个模块

    • let weather = []
weather.push({
    date: date,
    week: res.data.result.weather[i].week, //星期
    daywea: res.data.result.weather[i].info.day[1], //白天天气
    daytemp: res.data.result.weather[i].info.day[2], //白天温度
    daywind: daywind, //风向
    daywindli: res.data.result.weather[i].info.day[4], //风力
    nightwea: res.data.result.weather[i].info.night[1], //晚上天气
    nighttemp: res.data.result.weather[i].info.night[2], //晚上温度
})
consloe.log(weather)//打印结果
//(5) [{…}, {…}, {…}, {…}, {…}]
//0: {date: "11-27", week: "三", daywea: "小雨", daytemp: "10", daywind: "西风",
        daywindli: "4-5级"，nighttemp: "8"，nightwea: "小雨"，week: "三"}
//1: {date: "11-28", week: "四", daywea: "多云", daytemp: "10", daywind: "西风", …}
//2: {date: "11-29", week: "五", daywea: "阴", daytemp: "11", daywind: "东北风", …}
//3: {date: "11-30", week: "六", daywea: "小雨", daytemp: "13", daywind: "无风", …}
//4: {date: "12-01", week: "日", daywea: "阴", daytemp: "11", daywind: "西风", …}

先写到这里，如果有什么写的不好的地方，请大家指出一起探讨，之后会继续分享后面的内容。大家也可以提前扫码查看小程序，欢迎指出不足，谢谢 🌞😃😃😃

avatar
文章
阅读
粉丝