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

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

前言

随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端。然而在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来循环渲染出数据库(排号中存入的数据)。

目录
相关文章
|
2月前
|
运维 小程序 前端开发
结合圈层营销策略,打造稳定可靠的圈子app系统,圈子小程序!
圈子系统是一种社交平台,用户可按兴趣、职业等创建或加入“圈子”,进行内容发布、讨论和资源共享。开发时需考虑需求分析、技术选型(如PHP、MySQL)、页面设计、功能实现(注册、登录、发布、评论等)、测试优化及运维管理。圈层营销则通过精准化、高端化的方式传递品牌信息,增强客户归属感。圈子小程序基于微信等平台,具备跨平台、便捷性和社交性,开发过程中需明确需求、选择技术框架、设计页面并确保稳定性和流畅性。
|
30天前
|
小程序 数据安全/隐私保护
跑腿小程序系统源码
这是一款跑腿小程序,带有智能派单、系统派单、同城配送、校园跑腿、预约取件、用户端+骑手端 基于FastAdmin+thinkphp和uniapp开发的优创同城跑腿系统,支持帮取、帮送模式,包含用户端、骑手端、运营后台。
77 32
|
26天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
25天前
|
存储 小程序 搜索推荐
打造无缝社交体验:多平台适配,开启线上线下陪玩系统小程序社交新时代
通过实施以上策略和行动计划,可以打造出一个无缝社交体验的多平台陪玩社交系统,为用户提供更加便捷、高效、有趣的社交体验,开启线上线下陪玩系统源码社交的新时代。
53 11
|
30天前
|
存储 监控 小程序
TP6+Uni-app框架下,圈子系统小程序的快速上线开发步骤
社交圈子系统多端运营级应用,融合了推荐匹配、语音聊天、IM即时通讯、动态发布、一键约聊、同城交友、附近的人、充值提现、邀请推广等功能,为平台运营提供更多的盈利变现方式。程序源码开源,支持二次开发,根据客户不同应用场景需求,定制个性化解决方案。
54 9
|
25天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
1月前
|
移动开发 开发框架 小程序
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
|
1月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
73 0
|
1月前
|
小程序 数据挖掘
圈子系统兴趣讨论群组的创建,社群运营的重要性及策略制定,同城交友app、小程序方式的创新
### 圈子系统与社群运营简介 圈子系统是社交平台中的功能模块,允许用户创建和管理兴趣小组,设置名称、规则等,吸引志同道合者加入。通过浏览不同圈子,用户可以选择感兴趣的群体参与。社群运营则通过对具有共同需求或兴趣的用户进行组织和管理,提升品牌影响力和商业价值。有效的社群运营策略包括明确定位、制定策略、持续输出有价值内容、定期举办活动、合理分配角色及数据监测优化,从而增强用户粘性和活跃度。 **圈子系统源码获取:** [链接](https://gitee.com/multi-customer-software/qz)
|
1月前
|
消息中间件 监控 小程序
电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
电竞陪玩系统架构涵盖前端(React/Vue)、后端(Spring Boot/php)、数据库(MySQL/MongoDB)、实时通信(WebSocket)及其他组件(Redis、RabbitMQ、Nginx)。通过模块化设计、微服务架构和云计算技术优化,提升系统性能与可靠性。同时,加强全面测试、实时监控及故障管理,确保系统稳定运行。

热门文章

最新文章