小程序云开发初体验——CMS内容管理和底部导航栏(day2)

363 阅读2分钟

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

微信小程序云开发为我们提供了强大的后台管理功能,这可以使前端学习者不用写接口数据,咱们的数据都储存在云开发的数据库中,方便了前端学习者,而且功能非常强大。 这篇wen

1.CMS内容管理

  • 点击云开发,找到更多里面的内容管理,即可进入CMS主页面 image.png
  • 进入后,点击创建新项目,项目名和ID可以随意取,自己记得就行,然后在内容模型内新建模型,需要轮播图就新建图片的模型,需要图片加文字的就新建图片和富文本模型,这些都是根据你小程序的需要可自行选择,新建完后就可以往里面添加数据了

image.png 点击新建即可再次创建一个轮播图图片,其他内容模型也同理。

  • 创建完成之后再次点击云开发里的数据库,就会看到你的轮播图数据,swiper-list(这个名字是你当时创建时取的)。

image.png

  • 那么我们该如何调用呢,这时候就要用上云函数了,云函数之后再介绍如何使用。

2.底部导航栏的实现

  • 打开app.json文件,你需要的页面将在该文件里面配置

image.png

  • 如果你想让这些页面变为主页面并在底部导航栏显示,你需要在window下面写个tabbar再敲回车 `"tabBar": {

    "list": [{ "pagePath": "pagePath", "text": "text", "iconPath": "iconPath", "selectedIconPath": "selectedIconPath" }] }`

    这是初始样式,我们需要将路径和图片配上,如:

image.png

图片建议大家去阿里巴巴矢量库下载,但不要把小程序需要的图片都放到文件夹里,因为文件过大小程序编译运行不起来,之后可以把图片都放到云存储里,这样可以减少小程序的体积。

至此,小程序底部导航栏和内容管理都介绍完了。