前言
随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的隔膜,由以前的需要先下载app然后在开始工作的老式模式,逐渐的趋向于小程序app(无需下载)的形式。
一、微信小程序是什么?
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用的随开随用,用户只需要用微信扫一扫或者通过微信搜一下即可打开应用,使用完即可关闭,还可以把小程序添加到桌面,真正的做到了便捷方便,用完就走。
二、什么是微信小程序的云开发?
云开发为开发者提供完整的云端支持,弱化了后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
从开发流程来看,以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后,前端工程师将可以独立实现前端开发、后端开发、接口联调工作,且无需太多后端知识。
三、本小程序只涉及到了云数据库的开发(增删改查)
先请各位看一下效果哈!!!
这里我创建了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来循环渲染出数据库(排号中存入的数据)。