借助云开发实现小程序列表页(包含json数据的请求和解析)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qiushi_1990/article/details/89299409

视频讲解地址:https://edu.csdn.net/course/detail/9604

我们之前是请求服务器数据,然后把服务器数据显示到我们的小程序上,比如列表数据和详情页数据。但是我们如果不会后台开发,没有自己的服务器,怎么定义自己的列表和详情页数据,并且能通过小程序拿到显示到列表页和详情页呢。今天就来教大家摆脱后台,用小程序云开发实现自己的数据后台。并且请求到数据展示到列表页和详情页。

老规矩,先看效果图:
列表详情页.png

本节知识点:

  • 1,借助云开发实现自己的小程序数据后台
  • 2,请求列表数据并解析展示到列表页
  • 3,请求详情页数据并解析到详情页

这里涉及到的基础的知识,大家可以去我博客看相关的教程。
小程序云开发入门—云数据库数据源的导入与导出
借助小程序云开发获取小程序用户openid
借助小程序云开发实现小程序的登陆注册功能

这里就默认你已经创建好自己的小程序云开发后台。
我们根据小程序云开发入门—云数据库数据源的导入与导出,把下面数据导入到云开发数据库。

{"_id":"XLHdu-SiwXKAQth1","xuexiao":"兰州交通大学","didian":"第七教学楼1101教室","shijian":"2019年4月25日下午3点半","gongsi":"中铁七局安装工程有限公司","danweidizhi":"北京市东城区美术馆后街999号","zhuanye":"土木工程类;建筑类;水电类","daiyu":"薪资3000-6000元,五险一金,年终奖,免费体检,出国旅游","lianxiren":"王先生:15611823566"}
{"_id":"XLHdu-SiwXKAQth2","xuexiao":"兰州交通大学","didian":"第七教学楼1801教室","shijian":"2019年4月25日下午3点半","gongsi":"中建七局安装工程有限公司","danweidizhi":"北京市东城区美术馆后街666号","zhuanye":"土木工程类;建筑类;水电类","daiyu":"薪资3000-6000元,五险一金,年终奖,免费体检,出国旅游","lianxiren":"王先生:15611823566"}
{"_id":"XLHdu-SiwXKAQthe","xuexiao":"兰州交通大学","didian":"校本部    第五教学楼113教室","shijian":"2019-04-15    14:30-16:00","gongsi":"中国能源建设集团北京电力建设有限公司 ","danweidizhi":"中国能源建设集团北京电力建设有限公司 ","zhuanye":"土木工程类;建筑类;水电类","daiyu":" 一、公司简介  北京电力建设有限公司始建于1964年,现隶属于中国能源建设集团有限公司,由中国葛洲坝集团股份有限公司整体托管,是建筑、安装施工综合性国家一级全民所有制企业,是国内最早通过质量体系、职业健康安全与环境管理体系认证的单位之一,是国家认定的500强建筑企业之一。公司建立了以“重品德、重能力、重业绩、重贡献”为导向的人才成长机制,鼓励立足岗位,充分发挥积极性、主动性和创造性,在岗位上建功、成长,立志打造一支作风正、素质高、能力强、技术精的一流队伍。  公司业务涉足火电、电网、风电、光伏、环保、调试、电力检修、工民建、市政、燃气、煤化工等领域,足迹遍布全国22个省及印度尼西亚。先后80余次荣获包括中国建设工程质量最高奖—“鲁班奖”在内的国家级和省部级以上奖项,拥有实用新型专利4项、行业级工法4项。公司正以管理先进、生机勃勃的现代化新型企业的崭新面貌展现在世人面前。  公司经营项目包括:承包境外电力、房屋建筑、市政公用、钢结构、高耸构筑物、环保工程和境内国际招标工程;施工总承包;专业承包;租赁机械设备;货物进出口、技术进出口、代理进出口等。  公司正在向市场型、管理型、产融结合型的产业结构转型升级 。大平台的企业,高起点的岗位,加速度的晋升通道助力优秀人才放飞梦想。  详细内容请查看北京电力建设有限公司网址(http://www.bpcc.ceec.net.cn)。  二、需求信息  序号 \u0009  需求专业 \u0009  本科 \u0009  硕士  1 \u0009  电气工程及其自动化 \u0009  11 \u0009  2 \u0009  自动化 \u0009  10 \u0009  3 \u0009  土木工程 \u0009  10 \u0009  4 \u0009  道路桥梁与渡河工程 \u0009  4 \u0009  5 \u0009  给排水科学与工程 \u0009  4 \u0009  6 \u0009  测绘工程 \u0009  3 \u0009  7 \u0009  工程管理 \u0009  3 \u0009  8 \u0009  工程造价 \u0009  4 \u0009  9 \u0009  金融学 \u0009  1 \u0009  1  10 \u0009  哲学类 \u0009  1 \u0009  1  11 \u0009  能源与动力工程 \u0009  6 \u0009  12 \u0009  新能源科学与工程 \u0009  6 \u0009  13 \u0009  机械设计制造及其自动化 \u0009  3 \u0009  14 \u0009  审计学 \u0009  2 \u0009  15 \u0009  会计学 \u0009  3 \u0009  16 \u0009  财务管理 \u0009  3 \u0009  17 \u0009  国际经济与贸易 \u0009  3 \u0009  18 \u0009  法学/社会学 \u0009  2 \u0009  1  19 \u0009  人力资源管理 \u0009  2 \u0009  20 \u0009  工商管理 \u0009  2 \u0009  22 \u0009  安全工程 \u0009  2 \u0009  23 \u0009  焊接技术与工程 \u0009  2 \u0009  24 \u0009  金属材料工程 \u0009  4 \u0009  25 \u0009  汉语言文学/历史学 \u0009  3 \u0009  1  26 \u0009  物理学 \u0009\u0009  1  27 \u0009  软件工程/数学与应用数学 \u0009\u0009  1    \u0009  合计 \u0009  94 \u0009  6  三、招聘条件:  1、应聘人员需为国家统招计划内全日制公办院校2019年大学本科应届毕业生(二本及以上)  2、英语取得国家四级及以上合格证书或考试成绩在425分及以上,身体健康,符合国家公务员录用体检标准,能长期在项目施工现场工作(法学,社会学除外)。  四、招聘流程  (一)应聘报名方式一:请将个人简历发送至bjdjrzb@bepc.com.cn的邮箱。邮件主题为:专业 姓名 学历 学校。个人自荐材料(个人简历)的文件名格式:“专业 姓名 学历 学校”。个人自荐材料(即个人简历)需附加盖学校公章的就业推荐表、计算机等级证书、外语等级证书、身份证、获奖证书等扫描件。  应聘报名方式二:  (二)资格审查:公司经初审后,将通过手机短信、电话等方式通知初审通过的应聘者参加面试、测试事宜。请确保联系方式填写准确,通信畅通。资格初审未通过的毕业生公司恕不另行通知。  (三)应聘者参加面试时,须携带个人自荐材料(即个人简历),附加盖学校公章的就业推荐表、计算机等级证书、外语等级证书、身份证、获奖证书等的原件和复印件。  五、联系方式  陈老师:(010)58425874/13522903460、  王老师:(010)58425979/18686136372  通讯地址:北京市朝阳区定福庄西里一号  邮政编码:100024 ","lianxiren":"王先生:15611823566"}

