首页静态页面、配置文件、底部导航栏

（1）配置文件

首先要对整个小程序的页面进行配置，具体写在app.json中，代码如下：

"pages": [
    "pages/index/index",
    "pages/collect/collect",
    "pages/ran/ran",
    "pages/mana/mana",
    "pages/logs/logs"

（2）底部导航栏

在底部导航栏设置之前必须要设置好第一步，也就是pagePath，不然无法实现跳转；小标签的下载来源于阿里巴巴矢量图标库，且每个小图标都下载了黑色与红色两种不同地颜色，以便于操作的时候可以实现点击与不点击两种效果，下载后的图标存放于images中。使用tabBar来进行操作
这属于全局的配置，因此将其写入app.json中：

"tabBar": {
    "color": "#272636",
    "selectedColor": "#CD69C9",
    "backgroundColor": "#fff",
    "boderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/ico/fir.png",
        "selectedIconPath": "image/ico/fir1.png"
      },
      {
        "pagePath": "pages/collect/collect",
        "text": "收藏",
        "iconPath": "image/ico/collect.png",
        "selectedIconPath": "image/ico/collect1.png"
      },
      {
        "pagePath": "pages/ran/ran",
        "text": "排行榜",
        "iconPath": "image/ico/ran.png",
        "selectedIconPath": "image/ico/ran1.png"
      },
      {
        "pagePath": "pages/mana/mana",
        "text": "管理员",
        "iconPath": "image/ico/mana.png",
        "selectedIconPath": "image/ico/mana1.png"
      }
    ]
  },
  "sitemapLocation": "sitemap79.json"
}

最终的效果为：

（3）首页
首页除底部导航栏以外可以分为三大部分：搜索栏、图片轮播以及下方的章节展示。搜索栏在上篇笔记中已经提到是使用We-UI来完成的，图片的轮播是使用swiper来完成的（查阅小程序官方文档得知），下方的章节展示配合CSS的使用来完成
图片轮播的关键性代码：

	<block wx:for="{{imgUrls}}">//imgUrls在js文件中定义了网址

章节展示的wxml代码（稍后笔记会介绍将静态代码中的图片地址、文字标题改为与数据库的联通中）

<view class="cour">
				<view class="left">
					<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1340561132,1795467356&fm=26&gp=0.jpg" class="slide-image"></image>
				</view>
				
				<view class="center">
					<text class="chap_log">第一章</text>
			<navigator url="/collect/collect" hover-class="navigator-hover"><text class="chap_name">管理导论</text></navigator>
          <text class="chap_des">管理与组织导论等</text>
					
				</view>
			</view>