借助云开发实现小程序列表页(包含json数据的请求和解析)
阅读需要4分钟
我们之前是请求服务器数据,然后把服务器数据显示到我们的小程序上,比如列表数据和详情页数据。但是我们如果不会后台开发,没有自己的服务器,怎么定义自己的列表和详情页数据,并且能通过小程序拿到显示到列表页和详情页呢。今天就来教大家摆脱后台,用小程序云开发实现自己的数据后台。并且请求到数据展示到列表页和详情页。
老规矩,先看效果图:
列表详情页.png
本节知识点:
- 1,借助云开发实现自己的小程序数据后台
- 2,请求列表数据并解析展示到列表页
- 3,请求详情页数据并解析到详情页
这里涉及到的基础的知识,大家可以点击阅读原文查看相关的教程。
这里就默认你已经创建好自己的小程序云开发后台。 我们根据小程序云开发入门---云数据库数据源的导入与导出,把下面数据导入到云开发数据库。
{"_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 物理学 u0009u0009 1 27 u0009 软件工程/数学与应用数学 u0009u0009 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
- Pycharm常用技巧
- hdu 1598 find the most comfortable road(枚举+卡鲁斯卡尔最小生成树)
- 查询IP地址归属详情
- oracle commit详解
- hdu 4315 Climbing the Hill(阶梯博弈转nim博弈)
- iftop实时网络流量监控工具的安装使用
- hdu 3908 Triple(组合计数、容斥原理)
- hdu 4034 Graph (floyd的深入理解)
- hdu 4033Regular Polygon(二分+余弦定理)
- Debian8配置SSH允许root登陆
- hdu 4405Aeroplane chess(概率DP)
- hdu 3853LOOPS (概率DP)
- cf(#div1 B. Dreamoon and Sets)(数论)
- hdu 1805Expressions(二叉树构造的后缀表达式)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 推荐一款MD神器吧:重度MD用户必备神器
- 鸿蒙系统开源
- 40张图看懂分布式追踪系统原理及实践
- 为什么我们需要批量操作?
- 面向对象与函数式编程的简单案例
- 小白学PyTorch | 6 模型的构建访问遍历存储(附代码)
- MLQuant:基于XGBoost的金融时序交易策略(附代码)
- 探索在网页中使用“标注”
- 笔试题:了解穷举算法吗?如何用代码实现
- 硬核看房利器——Web 全景的实现
- 超级播放器tcplayer如何设置logo
- 【Flutter 实战】1.20版本更新及新增组件
- 手把手教你使用Python实现常用的假设检验 !
- Oracle 每日一题系列合集
- Arrow更好用的python时间序列处理库,你用过吗?