上面的数据是我们要导入到云开发数据库的列表数据,就是我们小程序列表页要显示的就是这些数据。所以这里大家一定要认真对待,试想,你数据都没有导入成功,哪来的后面的数据的获取和解析呢。
如果你不会导入数据到云开发数据库,那只能自己在云开发控制台自己一条条的创建了。
image.png
就像这样,点添加记录----> 输入字段 ---->创建数据 ----> 确定保存
数据少了还好,如果数据特别多,你自己就会累到吐。
如果你不会批量导入数据,或者没有数据可以批量导入 就到这个地址https://edu.csdn.net/course/detail/9604
看在线讲解视频学着怎么批量导入。

获取列表数据并解析到列表页

到这一步,就默认你上面的批量导入数据已经成功了。
那么我们就在index.js做数据请求操作。
请求云开发数据库里列表数据的核心代码如下

 //从云开发数据库里列表
 getList() {
  let that = this;
  wx.cloud.callFunction({
   // 要调用的云函数名称
   name: 'getHome',
   success: res => {
    wx.stopPullDownRefresh(); //停止刷新
    // console.log(res)
    if (res.result) {
     let dataList = res.result.data;
     console.log({
      dataList
     })
     if (dataList === undefined || dataList.length == 0) {
      wx.showToast({
       title: '没有数据',
      })
     } else {
      that.setData({ //获取数据成功后的数据绑定
       isShowArticle: true,
       dataList: dataList,
      });
     }
    } else {
     wx.showToast({
      title: '没有数据',
     })
    }
   },
   fail: err => {
    wx.stopPullDownRefresh(); //停止刷新
    wx.showToast({
     title: '没有数据',
    })
   }
  })

 },

