仿排号系统（微信小程序云开发）
第一次写csdn，如有不周之处，请众大佬多多批评指教
文章目录
前言
随着移动端的不断发展，人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队，开发了一款叫做微信小程序的东西，它的出现打破了人们认识移动端的隔膜，由以前的需要先下载app然后在开始工作的老式模式，逐渐的趋向于小程序app（无需下载）的形式。
一、微信小程序是什么？
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的随开随用，用户只需要用微信扫一扫或者通过微信搜一下即可打开应用，使用完即可关闭，还可以把小程序添加到桌面，真正的做到了便捷方便，用完就走。
二、什么是微信小程序的云开发
云开发为开发者提供完整的云端支持，弱化了后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
从开发流程来看，以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后，前端工程师将可以独立实现前端开发、后端开发、接口联调工作，且无需太多后端知识。 ——————————————————————————————————————————— 版权声明：本文为CSDN博主「橘子y」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/yupyuping/article/details/112302822
本小程序只涉及到了云数据库的开发（增删改查）
先请各位老爷看一下效果哈！！!
这里我创建了lianxi、liebiao、openid三个云数据库，但是liebiao好像没用上唉 ...........
那么我们废话不多说直接上代码！！！
index.wxml
<view class="shouquandenglu1"style="opacity: 0.7;" >
<view class="shouquandenglu2" >
<image src="{{path}}" style="width: 70rpx;height: 70rpx;"></image>
<view style="margin-top:15rpx ;">{{name}}</view>
</view>
</view>
<image src="/images/lufei1.jpg" style="width: 750rpx;height: 1290rpx;z-index: -999;position: absolute; left: 0;bottom: 0;"></image>
<button wx:if="{{isshow}}" style="opacity: 0.7; padding: 50rpx;border-radius: 30rpx;" bindtap="paihao" type="primary">点击我进行排号</button>
<view class="piaohao1">
<view class="piaohao2" style="opacity: 0.7;">
<view class="piaohao3">日期（0:00重置排号）：{{DQSJ}}</view>
<view class="piaohao3">您当前的排号为：{{zuixinbianhao}}</view>
</view>
</view>
<button wx:if="{{show}}" style="opacity: 0.7; margin-top: 200rpx;width: 100%;" bindtap="denglu"type="primary">授权登录</button>index.wxss
.shouquandenglu1{
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: pink;
height: 100rpx;
border-radius: 30rpx;
margin-bottom: 30rpx;
}
.shouquandenglu2{
margin-left:50rpx ;
display: flex;
flex-direction: row;
}
.piaohao1{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.piaohao2{
display: flex;
flex-direction: column;
justify-content: space-around;
margin-top:100rpx;
border-radius: 30rpx;
width: 80%;
height: 100rpx;
background-color: pink;
font-weight: bold;
}
.piaohao3{
padding-left:50rpx;
}index.js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
name:"昵称",
path:"/images/touxiang(moren).png",
isshow:true,
show:true
},
//点击进行编号
paihao(){
let that = this
if (that.data.name=="昵称") {
wx.showToast({
title: '您还未登录！',
icon:"none"
})
}else{
let isshow
let paihao
console.log("正在排号")
let key = this.getshijian()
//this.的含义是指此index.js中所有的内置函数以及自己定义的方法（此js文件中所有能过调用的对象）
console.log(key)
//查询当前已经排号到多少位
wx.cloud.database().collection('lianxi').where({
key:key,
}).count().then(res =>{
console.log('查询成功',res)
paihao = res.total+1
wx.cloud.database().collection('lianxi').add({
data:{
key:key,
paihao:paihao
}
}).then(res =>{
console.log('添加成功',res)
this.getchakanpaihao()
wx.cloud.database().collection('lianxi').where({
}).get().then(res => {
let zuixinpaihao = res.data.length
//获取data中的信息总数
let bianhao = res.data[zuixinpaihao-1]
console.log(res)
console.log('获取排号信息成功',bianhao.paihao)
console.log('获取当前排号时的时间',bianhao.key)
console.log('获取当前排号时的_openid',bianhao._openid)
//
// wx.cloud.database().collection('openid').add({
// data:{
// openid:bianhao._openid
// }
// })
//
this.setData({
zuixinbianhao:bianhao.paihao,
DQSJ:bianhao.key,
isshow:false
})
})
}).catch(res =>{
console.log('添加失败',res)
})
}).catch(res=>{
console.log('查询失败',res)
})
}
},
//授权登录
denglu(){
let that = this
wx.getUserProfile({
desc: '正在获取',
success:function(res){
console.log('获取成功: ',res)
//添加用户信息到openid数据库
wx.cloud.database().collection('openid').add({
data:{
name:res.userInfo.nickName,
path:res.userInfo.avatarUrl
}
})
//显示用户信息到首页
that.setData({
name:res.userInfo.nickName,
path:res.userInfo.avatarUrl,
show:false
})
//
},
fail:function(err){
console.log("获取失败：",err)
}
})
// return that.setData
},
//获取当前年月日
getshijian(){
let date = new Date()
let year = date.getFullYear()
//因为getMonth()获取到的月份是从0开始的所以要加1
let month = date.getMonth()+1
let day = date.getDate()
// let Hour = date.getHours()
// let fen = date.getMinutes()
// let miao = date.getSeconds()
// let XQ = date.getDay()
let key=year+'-'+month+'-'+day
return key
// console.log(key)
},
//查看自己的排号信息
getchakanpaihao(){
wx.cloud.database().collection('lianxi').where({
}).get().then(res => {
let zuixinpaihao = res.data.length
//获取data中的信息总数
let bianhao = res.data[zuixinpaihao-1]
// console.log('获取排号信息成功',bianhao.paihao)
// console.log('获取当前排号时的时间',bianhao.key)
// console.log('获取当前排号时的id',bianhao._id)
// console.log('获取当前排号时的时间',res)
this.setData({
zuixinbianhao:bianhao.paihao,
DQSJ:bianhao.key
})
//因为是从零开始的数组，所以数组的paihao数值-1就是数组的排列编号
})
.catch(res => {
console.log('获取排号信息失败',res)
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getchakanpaihao()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})liebiao.wxml
<button bindtap="shuaxin"type="primary" style="opacity: 0.8;width: 100%;">刷新</button>
<view class="bigbox">
<view class="paihao1">
<view class="boxL" wx:for="{{lianxi}}" wx:key="index">
<view>{{item.paihao}}</view>
</view>
</view>
<view class="paihao2">
<view class="boxR" wx:for="{{openid}}" wx:key="index">
<view class="yonghuxinxi">
<image style="width: 40rpx;height: 40rpx;" src="{{item.path}}"></image>
<view style="font-size: 25rpx;margin-top:5rpx ;">{{item.name}}</view>
</view>
</view>
</view>
</view>
<image src="/images/luo.jpg" style="opacity: 0.8;width: 750rpx;height: 1290rpx;z-index: -999;position: absolute; left: 0;bottom: 0;"></image>liebiao.wxss
.bigbox{
width: 100%;
/* background-color: pink; */
height: 1200rpx;
display: flex;
flex-direction: row;
}
.paihao1{
width: 20%;
height: 1200rpx;
display: flex;
flex-direction: column;
}
.paihao2{
height: 1200rpx;
display: flex;
flex-direction: column;
}
.yonghuxinxi{
display: flex;
flex-direction: row;
}liebiao.js
// pages/liebiao/liebiao.js
Page({
/**
* 页面的初始数据
*/
data: {
openid:[],
lianxi:[]
},
//刷新用户信息
shuaxin(){
let that = this
//获取排号
wx.cloud.database().collection('lianxi').get({
success:function(res){
let xuhao = res.data
console.log('用户排号：',xuhao)
that.setData({
lianxi:xuhao
})
}
})
//获取用户信息
wx.cloud.database().collection('openid').get({
success:function(res){
console.log('用户信息获取成功',res.data)
that.setData({
openid:res.data
})
},
fail:function(rex){
console.log('用户信息获取失败',res)
}
})
},
//刷新排号
// paihao(){
// wx.cloud.database().collection('lianxi').where({
// }).get().then(res => {
// let zuixinpaihao = res.data.length
// //获取data中的信息总数
// let bianhao = res.data[zuixinpaihao-1]
// console.log(res)
// console.log('获取排号信息成功',bianhao.paihao)
// console.log('获取当前排号时的时间',bianhao.key)
// console.log('获取当前排号时的_openid',bianhao._openid)
// this.setData({
// zuixinbianhao:bianhao.paihao,
// DQSJ:bianhao.key
// })
// //因为是从零开始的数组，所以数组的paihao数值-1就是数组的排列编号
// })
// .catch(res => {
// console.log('获取排号信息失败',res)
// })
// },
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// wx.cloud.database().collection('openid').where({
// }).get().then(res => {
// let zuixinpaihao = res.data.length
// //获取data中的信息总数
// let bianhao = res.data[zuixinpaihao-1]
// console.log('获取openid中的数据:',res)
// this.setData({
// name:bianhao.name,
// path:bianhao.path
// })
// })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
wx.cloud.database().collection('lianxi').where({
}).get().then(res => {
let zuixinpaihao = res.data.length
//获取data中的信息总数
let bianhao = res.data[zuixinpaihao-1]
console.log(res)
console.log('获取排号信息成功',bianhao.paihao)
console.log('获取当前排号时的时间',bianhao.key)
console.log('获取当前排号时的_openid',bianhao._openid)
this.setData({
zuixinbianhao:bianhao.paihao,
DQSJ:bianhao.key
})
//因为是从零开始的数组，所以数组的paihao数值-1就是数组的排列编号
})
.catch(res => {
console.log('获取排号信息失败',res)
})
this.shuaxin()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})app.wxss
/**app.wxss**/
.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
button {
background: initial;
}
button:focus{
outline: 0;
}
button::after{
border: none;
}
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}总结
Index：
根据total来进行云数据库中“排号”的顺序记录。
并在wxml里面用wx：if来判断点击后按钮关闭
创建两个云数据库“lianxi”“openid”，lianxi里面存的是用户点击时的total顺序数字及时间戳转换的实时时间，openid里面存的则是用户点击授权登录时获取到的用户信息。
Liebiao：使用wx.cloud.database().collection('***').get({})等系列操作云数据库的命令的写法get到数据库中的实时数据。
在onload(options)生命周期函数（监听页面加载中）写入liebian要实时刷新的渲染数据。
并在wxml里用wx：for来循环渲染出数据库（排号中存入的数据）。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-09-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读