記《高校考勤系統》小程序（1）
這是其餘幾篇的地址：
記《高校考勤系統》小程序（1）
記《高校考勤系統》小程序（2）
記《高校考勤系統》小程序（3）
html
引言
這是我自學小程序並上線的第一個算是完整的項目(實際上是♀朋友的畢業設計需求🤯)，前端萌新一枚.其中確定會有許多不合理或須要改進的地方請你們指出，謝謝！😎😎(前期準備工做就不介紹啦，咱們直接進入正題)
一.功能需求整理，思路規劃
- 1.用戶註冊登陸.
- 2.教師及學生課程表信息關聯、課程表信息查看.
- 3.校園信息發佈、簽到任務發佈、請假管理、用戶管理.
- 4.本身順手加的天氣，海報生成功能.
拿到需求想了想除了註冊登陸，主要劃分兩大塊，一爲普通學生用戶功能，二爲管理員教師功能.由於要在一個小程序中所有展現，因此思考在用戶註冊時添加‘status’字段做爲後續用戶權限判斷依據來展現相對應的頁面及功能。(也不知道這樣作對不對😢，頭大)
前端
根據理解畫了流程圖
二.項目總體佈局搭建
小程序主要劃分爲四塊，因此首先咱們在app.json中建立對應的tabbar.
- 其中素材用到了阿里巴巴圖標庫 (www.iconfont.cn)
實現效果：
三.用戶註冊登陸
- 在此前咱們須要開通雲開發並在數據庫中建立存儲用戶信息的集合.
- 引入Vant Weapp 和ColorUI組件庫（組件豐富，上手方便，色彩搭配beautiful👍）
youzan.github.io/vant-weapp/…
www.color-ui.com/
這裏我新建了三張頁面分別爲啓動動畫過渡頁、登陸頁、註冊頁.
啓動動畫過渡頁:
- 這裏作了如流程圖所示的判斷：當用戶打開小程序時首先進入過渡頁，此頁中先會獲取用戶的openid，而後在數據庫用戶集合中查找是否存在openid，若是已存在則跳轉小程序首頁，若是不存在則跳轉登陸頁面，進行用戶註冊受權.（初次接觸，想了想只能用這種笨方法，若是有好的方法請推薦給我😘😘😘）
點擊查看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 => {
if (this.panduan == 'true') { //存在用戶跳轉登陸頁面
wx.reLaunch({
url: '/pages/index/index',
})
} else if (this.data.panduan == '') {
wx.redirectTo({
url: '/pages/login/login' //不存在用戶跳轉登陸頁
})
}
})
}).catch(err => {
wx.showToast({
icon: 'none',
title: '用戶信息獲取失敗，請檢查網絡',
})
})
}
})
複製代碼
用戶登陸頁:
- 用戶登陸，首先須要輸入已註冊好的學號且用戶受權成功，在此會判斷數據庫中輸入學號的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('未受權')
}
})
}
})
},
複製代碼
wx.request({
url: 'https://api.avatardata.cn/Weather/Query?key=你註冊後的key值&cityname=' + 定位獲取到的城市名,
header: {
'content-type': 'application/json' // 默認值
},
success(res) {
//返回城市天氣數據
}
})
複製代碼
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) {
//下雪天氣模塊顯示其餘隱藏
}
複製代碼
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: "西風", …}
複製代碼
先寫到這裏，若是有什麼寫的很差的地方，請你們指出一塊兒探討，以後會繼續分享後面的內容。你們也能夠提早掃碼查看小程序，歡迎指出不足，謝謝 🌞😃😃😃
相關文章
- 1. 記《高校考勤系統》小程序（2）
- 2. 記《高校考勤系統》小程序（3）
- 3. 考勤系統+（小項目）
- 4. 考勤簽到小程序
- 5. 高校宿舍考勤管理系統演示地址
- 6. 高校學生考勤系統需求分析
- 7. 微信小程序簽到考勤系統
- 8. 學生考勤系統
- 9. 考勤管理系統
- 10. 基於jsp(java)高校學生考勤管理系統設計與實現
- 更多相關文章...
- • 操作系統（OS）平臺 統計 - 瀏覽器信息
- • 系統定義的TypeHandler - MyBatis教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 記《高校考勤系統》小程序（2）
- 2. 記《高校考勤系統》小程序（3）
- 3. 考勤系統+（小項目）
- 4. 考勤簽到小程序
- 5. 高校宿舍考勤管理系統演示地址
- 6. 高校學生考勤系統需求分析
- 7. 微信小程序簽到考勤系統
- 8. 學生考勤系統
- 9. 考勤管理系統
- 10. 基於jsp(java)高校學生考勤管理系統設計與實現