用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

湖人vs骑士直播:記《高??記諳低場沸〕絳潁?)

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-11-28 00:03

引言這是我自學小程序并上線的第一個算是完整的項目(其實是♀朋友的畢業設計需求 ),前端萌新一枚.其中肯定會有許多不合理或需要改進的地方請大家指出,謝謝!:sunglasses::sunglasses:(前期準備工作就不介紹啦,我 ...

引言

這是我自學湖人vs爵士季后赛并上線的第一個算是完整的項目(其實是♀朋友的畢業設計需求 ),前端萌新一枚.其中肯定會有許多不合理或需要改進的地方請大家指出,謝謝!:sunglasses::sunglasses:(前期準備工作就不介紹啦,我們直接進入正題)

一.功能需求整理,思路規劃

  • 1.用戶注冊登錄.
  • 2.教師及學生課程表信息關聯、課程表信息查看.
  • 3.校園信息發布、簽到任務發布、請假管理、用戶管理.
  • 4.自己順手加的天氣,海報生成功能.

拿到需求想了想除了注冊登錄,主要劃分兩大塊,一為普通學生用戶功能,二為管理員教師功能.因為要在一個小程序中全部展示,所以思考在用戶注冊時添加‘status’字段作為后續用戶權限判斷依據來展示相對應的頁面及功能。(也不知道這樣做對不對:cry:,頭大)

根據理解畫了流程圖

二.項目整體布局搭建

小程序主要劃分為四塊,所以首先我們在app.json中創建對應的tabbar.

實現效果:

三.用戶注冊登錄

  • 在此前我們需要開通云開發并在數據庫中創建存儲用戶信息的集合.
  • 引入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 => {
                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;
}
復制代碼

三.首頁頁面搭建

  • 天氣數據來自阿凡達數據,也是比較了許多接口,這個相對返回數據比較可觀且收費也在承受范圍之內 www.avatardata.cn/ .
  • UI樣式參考了許多其他小程序(墨跡天氣、小天氣等); 
    天氣小??椴慰?nbsp;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.根據定位獲取到的城市信息,調用天氣接口獲取當前城市天氣數據.
  • 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) { //判斷條件為接口返回數據
            //晴天天氣??橄允酒淥?/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) {
            //下雪天氣??橄允酒淥?           
        }
    復制代碼
  • 4.因為返回的接口數據有些是自己不想要的,或者想自己添加一些新的圖片文字,所以將數據重新編寫成對象數組的形式,最后渲染出來就可以了.例如下面這個???/li>

    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: "西風", …}
    復制代碼
  • 先寫到這里,如果有什么寫的不好的地方,請大家多多包涵,之后會繼續分享后面的內容。大家也可以提前掃碼查看小程序,歡迎指出不足,謝謝 

    分享至 : QQ空間
    收藏
    原作者: 我是一個小菜雞 來自: 掘金
    体彩p3星期一走势图 像qq运动赚钱的软件 幕墙与土建专业那个赚钱 昵图做图能赚钱不 黑龙江十一选五走遗漏势图一定牛 qq彩票自动赚钱 做了什么能做什么生意赚钱 dnf大转移强化什么赚钱 安徽十一选五开奖结果今天 双色球红球预测 帮人在淘宝京东找券怎么赚钱 崩坏3和fgo哪个更赚钱 草编赚钱 开金店靠什么赚钱 捕鱼达人破解版4 快乐10分开奖查询天津