作为第二节课，在今天的课程中我们主要介绍小程序的几块内容：
- 表格
- WXSS使用
- 页面跳转
- 图片展示
再我们新建了一个模块learning，包含以下两个页面。
- learning/index页面，显示课程列表，只有一个页面。
- learning/detail页面，显示课程详情，也只有一个detail文件但是需要根据课程ID来展示不同的内容，这个下一节课JS交互中再处理。
（我们先暂时忽略了每个课程中不同的详情内容，忽略了web-view展示课程文章内容）
我们先看下页面效果，再根据效果来看是如何实现的。
1. 表格
我们模拟了一个表格，展示小程序开发课程。和网页开发用的table不太一样，在小程序中我们用view来组合成。
在表格中需要先按照每一行隔离开去看，先看行再看列。第一行是表格的表头，看下WXML和WXSS代码，一个是标签元素、一个是页面样式。
第一行中包括了序号、标题、状态、查看四列，也都是用view来表示。但是这4列宽度不同，通过class="index"等来区分，比如宽度是10%，并且设置float: left，表示靠左浮动。通过float设置，序号、标题、状态、查看四列都会左右排列，而不是默认的上下排列。
<!-- pages/learning/index.wxml -->
<view class="item-wrap table-title">
<view class="index">序号</view>
<view class="title">标题</view>
<view class="status">状态</view>
<view class="more">查看</view>
</view>
<!-- pages/learning/index.wxss -->
.item-wrap .index {
float: left;
width: 10%;
}
2. WXSS展示
上面已经用到了WXSS，用于定义标签的样式，常用的有：
- color，字体颜色
- background-color，背景颜色
- width，标签宽度
- height，标签高度
- font-size，字体大小，比如14px、16px等
- font-weight，字体是否加粗等，normal代表正常、bold代表加粗
更多样式可以参考官网文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
而看下上面pages/learning/index.wxss的代码，定义了“.index”这样的类，也就是定义一组样式，在pages/learning/index.wxml中就可以直接引用了。
或者反过来理解，在index.wxml中需要什么样的样式就去定义，比如需要展示一个页面标题，可以设置font-size:20px;font-weight:bold;color:#FF8800;，每次都这么写会比较麻烦，所以就可以在index.wxss代码中定义一个类，比如以下代码来定义，每次使用的时候直接应用<view class="page-title"></view>即可。
.page-title {
font-size:20px;
font-weight:bold;
color:#FF8800;
}3. 页面跳转
页面跳转有多种方式，我们先看WXML页面中的跳转方式，比如在课程列表中有“查看课程”这样的按钮，点击后跳转到另外一个页面，可以通过navigator标签来实现。
<navigator url="../learning/detail?id=1" open-type="navigate">
<view class="more">查看</view>
</navigator>
其中open-type有多个值可以选择，比如常用的有这几种。
- navigate，默认值
- redirect，关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
- switchTab，跳转到小程序底部菜单的某个页面，并关闭其他所有非 tabBar 页面
更多信息可以参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html。
4. 图片展示
在小程序中如何嵌入图片呢，有以下两种方式，通过background-image属性或image标签来展示。
<view class="page-title" style="background-image: url('../../utils/image/2.png');">
小程序开发教程列表
</view><image src="../../utils/image/3.png" mode="aspectFit" />
除了在页面中直接嵌入图片，还可以在底部菜单中添加图标，分为两种，iconPath用来展示菜单图标，而被选中的菜单用selectedIconPath来展示，这里只是用了两种不同的图片来表示图标，你也可以搜索设计好的、有版权的图标来显示。
"iconPath": "./utils/image/1.png"
"selectedIconPath": "./utils/image/3.png"
图片要自己新建一个文件夹，然后复制到这个文件夹中保存，新建了utils/image目录，所有图片保存在这里。
5. 附录代码
代码1：
课程列表页WXML
<!--pages/learning/index.wxml-->
<view class="page-title" style="background-image: url('../../utils/image/2.png');">
小程序开发教程列表
</view>
<view class="learning-list">
<view class="item-wrap table-title">
<view class="index">序号</view>
<view class="title">标题</view>
<view class="more">状态</view>
<view class="more">查看</view>
</view>
<view class="item-wrap">
<view class="index">1</view>
<view class="title">小程序HelloWorld</view>
<view class="more">已完成</view>
<navigator url="../learning/detail?id=1" open-type="">
<view class="more">查看</view>
</navigator>
</view>
<view class="item-wrap">
<view class="index">2</view>
<view class="title">小程序页面及样式进阶</view>
<view class="more">进行中</view>
<navigator url="../learning/detail?id=2" open-type="navigate">
<view class="more">查看</view>
</navigator>
</view>
<view class="item-wrap">
<view class="index">3</view>
<view class="title">JS前后端互动</view>
<view class="more">未开始</view>
<navigator url="../learning/detail?id=3" open-type="navigate">
<view class="more">查看</view>
</navigator>
</view>
</view>
<image src="../../utils/image/3.png" mode="aspectFit" />
代码2：
课程列表页WXSS
/* pages/learning/index.wxss */
.page-title {
font-size: 20px;
color: #FF8800;
padding: 20px 4% 40px 4%;
width: 92%;
}
.learning-list {
width: 88%;
padding: 0 4%;
}
.item-wrap {
height: 40px;
line-height: 40px;
padding: 4px 2%;
border-top: 1px solid #FF8800;
width: 100%;
text-align: center;
font-size: 13px;
}
.table-title {
background-color: #FF8800;
color: #FFFFFF;
}
.learning-list {
border-bottom: 1px solid #FF8800;
}
.item-wrap .index {
float: left;
width: 10%;
}
.item-wrap .title {
float: left;
width: 50%;
}
.item-wrap .status {
float: left;
width: 20%;
}
.item-wrap .more {
float: left;
width: 20%;
}
代码3：
详情页WXML
<!--pages/learning/detail.wxml-->
<view class="page-title">
课程详情
</view>
<view class="detail-body">
<view class="detail-title">课程介绍</view>
<view class="detail-content">课程介绍内容详情</view>
<view class="detail-title">课程状态</view>
<view class="detail-content">已上线</view>
<view class="detail-title">课程链接</view>
<view class="detail-content">
<navigator url="../learning/view">https://mp.weixin.qq.com/s/arsW4zpCAN8yDcGdl63O1w</navigator>
</view>
<view class="detail-title">作业</view>
<view class="detail-content">作业介绍详情</view>
</view>
代码4：
详情页WXSS
/* pages/learning/detail.wxss */
.detail-body {
width: 90%;
margin: 0 auto;
}
.page-title {
font-size: 20px;
color: #FFFFFF;
padding: 20px 4% 40px 4%;
width: 92%;
background-color:coral;
}
.detail-title {
border-left: 4px solid #FF8800;
font-size: 16px;
padding: 2px 6px;
margin: 20px 0 10px 0;
}
.detail-content {
font-size: 14px;
overflow-wrap: break-word;
}
代码5：
app.json，定义菜单
"tabBar": {
"backgroundColor": "#FFFFFF",
"color": "#333333",
"list": [
{
"pagePath": "pages/index/index",
"text": "index",
"iconPath": "./utils/image/1.png",
"selectedIconPath": "./utils/image/3.png"
},
{
"pagePath": "pages/learning/index",
"text": "课程列表",
"iconPath": "./utils/image/1.png",
"selectedIconPath": "./utils/image/3.png"
},
{
"pagePath": "pages/helloworld/index",
"text": "helloworld",
"iconPath": "./utils/image/1.png",
"selectedIconPath": "./utils/image/3.png"
},
{
"pagePath": "pages/logs/logs",
"text": "logs",
"iconPath": "./utils/image/1.png",
"selectedIconPath": "./utils/image/3.png"
}
]
}