优学教育官方03课程详情

上一篇我们搭建了课程中心页面，点击课程的时候，可以进入到详情页查看具体信息，本篇我们介绍一下详情页的开发过程，先看一下原型图：

页面还是分为四个部分，课程的基本信息，相关信息，联系我们和底部的快捷导航信息。

1 创建页面

点击创建页面的图标，创建课程详情页面

2 面包屑效果

第一部分内容，先要有个面包屑的效果，可以返回上一级菜单，我们通过文本组件来搭建

给第一个文本组件，设置点击事件，配置方法为打开页面，选择课程中心

3 搭建基本信息

第二行的列设置为2用来搭建基本信息

第一列放置图片组件

选中页面组件，添加URL参数，用来接收传入的课程的数据标识

创建一个变量用来读取课程的基本信息，查询条件设置为数据标识等于我们的URL参数


将图片的地址绑定为封面图片

第二列添加一个文本组件，文本内容绑定为课程分类的名称

继续添加文本绑定为课程的名称

继续添加文本，绑定为课程的描述

继续搭建布局，显示课程的评分和报名人数的统计信息

继续添加布局，搭建课程基本信息

继续搭建布局，添加价格信息

4 搭建页签效果

第三行的列里添加顶部选项卡组件

修改标签的内容为课程概述、课程大纲、师资介绍、开课时间、学员评价

打开切换标签显示不同组件的配置

在课程概述的选项卡里添加富文本展示组件，绑定具体的字段

5 搭建联系信息

在第四行里搭建相应的布局，显示我们的联系信息

从首页将底部的内容粘贴过来

6 配置页面跳转

回到我们的课程中心页面，给容器设置点击事件，跳转到详情页，并且传入数据标识

整体效果

配置好了之后，点击卡片就可以看到课程详情的具体效果