第一节：什么构成了微信小程序、创建一个自己的小程序
第二节：微信开发者工具使用教程
第三节：深入了解并掌握小程序核心组件
第四节：初始化云函数和数据库
第五节：云数据库的增删改查
第六节：项目大纲以及制作登录、注册页面
第七节：制作活动申请页面
第八节：活动申请页面的补充
第九节 ”我的“页面制作
第十节：活动详情页面制作
第十一节：活动历史页面制作
第十二节：预约老师页面制作
第十三节：预约历史页面制作
第十四节：活动审批端制作
第十五节：预约审批端制作
目录
前言
1.项目大体框架
2.制作选择页面
2.1第一个选择界面
2.1.1成品图
2.1.2实现思路
2.1.3实际步骤
2.2第二个选择界面
2.2.1成品图
2.2.2实现思路
2.2.3实际步骤
3.制作登录页面
3.1成品图
3.2实现思路（从上往下）
3.3实际操作
4.制作注册页面
4.1成品图
4.2实现思路
4.3实际操作
5*.测试注册界面出现注册失败 ？
5.1*演示图
5.2*问题原因
题外话
前言
在我们学习完前言篇、介绍篇、组件篇后，现在我们正式开启搭建这个审批类的微信小程序！第一节我们将了解这个项目的大体结构并且制作选择页面、用户注册页面以及用户登录页面。那现在我们开始吧！如果这一章节有不懂的可以去看这个知识补充篇
审批类小程序项目实战第一节知识点补充_hiddenSharp429的博客-CSDN博客
1.项目大体框架
这里大概介绍一下我们要做的项目
小程序大体分为两个端口：用户端和审批端。
用户端是给普通用户用来申请活动、查看活动状态、查看活动历史、申请预约、查看预约历史的。
而审批端分为两个部分：审批活动和审批预约，顾名思义审批活动就是来审批所用用户提交的活动信息并给予通过、驳回两种状态。同理审批预约类似
2.制作选择页面
2.1第一个选择界面
在这里我们将制作第一个选择页面，也就是用户登录小程序的第一个页面。
2.1.1成品图
注：这里右下角的图书是该小程序操作手册，点击了之后会返还给用户一个文档链接。之后的文章会实现这个功能，这篇文章暂时用不到。
2.1.2实现思路
1.改变中间最上方的标题
2.添加两个button组件
3.实现点击后跳转页面
4.使用CSS优化UI
2.1.3实际步骤
1.先要在app.json里面创建多个页面（为了方便大家我把代码放在下面了）
"pages": [
"pages/choicePage/choicePage",
"pages/index/index",
"pages/indexLogin/indexLogin",
"pages/indexRegister/indexRegister",
"pages/nextChoice/nextChoice",
"pages/approvalLogin/approvalLogin",
"pages/approvalRegister/approvalRegister",
"pages/appointmentApprovalLogin/appointmentApprovalLogin",
"pages/appointmentApprovalRegister/appointmentApprovalRegister"
],2.修改choicePage页面的最上方的标题
"navigationBarTitleText": "团委小程序"3.添加两个button组件并给予它们相应的CSS代码
choicePage.wxml
<button bindtap="goIndex" class="button_location" style="width: 60%; height: 30%;">
用户端登录
</button>
<button bindtap="goNext" class="Teacherbutton_location" style="width: 60%; height: 30%;">
审批端登录
</button>choicePage.wxss
.Teacherbutton_location{
margin-top: 10px;
border-radius: 80rpx;
color:black;
background-color: #FFFFFF;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
.button_location{
border-radius: 80rpx;
margin-top: 55%;
color:#FFFFFF;
background-color: #D43030;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
}4.实现点击button组件后跳转
知识补充：navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
注意：这里先不需要理解tabbar页面和栈的概念，后面会有补充。只需明白navigateTo是用来跳转非tabbar页面的即可！
Page({
goNext(e){
console.log('点击了审批端登录')
wx.navigateTo({
url: '../nextChoice/nextChoice',
})
},
goIndex(e){
console.log('点击了用户登录')
wx.navigateTo({
url: '../indexLogin/indexLogin',
})
},
})2.2第二个选择界面
在这里我们将制作第二个选择页面，也就是选择审批端后，是要选择审批活动还是审批预约的页面。
2.2.1成品图
2.2.2实现思路
跟制作第一个跳转页面相似。
1.我们同样需要两个button组件
2.修改json文件，添加导航栏标题
3.实现跳转功能
2.2.3实际步骤
因为跟第一个跳转页面制作相似没有新的知识点，这里我就直接把相关的代码全部放在下面了。
nextChoice.wxml
<button bindtap="goApprovalLogin" class="Act_button_location" style="width: 60%; height: 30%;">
我要审批活动
</button>
<button bindtap="goAppointmentLogin" class="Ap_button_location" style="width: 60%; height: 30%;">
我要审批预约
</button>
nextChoice.wxss
.Ap_button_location{
margin-top: 10px;
border-radius: 80rpx;
color:black;
background-color: #FFFFFF;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
.Act_button_location{
border-radius: 80rpx;
margin-top: 55%;
color:#FFFFFF;
background-color: #D43030;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
}nextChocie.js
Page({
goApprovalLogin(e){
console.log('点击了审批活动')
wx.navigateTo({
url: '../approvalLogin/approvalLogin',
})
},
goAppointmentLogin(e){
console.log('点击了审批预约')
wx.navigateTo({
url: '../appointmentApprovalLogin/appointmentApprovalLogin',
})
},
})3.制作登录页面
在这里我们将要制作三个注册和登录页面，它们分别对应的是用户端、审批活动端、审批预约端。废话不多说，直接上成品图！这里我将演示用户端的登录和注册，其他端口的直接套模板然后修改申请的云数据库的集合即可
3.1成品图
3.2实现思路（从上往下）
1.用一个（view）盒子装“用户登录界面”并且给它添加底部的边框的CSS代码
2.用一个（view）盒子装“登录”两个大字，并且实现中间有一定的间距
3.用两个input来获取用户输入的账号和密码
4.用一组眼睛（image）图片和相关的JS代码实现密码可见和隐藏
5.用两个（view）盒子来装“忘记账号”和“注册账号” 注：这里只实现注册账号的功能
6.用一个（button）按钮和相关的JS代码实现登录账号并跳转至用户端主页
3.3实际操作
这里的重难点是云开发数据库的 增、删、改、查操作，以及用点击图片来实现input中type类型的转换。
1.用一个（view）盒子装“用户登录界面”并且给它添加底部的边框的CSS代码
这部分很简单，只是单纯的HTML和CSS知识，我就直接放代码了
<view class="title">
<view class="title_font">用户端登录界面</view>
</view>/* 登录界面 */
.title{
border-bottom: 2px solid grey;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 登录界面的字体 */
.title_font{
font-size: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}2.用一个（view）盒子装“登录”两个大字，并且实现中间有一定的间距
这部分跟上面的同理，不过有需要注意的地方。就是我用了text了组件，并且将它的一个decode属性调为了true，这是为了能够正常编译 的意思！（能够正常显示空格而不打印 ）
<view class="headline"><text decode="true">登 录</text></view>/* 登录大字 */
.headline{
padding-top: 20%;
font-size: 50px;
display: flex;
align-items: center;
flex-direction: column;
}3.用两个input来获取用户输入的账号和密码
获取输入的账号：在前面的组件篇我们有了解过input组件的bindinput有获取用户输入信息的功能，这里我们不再是简单的使用console来打印了，而是要使用setData来实现赋值！
<input bindinput="getAccount" class="inputborder1" placeholder="输入账号"></input> //获取输入的账号
getAccount(e){
this.setData({
account : e.detail.value
})
},我来解释一下这里setData的作用是什么，这里是将返回的e.detail.value 的值赋给data里面的account
获取输入的密码 ：基本逻辑与获取账号信息一样，因为要实现显示和隐藏密码的功能，故有新的内容添加进来了。
<input class="inputborder1" type="{{show}}" placeholder="输入密码" value='{{password}}' bindinput='getPassWord'></input> //获取输入的密码
getPassWord: function(e) {
var password = e.detail.value;
this.setData({
password: password
})
},首先你应该注意到了我这里的type是用双引号和两个花括号起来来，这里的代码意思是什么呢？type的值与JS文件里面data的show字段的值进行绑定了，也就是我type的值是data里面show的值”password“，故初始的这个输入框的type属性是password属性！后面就是通过点击眼睛图片来修改这个show的值来达到密码可见和隐藏的功能！！！
4.用一组眼睛（image）图片和相关的JS代码实现密码可见和隐藏
这里的难点就是在src中用了三元运算符，实现了像条件渲染一样的目的！
<image class='showImg' bindtap='showPassword' src="{{isShow ? '../../icon/open.png' : '../../icon/close.png'}}"></image>//显示密码或者隐藏密码的图片控住函数
showPassword: function() {
if (this.data.isShow) { //如果this.data.isShow为true,则表示为密码小黑点
this.setData({
isShow:false,
show:"password"
})
} else {
this.setData({
isShow: true,
show: "text"
})
}
},5.用两个（view）盒子来装“忘记账号”和“注册账号” 注：这里只实现注册账号的功能
<view bindtap="goRegister" class="goRegister">还没有注册账号?</view> //进入用户端的注册界面
goRegister(){
wx.navigateTo({
url: '../indexRegister/indexRegister',
})
},6.用一个（button）按钮和相关的JS代码实现登录账号并跳转至用户端主页
这里开始使用云开发了，如果你还没初始化记得去app.js中初始化你的数据库不然没办法使用！
<button bindtap="enterApproval" style="width: 88%;">登录</button>这段代码的实现逻辑是这样的，1.获取你输入账号密码 —> 2.查询数据库中符合你输入的账号的数据 ——> 3.验证这条数据中的password的字段的值是否跟你输入的密码一样 ——> 4.若一致则跳转至用户端主页面，不一致则跳出弹窗登录失败
//点击登录
enterApproval(){
let account = this.data.account
let password = this.data.password
db.collection("studentUser")
.where({
account:account
})
.get({})
.then(res=>{
console.log("账号是",this.data.account)
console.log("密码是",this.data.password)
console.log("查询数据库成功",res.data)
if(password == res.data[0].password){
console.log('登录成功')
wx.showToast({
title: '登录成功',
})
wx.switchTab({
url: '../index/index',
})
}
else{
console.log("登录失败")
wx.showToast({
title: '登录失败，账号或密码不正确',
icon : "none"
})
}
})
.catch(res=>{
wx.showToast({
title: '登录失败，账号或密码不正确',
icon : "none"
})
})
},4.制作注册页面
4.1成品图
4.2实现思路
这个注册页面大体跟登录页面一样，最大的区别是登录页面是用的增删改查中的”查“操作，而这里我们将使用的是”增“操作，这里我就直接把html和css代码放在下面了
4.3实际操作
<view class="title">
<view class="title_font">用户端注册界面</view>
</view>
<view class="headline"><text decode="true">注 册</text></view>
<view class="comment">注：当前为注册页面，不收集您的个人信息，您只需要注册账号以及登录的密码（只作为登录该小程序的密匙），如弹出已注册成功，确认账号密码姓名无误后，则可进入审批活动端进行登录。</view>
<input bindinput="getAccount" class="inputborder1" placeholder="输入账号"></input>
<input bindinput="getPassword" class="inputborder2" placeholder="输入密码"> </input>
<input bindinput="getName" class="inputborder2" placeholder="输入您的姓名"> </input>
<button bindtap="enterApproval" style="width: 88%;" >注册</button>
/* 登录界面 */
.title{
border-bottom: 2px solid grey;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 登录界面的字体 */
.title_font{
font-size: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 登录大字 */
.headline{
padding-top: 20%;
font-size: 50px;
display: flex;
align-items: center;
flex-direction: column;
}
/* 注释 */
.comment{
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
font-size: 15px;
color: red;
}
/* 输入账号的input */
.inputborder1{
margin-top: 10%;
margin-left: 20px;
margin-right:20px;
margin-bottom: 15px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right:15px;
border-radius: 30px;
border: 1px solid #F2E6E6;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.25);
}
/* 输入密码的input */
.inputborder2{
margin-top: 10%;
margin-left: 20px;
margin-right:20px;
margin-bottom: 15px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right:15px;
border-radius: 30px;
border: 1px solid #F2E6E6;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.25);
}
/* button在wxss里面修改不了宽度和高度，故在wmxl里面添加style属性来实现 */
button{
border-radius: 80rpx;
margin-top: 20%;
padding-top: 15px;
padding-bottom: 15px ;
color:#FFFFFF;
background-color: #D43030;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
}由于js代码中需要获取用户的openid，故所以需要用到云函数的内容，这方面内容我就不在这篇文章中赘述了，我把链接放在了下面，如果不知道怎么初始化云函数可以看这个！
5-3初始化云函数环境时的一些注意事项_哔哩哔哩_bilibili
const db = wx.cloud.database()
Page({
data: {
password :'',
account :'',
name:''
},
onLoad(options) {
wx.cloud.callFunction({
name:'getData'
})
.then(res=>{
console.log("用户openid",res.result.openid)
})
.catch(err=>{
console.log("请求云函数失败",err)
})
},
//点击注册
enterApproval(){
if (!this.data.account) {
wx.showToast({
title: "请输入账号",
icon: "none",
});
return false;
}
if (!this.data.password) {
wx.showToast({
title: "请输入密码",
icon: "none",
});
return false;
}if (!this.data.name) {
wx.showToast({
title: "请输入姓名",
icon: "none",
});
return false;
}
db.collection("studentUser")
.add({
data:{
account:this.data.account,
password:this.data.password,
name:this.data.name,
}
})
.then(res=>{
console.log('注册成功')
console.log("账号是",this.data.account)
console.log("密码是",this.data.password)
console.log("姓名是",this.data.name)
wx.showToast({
title: '已注册成功',
})
})
.catch(res=>{
wx.showToast({
title: '注册失败',
icon : "none"
})
})
},
//获取输入的账号
getAccount(e){
this.setData({
account : e.detail.value
})
},
//获取输入的密码
getPassword(e){
this.setData({
password :e.detail.value
})
},
//获取输入的名字
getName(e){
this.setData({
name :e.detail.value
})
},
})最后别忘了把代码中的集合名称改成你自己的集合名称，环境id改成你自己的环境id~
5*.测试注册界面出现注册失败 ？
5.1*演示图
5.2*问题原因
第一个原因可能你在打开运行这个页面的时候没有获取到用户的openid
如果你调试器里面显示的是下图那么就证明不是第一个原因 ！
第二个原因是数据库的权限问题，进入云开发数据库进行查看
这里你会发现，我这个集合的数据库权限是所用用户可读的，没有可写的字样，所以所有用户都不可写，因此就会产生注册账号失败。关于数据库权限的问题我在另一篇文章有比较详细的说明
微信小程序update云开发数据库的数据时无响应_hiddenSharp429的博客-CSDN博客_小程序update文章来源：https://www.toymoban.com/news/detail-565948.html
题外话
这一系列文章会持续更新，手把手教你从零创建一个小程序项目！并且免费提供源码。如果有什么疑问欢迎大家在底下留言讨论！你的赞和收藏是我最大的动力！！ 文章来源地址https://www.toymoban.com/news/detail-565948.html
到了这里，关于【免费开放源码】审批类小程序项目实战（注册登录页面）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
