微信小程序> 微信小程序~云开发Demo实现数据的添加查询和分页实现-微信小程序云开发实例-腾讯云微信小程序

微信小程序~云开发Demo实现数据的添加查询和分页实现-微信小程序云开发实例-腾讯云微信小程序

浏览量:3386 时间: 来源:_龙衣
实现的效果实现要点WXML不同类别数据的显示

1.通过if-elif-else实现,在wxml文件中通过block/block渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间。

云开发数据的获取

2.先开通云开发功能,参考官方文档,然后在创建项目的时候勾选上使用云开发模板(看个人吧,我直接使用后点击项目中的login)就可以获取到用户的oppenid,之后就可以使用云数据库了。

3.云开发登录:

云数据的获取/***生命周期函数--监听页面加载*/onLoad:function(options){console.log('onload');this.getData(this.data.page);},/***获取列表数据**/getData:function(page){varthat=this;console.log("page---"+page);constdb=wx.cloud.database();//获取总数db.collection('topic').count({success:function(res){that.data.totalCount=res.total;}})//获取前十条try{db.collection('topic').where({_openid:'oSly***********vU1KwZE',//填入当前用户openid}).limit(that.data.pageSize)//限制返回数量为10条.orderBy('date','desc').get({success:function(res){//res.data是包含以上定义的两条记录的数组//console.log(res.data)that.data.topics=res.data;that.setData({topics:that.data.topics,})wx.hideNavigationBarLoading();//隐藏加载wx.stopPullDownRefresh();},fail:function(event){wx.hideNavigationBarLoading();//隐藏加载wx.stopPullDownRefresh();}})}catch(e){wx.hideNavigationBarLoading();//隐藏加载wx.stopPullDownRefresh();console.error(e);}},云数据的添加/***保存到发布集合中*/saveDataToServer:function(event){varthat=this;constdb=wx.cloud.database();consttopic=db.collection('topic')db.collection('topic').add({//data字段表示需新增的JSON数据data:{content:that.data.content,date:newDate(),images:that.data.images,user:that.data.user,isLike:that.data.isLike,},success:function(res){//res是一个对象,其中有_id字段标记刚创建的记录的id//清空,然后重定向到首页console.log("success----"+res)//保存到发布历史that.saveToHistoryServer();//清空数据that.data.content="";that.data.images=[];that.setData({textContent:'',images:[],})that.showTipAndSwitchTab();},complete:function(res){console.log("complete----"+res)}})},

4.云数据的删除可查看官放文档,这里不贴代码了,有问题联系。

5.云数据的更新可查看官放文档,这里不贴代码了,有问题联系。

数据列表的分页

6.主要就是定义一个临时数组存放加载上来的数据,然后通过传递给对象,最后传递到布局中去。

/***页面上拉触底事件的处理函数*/onReachBottom:function(){varthat=this;vartemp=[];//获取后面十条if(this.data.topics.lengththis.data.totalCount){try{constdb=wx.cloud.database();db.collection('topic').skip(5).limit(that.data.pageSize)//限制返回数量为5条.orderBy('date','desc')//排序.get({success:function(res){//res.data是包含以上定义的两条记录的数组if(res.data.length0){for(vari=0;ires.data.length;i++){vartempTopic=res.data[i];console.log(tempTopic);temp.push(tempTopic);}vartotalTopic={};totalTopic=that.data.topics.concat(temp);console.log(totalTopic);that.setData({topics:totalTopic,})}else{wx.showToast({title:'没有更多数据了',})}},fail:function(event){console.log("======"+event);}})}catch(e){console.error(e);}}else{wx.showToast({title:'没有更多数据了',})}},

7.完~,有问题可以联系

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