步骤1：搭建轮播图与公告

本文主要围绕主页的 index 页面、云开发内容管理 和 云开发数据库 进行讲解，更多 index 代码细节可参见 index 页面。

操作步骤

步骤1：开通内容管理

1. 首先进入云开发控制台 > 内容管理页面，单击开通，并设置账号密码。内容管理创建需要一定的时间请安心等待。
   
2. 在创建成功之后返回内容管理页面，单击访问地址即可访问内容管理平台。
   
3. 输入登录账号和密码，进入内容管理（CMS）后台，单击创建新项目这里我们起名为预约点餐管理系统。
   

步骤2：搭建轮播图

1. 进入上述新建的预约点餐管理系统，进入内容模型页面，单击新建模型，这里我们设置展示名称为轮播图，数据库名为 banner。设置完成后单击创建。
   

   注意：

   更改数据库名会自动重命名原数据库，请谨慎操作。

2. 单击右侧内容类型 > 图片，进入添加图片字段页面，设置展示名称为轮播图，数据库字段名为 photo。
   
   单击添加后完成内容模型的创建。
   
3. 进入内容集合 > 轮播图页面，单击新建。
   
   拖动图片并单击创建后完成轮播图片的上传，这样一个轮播图的内容模型我们就创建完成了。
   
4. 通过上面操作后，相应的会在云开发控制台生成 banner 数据库以及上述导入的图片数据。进入云开发控制台 > 数据库 > banner > 数据权限页面，将数据库数据权限改为所有用户可读，仅创建者可读写，这样所有用户就可以看到数据了。
   
5. 接下来在 pages/index 中开始编写轮播图。这里我们可以参见 swiper 文档，帮助我们绑定数据，这样我们使用 wx:for 进行列表绑定。
6. 参数 env 可以在微信开发者工具 > 云开发控制台里获取。通过以下代码绑定 mgList 数据。
   • index.wxml
   • index.wxss
   • index.js

   <!--pages/index/index.wxml-->
   <view class="banner">
     <swiper class="swip_main" indicator-dots autoplay interval="6000" circular>
       <block wx:for="{{mgList}}">
         <swiper-item>
           <image src="{{item.photo}}" style="width: 100%;height: 100%;" mode="scaleToFill"></image>
         </swiper-item>
       </block>
     </swiper>
   </view>

   /* pages/index/index.wxss */
   .banner{
     width: 100%;
     height: 350rpx;
   }
   .swip_main{
     width: 100%;
     height: 100%;
   }

   // pages/index/index.js
   wx.cloud.init({
       env: '您的环境ID',
       traceUser: true,
   })
   const db = wx.cloud.database()
   Page({
       /**
        * 页面的初始数据
        */
       data: {
           mgList: ''
       },
       /**
        * 生命周期函数--监听页面加载
        */
       onLoad: function (options) {
           //这里执行的是在页面首次加载时候在banner数据库获取数据，并将他们存在mgList里面
           db.collection("banner").get({
               success: res => {
                   console.log(res)
                   this.setData({
                       mgList: res.data
                   })
               }
           })
       }

   说明：

   • 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
   • 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item*
   • 使用 wx:for-item 可以指定数组当前元素的变量名。

7. 保存运行编译之后，可以看到轮播图。
   

   说明：

   如果出现运行编译后无法加载轮播图，请在微信开发者工具单击右上角详情，进入本地设置页面，尝试切换调试基础库为较低版本即可。

步骤3：搭建通知公告

1. 参照 步骤2 创建通知公告内容模型。
2. 其中通知公告内容模型数据库名设置为 tz。新增的内容类型 > 单行字符串数据库字段名设置为 text。
   
3. 进入内容集合 > 通知公告单击新建创建公告内容。
   
4. 通过以下代码绑定 mgList 数据。
   • index.wxml
   • index.wxss
   • index.js

   <!--pages/index/index.wxml-->
   <!--轮播图-->
   <view class="banner">
     <swiper class="swip_main" indicator-dots autoplay interval="6000" circular>
       <block wx:for="{{mgList}}">
         <swiper-item>
           <image src="{{item.photo}}" style="width: 100%;height: 100%;" mode="scaleToFill"></image>
         </swiper-item>
       </block>
     </swiper>
   </view>
   <!--通知栏-->
   <view class="tz">
       <view class="tz_zp">
         <image src="../../images/font-ui/zggg.png"></image>
       </view>
       <swiper class="swiper-news-top" vertical="true" autoplay="ture" circular="ture" interval="3000">
         <block wx:for="{{msgList}}">
           <navigator url="" open-type="navigate">
             <swiper-item>
               <view class="swiper_item">{{item.text}}</view>
             </swiper-item>
           </navigator>
         </block>
       </swiper>
   </view>

   /* pages/index/index.wxss */
   .banner{
     width: 100%;
     height: 350rpx;
   }
   .swip_main{
     width: 100%;
     height: 100%;
   }
   .tz{
     width: 100%;
     height: 100rpx;
     background-color: rgb(224, 222, 213);
   }
   .tz_zp{
     width: 80rpx;
     height: 80rpx;
     margin-top: 10rpx;
     margin-left: 40rpx;
     float: left;
   }
   .tz_zp image{
     width: 100%;
     height: 100%;
   }
   .swiper-news-top{
     width: 600rpx;
     height: 80rpx;
     float: right;
     margin-top: 10rpx;
     margin-right: 30rpx;
   }
   .swiper_item {
     font-size: 28rpx;
     font-weight: 700;
     line-height: 80rpx;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: 2px;
     text-align: center;
   }

   // pages/index/index.js
   wx.cloud.init({
     env: '您的环境ID',
     traceUser: true,
   })
   const db=wx.cloud.database()
   Page({
   
     /**
      * 页面的初始数据
      */
     data: {
       mgList:'',
       msgList:''
     },
   
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
       db.collection("banner").get({
         success:res=>{
           console.log(res)
           this.setData({
             mgList:res.data
           })
         }
       })
       db.collection("tz").get({
         success:res=>{
           console.log(res)
           this.setData({
             msgList:res.data
           })
         }
       })
     },

5. 保存运行编译后即可。