這是其他幾篇的地址：
記《高校考勤系統》小程式（1）
記《高校考勤系統》小程式（2）
記《高校考勤系統》小程式（3）
引言
這是我自學小程式並上線的第一個算是完整的專案(其實是♀朋友的畢業設計需求?)，前端萌新一枚.其中肯定會有許多不合理或需要改進的地方請大家指出，謝謝！??(前期準備工作就不介紹啦，我們直接進入正題)
一.功能需求整理，思路規劃
- 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，如果已存在則跳轉小程式首頁，如果不存在則跳轉登入頁面，進行使用者註冊授權.（初次接觸，想了想只能用這種笨方法，如果有好的方法請推薦給我???）
之前方法有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('未授權')
}
})
}
})
},
複製程式碼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: "西風", …}
複製程式碼