前言

随着移动端的不断发展，人们大部分的办公及生活应用都开始趋向于移动端。然而在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 = thisif (that.data.name=="昵称") {wx.showToast({title: '您还未登录！',icon:"none"})}else{let isshowlet paihaoconsole.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+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 => {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 = 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(){let date = new Date()let year = date.getFullYear()//因为getMonth()获取到的月份是从0开始的所以要加1let month = date.getMonth()+1let day = date.getDate()// let Hour = date.getHours()// let fen = date.getMinutes()// let miao = date.getSeconds()// let XQ = date.getDay()let key=year+'-'+month+'-'+dayreturn 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.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 => {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来循环渲染出数据库（排号中存入的数据）。

仿排号系统（微信小程序云开发）相关推荐

微信小程序云开发博客系统源代码，让写博客像发朋友圈一样简单，含使用部署教程
博客就两种:一是随笔,记录自己的成长历程,二是有目的的发文,例如搬运各种网赚文,我想大部分朋友做博客的初衷都是有一块自己的心灵净土,于是催生了wxapp-blog这款小程序. 完整代码下载地址:微信小 ...
微信小程序云开发|基于微信小程序实现房产中介平台系统
作者主页:编程千纸鹤作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享收藏点赞不迷路关注作者有好处 ...
怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台小秃僧新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
微信小程序云开发项目——多肉植物销售小程序
前言此项目为本人在大学的毕业设计作品,基于微信小程序云开发技术进行开发,暂未商用和托管.编写文章意在为求职做准备,亦乐于与大家进行经验交流分享,欢迎进行评论咨询哦. 简介用户角色分为:一般顾客.商 ...
微信小程序云开发及背后的云服务支持。
文章目录导语什么是微信小程序云开发? 云开发的优势云开发的技术生态支持微信云开发主要能力特性云数据库: 云函数: 云存储: 身份认证: 云调用: 云开发与传统开发的模式区别小程序云开发带来 ...
微信小程序--云开发学习
这两周因为没有布置任务,主要进行微信小程序云开发的学习 ················· 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生 ...
个人微信小程序云开发总结心得
文章之前: 先附上通过微信小程序云开发做出的两个小程序,有兴趣的朋友可以微信扫码进去看看,欢迎登录学习 . 框架采用移动端常用UI: Vant 微信云开发官方文档:微信开发文档相关的npm包导入方法 ...
垃圾分类微信小程序——云开发+CMS+微应用+百度智能云图片识别
功能列表 1.0.0版本: 三个版本,一个APPID,登录页选择版本登录,openid判断社区居民用户注册,一房一主工作/清洁人员账号绑定,一人一号,一号一人用户首页,直接展示搜索功能,包括图 ...
【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...

仿排号系统（微信小程序云开发）

文章目录

前言