仿排号系统(小程序云开发)

简介: 仿排号系统(小程序云开发)

前言

随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的隔膜,由以前的需要先下载app然后在开始工作的老式模式,逐渐的趋向于小程序app(无需下载)的形式。

一、微信小程序是什么?

微信小程序是一种不需要下载安装即可使用的应用,它实现了应用的随开随用,用户只需要用微信扫一扫或者通过微信搜一下即可打开应用,使用完即可关闭,还可以把小程序添加到桌面,真正的做到了便捷方便,用完就走。


二、什么是微信小程序的云开发

云开发为开发者提供完整的云端支持,弱化了后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

从开发流程来看,以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后,前端工程师将可以独立实现前端开发、后端开发、接口联调工作,且无需太多后端知识。

三、本小程序只涉及到了云数据库的开发(增删改查)

先请各位看一下效果哈!!!

image.png

image.png


image.png

这里我创建了lianxi、liebiao、openid三个云数据库,但是liebiao好像没用上唉 ...........

那么我们废话不多说直接上代码!!!

index.wxml

<viewclass="shouquandenglu1"style="opacity: 0.7;"><viewclass="shouquandenglu2"><imagesrc="{{path}}"style="width: 70rpx;height: 70rpx;"></image><viewstyle="margin-top:15rpx ;">{{name}}</view></view></view><imagesrc="/images/lufei1.jpg"style="width: 750rpx;height: 1290rpx;z-index: -999;position: absolute; left: 0;bottom: 0;"></image><buttonwx:if="{{isshow}}"style="opacity: 0.7; padding: 50rpx;border-radius: 30rpx;"bindtap="paihao"type="primary">点击我进行排号</button><viewclass="piaohao1"><viewclass="piaohao2"style="opacity: 0.7;"><viewclass="piaohao3">日期(0:00重置排号):{{DQSJ}}</view><viewclass="piaohao3">您当前的排号为:{{zuixinbianhao}}</view></view></view><buttonwx: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.jsPage({
/**     * 页面的初始数据     */data: {
name:"昵称",
path:"/images/touxiang(moren).png",
isshow:true,
show:true    },
//点击进行编号paihao(){
letthat=thisif (that.data.name=="昵称") {
wx.showToast({
title: '您还未登录!',
icon:"none"            })
        }else{
letisshowletpaihaoconsole.log("正在排号")
letkey=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+1wx.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=> {
letzuixinpaihao=res.data.length//获取data中的信息总数letbianhao=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(){
letthat=thiswx.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(){
letdate=newDate()
letyear=date.getFullYear()
//因为getMonth()获取到的月份是从0开始的所以要加1letmonth=date.getMonth()+1letday=date.getDate()
// let Hour = date.getHours()// let fen = date.getMinutes()// let miao = date.getSeconds()// let XQ = date.getDay()letkey=year+'-'+month+'-'+dayreturnkey// console.log(key)    },
//查看自己的排号信息getchakanpaihao(){
wx.cloud.database().collection('lianxi').where({
        }).get().then(res=> {
letzuixinpaihao=res.data.length//获取data中的信息总数letbianhao=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

<buttonbindtap="shuaxin"type="primary"style="opacity: 0.8;width: 100%;">刷新</button><viewclass="bigbox"><viewclass="paihao1"><viewclass="boxL"wx:for="{{lianxi}}"wx:key="index"><view>{{item.paihao}}</view></view></view><viewclass="paihao2"><viewclass="boxR"wx:for="{{openid}}"wx:key="index"><viewclass="yonghuxinxi"><imagestyle="width: 40rpx;height: 40rpx;"src="{{item.path}}"></image><viewstyle="font-size: 25rpx;margin-top:5rpx ;">{{item.name}}</view></view></view></view></view><imagesrc="/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.jsPage({
/**     * 页面的初始数据     */data: {
openid:[],
lianxi:[]
    },
//刷新用户信息shuaxin(){
letthat=this//获取排号wx.cloud.database().collection('lianxi').get({
success:function(res){
letxuhao=res.dataconsole.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=> {
letzuixinpaihao=res.data.length//获取data中的信息总数letbianhao=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来循环渲染出数据库(排号中存入的数据)。

目录
相关文章
|
22天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
24天前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
47 1
|
27天前
|
存储 小程序 数据可视化
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
|
1月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
2月前
|
小程序 数据挖掘 UED
餐饮店小程序开发定制桌边二维码点餐系统
随着技术不断进步,各行各业都在使用新工具来提高效率和服务质量。餐饮业也不例外。餐饮点餐小程序系统是基于微信公众平台开发的在线点餐方式。顾客可以通过手机微信扫描餐桌上的二维码,进入餐厅的点餐小程序,选择菜品、数量和口味,直接完成点餐。点餐系统会自动保存并发送给厨房,避免了传统手工点餐容易出错的问题。
|
2月前
|
小程序 前端开发 物联网
无人桌球室小程序平台系统定制开发方案
【项目摘要】随着社会进步和科技发展,无人桌球室小程序应运而生,解决传统桌球室管理难题。提供在线预订、自动计分、赛事查询及会员管理功能,采用微信小程序前端、微服务后端及物联网智能设备技术实现。市场推广结合社交媒体、线下活动及口碑营销。需开发支持,请联系小编。
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
35 2
|
2月前
|
小程序 PHP
全新UI自助图文打印系统小程序源码 PHP后端 附教程
全新UI自助图文打印系统小程序源码 PHP后端 附教程
178 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
29 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
30 1

热门文章

最新文章