开发指南

API 文档

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

最近更新时间:2022-04-26 16:10:54

本文主要围绕主页的 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 数据。
    <!--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>
    说明:

    • 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
    • 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item*
    • 使用 wx:for-item 可以指定数组当前元素的变量名。
  7. 保存运行编译之后,可以看到轮播图。
    说明:

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

步骤3:搭建通知公告

  1. 参照 步骤2 创建通知公告内容模型。
  2. 其中通知公告内容模型数据库名设置为 tz。新增的内容类型 > 单行字符串数据库字段名设置为 text
  3. 进入内容集合 > 通知公告单击新建创建公告内容。
  4. 通过以下代码绑定 mgList 数据。
    <!--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>
  5. 保存运行编译后即可。
目录