文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>云开发 CloudBase>示例教程>小程序>预约点餐小程序开发>步骤1：搭建轮播图与公告

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

最近更新时间：2024-02-02 14:52:21

我的收藏

本页目录：

本文主要围绕主页的 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. 保存运行编译后即可。


中国站
目录