本文主要围绕主页的 index 页面、云开发内容管理 和 云开发数据库 进行讲解,更多 index 代码细节可参见 index 页面。
操作步骤
步骤1:开通内容管理
- 首先进入云开发控制台 > 内容管理页面,单击开通,并设置账号密码。内容管理创建需要一定的时间请安心等待。
- 在创建成功之后返回内容管理页面,单击访问地址即可访问内容管理平台。
- 输入登录账号和密码,进入内容管理(CMS)后台,单击创建新项目这里我们起名为预约点餐管理系统。
步骤2:搭建轮播图
- 进入上述新建的预约点餐管理系统,进入内容模型页面,单击新建模型,这里我们设置展示名称为轮播图,数据库名为 banner。设置完成后单击创建。注意:
更改数据库名会自动重命名原数据库,请谨慎操作。
- 单击右侧内容类型 > 图片,进入添加图片字段页面,设置展示名称为轮播图,数据库字段名为 photo。
单击添加后完成内容模型的创建。 - 进入内容集合 > 轮播图页面,单击新建。
拖动图片并单击创建后完成轮播图片的上传,这样一个轮播图的内容模型我们就创建完成了。 - 通过上面操作后,相应的会在云开发控制台生成 banner 数据库以及上述导入的图片数据。进入云开发控制台 > 数据库 > banner > 数据权限页面,将数据库数据权限改为所有用户可读,仅创建者可读写,这样所有用户就可以看到数据了。
- 接下来在 pages/index 中开始编写轮播图。这里我们可以参见 swiper 文档,帮助我们绑定数据,这样我们使用 wx:for 进行列表绑定。
- 参数 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
可以指定数组当前元素的变量名。
- 在组件上使用
- 保存运行编译之后,可以看到轮播图。说明:
如果出现运行编译后无法加载轮播图,请在微信开发者工具单击右上角详情,进入本地设置页面,尝试切换调试基础库为较低版本即可。
步骤3:搭建通知公告
- 参照 步骤2 创建通知公告内容模型。
- 其中通知公告内容模型数据库名设置为 tz。新增的内容类型 > 单行字符串数据库字段名设置为 text。
- 进入内容集合 > 通知公告单击新建创建公告内容。
- 通过以下代码绑定 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> - 保存运行编译后即可。