给大家讲解下,我们这里是借助里云开发提供的云函数功能来获取列表数据。为什么要这么做呢,因为小程序云开发规定,我们拿数据库里的资源,只能拿到自己的保存的数据,批量导入的数据是管理员导入的数据,不算你导入的。 这里问题就来了,我们一个列表数据比如有10条,其中只有5条是我们创建的,那么怎么拿到别人的5条呢。这时候就要借助云函数了。

我们使用云函数拿到所有的列表数据,我们云函数的位置如下
image.png

getHome是我们定义的用来获取数据列表的云函数。
云函数的创建和上传,我视频讲解里有完整的流程,大家如果文章看不懂可以去看视频讲解:https://edu.csdn.net/course/detail/9604

image.png

然后我们再解析数据,并显示到列表页
我们index.wxml代码如下

<!--index.wxml-->
<!-- 文章列表 -->
<block wx:for="{{dataList}}" wx:key="item">
 <view class='item-container' bindtap='goDetail' data-item='{{item}}'>
  <view class=' item_root '>
   <text class='item-gongsi'>{{item.gongsi}}</text>
  </view>
  <view class='item_root'>
   <text class='item-desc'>{{item.xuexiao}}</text>
   <text class='item-desc didian'>{{item.didian}}</text>
  </view>
  <view class='item_root'>
   <text class='item-desc'>{{item.shijian}}</text>
  </view>

 </view>
</block>

index.js完整代码如下

//index.js
const app = getApp()
Page({
 //页面的初始数据
 data: {
  isShowArticle: false,
  dataList: null
 },
 onShow: function() {
  this.getList();
 },
 //页面相关事件处理函数--监听用户下拉动作
 onPullDownRefresh: function() {
  this.getList();
 },
 //从云开发数据库里列表
 getList() {
  let that = this;
  wx.cloud.callFunction({
   // 要调用的云函数名称
   name: 'getHome',
   success: res => {
    wx.stopPullDownRefresh(); //停止刷新
    // console.log(res)
    if (res.result) {
     let dataList = res.result.data;
     console.log({
      dataList
     })
     if (dataList === undefined || dataList.length == 0) {
      wx.showToast({
       title: '没有数据',
      })
     } else {
      that.setData({ //获取数据成功后的数据绑定
       isShowArticle: true,
       dataList: dataList,
      });
     }
    } else {
     wx.showToast({
      title: '没有数据',
     })
    }
   },
   fail: err => {
    wx.stopPullDownRefresh(); //停止刷新
    wx.showToast({
     title: '没有数据',
    })
   }
  })

 },
 //去详情页
 goDetail: function(event) {
  var item = event.currentTarget.dataset.item;
  console.log(item);
  wx.navigateTo({
   url: '../askdetail/askdetail?id=' + item._id+"&gongsi="+item.gongsi,
  })
 }

})

这样我们就可以轻松的借助云开发实现列表页数据的定义,列表页数据的获取,列表页数据的解析了。
如果文章你感觉不太直观,可以去看视频讲解:https://edu.csdn.net/course/detail/9604
完整的源码在视频讲解里也可以下载

如果有关于小程序的问题,可以加我微信2501902696(备注小程序)

展开阅读全文

没有更多推荐了,返回首页