阅读 729

记《高校考勤系统》小程序(1)

这是其他几篇的地址:
记《高校考勤系统》小程序(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.im/post/5d2f3f… ;
    腾讯地图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: "西风", …}
    复制代码

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

关注下面的标签,发现更多相似文章
评论