引言這是我自學小程序并上線的第一個算是完整的項目(其實是♀朋友的畢業設計需求 )，前端萌新一枚.其中肯定會有許多不合理或需要改進的地方請大家指出，謝謝！:sunglasses::sunglasses:(前期準備工作就不介紹啦，我 ...
引言這是我自學湖人vs爵士季后赛并上線的第一個算是完整的項目(其實是♀朋友的畢業設計需求 )，前端萌新一枚.其中肯定會有許多不合理或需要改進的地方請大家指出，謝謝！:sunglasses::sunglasses:(前期準備工作就不介紹啦，我們直接進入正題)
一.功能需求整理，思路規劃
拿到需求想了想除了注冊登錄，主要劃分兩大塊，一為普通學生用戶功能，二為管理員教師功能.因為要在一個小程序中全部展示，所以思考在用戶注冊時添加‘status’字段作為后續用戶權限判斷依據來展示相對應的頁面及功能。(也不知道這樣做對不對:cry:，頭大) 根據理解畫了流程圖
二.項目整體布局搭建小程序主要劃分為四塊，所以首先我們在app.json中創建對應的tabbar.
實現效果：
三.用戶注冊登錄
這里我新建了三張頁面分別為啟動動畫過渡頁、登錄頁、注冊頁.啟動動畫過渡頁:
點擊查看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: '用戶信息獲取失敗，請檢查網絡',
})
})
}
})
復制代碼用戶登錄頁:
點擊查看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 == '000001'){
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;
}
復制代碼用戶注冊頁:
點擊查看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;
}
復制代碼三.首頁頁面搭建
先來看看完成后的效果圖
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) { //判斷條件為接口返回數據
//晴天天氣?？橄允酒淥?/span>
} else if (res.data.result.weather[i].info.day[1].indexOf('陰') >= 0 ||
res.data.result.weather[i].info.day[1].indexOf('云') >= 0) {
//多云或陰天天氣?？橄允酒淥?/span>
} 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: "西風", …}
復制代碼
先寫到這里，如果有什么寫的不好的地方，請大家多多包涵，之后會繼續分享后面的內容。大家也可以提前掃碼查看小程序，歡迎指出不足，謝謝 |
