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

发布时间：2020-12-14 19:04:34 所属栏目：资源来源：网络整理

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

引言

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

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

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

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

根据理解画了流程图

二.项目整体布局搭建

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

其中素材用到了阿里巴巴图标库?(?www.iconfont.cn?)

实现效果：

三.用户注册登录

在此前我们需要开通云开发并在数据库中创建存储用户信息的集合.
引入Vant Weapp 和ColorUI组件库（组件丰富，上手方便，色彩搭配beautiful:+1:）?
youzan.github.io/vant-weapp/…?
www.color-ui.com/

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

启动动画过渡页:

点击查看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').get().then(res => { //获取用户数据
                this.arr = res.data
                for (let i = 0; i < this.arr.length; i++) { //循环判断用户数据中是否存在用户
                    if (this.openid == this.arr[i]._openid) {
                        this.panduan = 'true'
                    }
                }
            }).then(res => {
                this.panduan == 'true') { //存在用户跳转登录页面
                    wx.reLaunch({
                        url: '/pages/index/index',})
                } else this.data.panduan == '') {
                    wx.redirectTo({
                        url: '/pages/login/login' //不存在用户跳转登录页
                    })
                }
            })
            }).catch(err => {
                wx.showToast({
                    icon: 'none',title: '用户信息获取失败，请检查网络',})
            })
    }
})
复制代码

用户登录页:

点击查看js代码

Page({
    data: {
        userid:'no',openid: ''
    },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(){
        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) {
                    'yes'
                }
            }
            var pattern = /^d{6,12}$/
            if(this.userid == '000001'){
                wx.switchTab({
                    url: '/pages/index/index'
                })
            }if (pattern.test(this.userid) && data.haveuserid == 'yes' && data.errMsg == 'getUserInfo:ok'){
                wx.switchTab({
                    url: 'getUserInfo:fail auth deny' || '') {
                wx.showToast({
                    title: '请授权后再登录',icon: 2000
                })
            }if (!pattern.test(this.userid)) {  //判断是否符合用户名
                wx.showToast({
                    title: '请输入6-12位数字',0);">1500
                })
            }'no') {
                wx.showToast({
                    title: '学号或工号错误或不存在,请重新输入或注册',0);">2000
                })
            } 
        })
    },registerBtn(){
        wx.redirectTo({
            url: '/pages/register/register'
        })
    },onLoad: function (options) {
        this.setData({
            trueBtn:true  //用户授权框样式
        })
        wx.cloud.callFunction({ data: {},success: res => {
                this.openid = res.result.openid
            },fail: err => {
                wx.showToast({
                    icon: <view class="title">登录</view>
<view>
    <"input">
        <image src="../../images/userimg.png"></image>
        <input class="inputBtn" bindinput="useridInput" placeholder="请输入学号或工号"></input>
    </"userBtn">
        <button hidden="{{ userBtn }}" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo"
            class="onGotUserInfo"></button>
        <image hidden={{ trueBtn }}" class="true" src="../../images/true.png"></text class="userTit">用户授权</text>
    </button class="loginBtn shadow bg-blue" bindtap="loginBtn">登 录</button>
    <"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;
    120rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    background-color: #f6f6f6;
    display: flex;
    justify-content: start;
}
.input image{
    30rpx;
    height: 6rpx;
    display: block;
}
.inputBtn {
    100%;
    40rpx;
    margin-left: 20rpx;
}
.loginBtn,.registerBtn {
    400rpx;
    #07c160;
    color: white;
    font-weight: 600;
}
.loginBtn {
    margin-bottom: 60rpx;
    60rpx;
}
.userBtn {
    160rpx;
    190rpx;
    justify-content: flex-start;
}
.onGotUserInfo {
    44rpx;
    0;
    border: 6rpx solid #07c160;
}
.true{
    44rpx;
}
.userTit{
    12rpx;
}
复制代码

用户注册页:

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

先来看看完成后的效果图

1.获取当前定位城市信息.

前期需要注册腾讯地图并认证，获取key，在项目中引入微信小程序JavaScript SDK，具体步骤可以参考腾讯地图api:point_up_2:（链接见上）

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.根据定位获取到的城市信息，调用天气接口获取当前城市天气数据.

 + 定位获取到的城市名,header: {
        'content-type': 'application/json' // 默认值
    },success(res) {
        //返回城市天气数据
    }
})
复制代码

3.根据当前天气状况判断天气模块的显示隐藏. 例如：

data.result.weather[i].info.day[1].indexOf('晴') >= 0) { //判断条件为接口返回数据
        //晴天天气模块显示其他隐藏
    } '阴') >= 0 || 
    res.'云') >= 0) {
        //多云或阴天天气模块显示其他隐藏
    } '小雨') >= //小雨气模块显示其他隐藏 
    } '大雨') >= //大雨气模块显示其他隐藏           
    } '雪') >= //下雪天气模块显示其他隐藏            
    }
复制代码

4.因为返回的接口数据有些是自己不想要的，或者想自己添加一些新的图片文字，所以将数据重新编写成对象数组的形式，最后渲染出来就可以了.例如下面这个模块

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!