小程序社区 › 首页 › 教程 › 查看内容

湖人vs凯尔特人7:记《高?？记谙低场沸〕绦颍?）

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

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

引言

这是我自学湖人vs爵士季后赛并上线的第一个算是完整的项目(其实是♀朋友的毕业设计需求 )，前端萌新一枚.其中肯定会有许多不合理或需要改进的地方请大家指出，谢谢！: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 => {
                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空间

Taro+react自定义导航条/Tabbar菜单 记《高?？记谙低场沸〕绦颍?）

原作者: 我是一个小菜鸡来自: 掘金

fengqingyang 2019-11-30 11:47

可以把源码借来学习下吗

回复

推荐教程

最新Demo