小程序云开发初体验——商品数据的调取和渲染（day5）

懒羊羊学技术
161 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

1.在CMS内容管理内创建一个用户发布商品的

  • 打开内容管理的网站，点击新建内容模型，创建一个商品区域的库，在库里面根据自己需要添加模型

image.png

  • 在内容集合里的商品区域点击新建，可以添加自己想要的商品，字段可以根据自己的需求添加

image.png

  • 添加成功后是这样的

image.png

  • 点开云开发，点击数据库，里面就有我们刚刚添加的苹果手机了

image.png 接下来我们需要调用云函数拿到云数据库里的商品数据，然后把他渲染到wxml页面上

2.调用云函数获取商品数据

  • 在cloudfunctions文件右击，点击创建Node.js云函数

image.png

  • 在index.js文件内写上如下代码，之前已经介绍过云函数的调用方法了，这里不详细介绍了

orderBy("_createTime","desc") 这是按照创建时间排序

limit(4) 这是一次加载4条商品数据

image.png

  • 更新完云函数之后记得上传并部署，等提示消失后云函数才可生效

image.png

获取商品数据

  • 1.创建空数组用来接收传过来的数据

image.png

  • 2.将resut内的数据传给空数组

image.png

  • 3.onLoad里写上函数名

image.png

将获取的商品数据渲染到页面上

  • index.wxml代码

image.png

  • index.wxss代码

image.png

  • 商品展示如图

image.png

至此，我们商品的展示就完成了

avatar
文章
阅读
粉丝