06_案例一，本地生活首页

首页效果

共分六步：

1. 新建项目并梳理项目结构
2. 配置导航栏效果
3. 配置 tabBar 效果
4. 实现轮播图效果
5. 实现九宫格效果
6. 实现图片布局

1. 新建项目并梳理项目结构

如果想关闭这个黄色警告，打开project.config.json文件，找到setting部分，找到checkSiteMap，这个值默认是true，我们把它改为false，然后重新编译会发现，黄色警告没了

我们有首页、消息、联系我们三个页面，因此我们要先新增三个页面。

在app.json文件中，直接在pages块配置三个页面路径，开发工具会自动帮我们生成三个页面文件夹。

删除默认的两个不需要的页面。

2. 配置导航栏效果

修改app.json文件，找到window块，修改配置如下：

"window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#2b4b6b",
  "navigationBarTitleText": "本地生活",
  "navigationBarTextStyle":"white"
},

3. 配置 tabBar 效果

拷贝图片资源到项目中，资源领取：

链接：https://pan.baidu.com/s/153bvJ0fEa637RpJ6y9AW9A
提取码：good

修改app.json配置文件，增加如下内容：

"tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }]
  }

4. 实现轮播图效果

获取轮播图数据，这里的数据是从老师的一个网站上获取，轮播图是在首页展示的，打开pages/home/home.js文件

在data节点中声明一个轮播图数据

data: {
  swiperList: []
},

在onload方法后面定义一个方法获取轮播图数据，并在onload方法中调用

onLoad: function (options) {
  this.getSwiperList()
},

getSwiperList() {
  wx.request({
    url: 'https://www.escook.cn/slides',
    method: 'get',
    success: (res) => {
      console.log(res);
    }
  })
},

编译测试，因为获取轮播图数据的方法在onload方法内被调用，因此，只要home页面被加载，该数据就会被请求

请求成功，如果你们出现域名不合法的提示，可能是这个域名没有添加到你的小程序appid对应的域名配置中，具体配置方法可以参见我前面的博客

测试成功了就将数据写入到轮播图数组中

  getSwiperList() {
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: 'get',
      success: (res) => {
        this.setData({swiperList:res.data})
      }
    })
  },

渲染轮播图效果

在home.wxml文件中写上如下代码

<swiper>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

编译：

轮播图效果初步实现，接下来就是定制样式，继续修改代码

// wxml部分
<!-- indicator-dots 添加小圆点 -->
<!-- circular 开启衔接滚动 -->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

// wxss部分
swiper{
  height: 350rpx;
}

swiper image{
  width: 100%;
  height: 100%;
}

效果

5. 实现九宫格效果

获取九宫格数据，修改home.js文件，在data块添加gridlist数组，并且增加获取九宫格数据的方法，然后在onload中调用

data: {
    // 轮播图数据
    swiperList: [],
    // 九宫格数据
    gridList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSwiperList()
    this.getGridList()
  },

  // 获取轮播图数据
  getSwiperList() {
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: 'get',
      success: (res) => {
        this.setData({ swiperList: res.data })
      }
    })
  },
  //获取九宫格数据
  getGridList() {
    wx.request({
      url: 'https://www.escook.cn/categories',
      method: 'get',
      success: (res) => {
        this.setData({ gridList: res.data })
      }
    })
  },

数据加载成功

九宫格数据展示分析

最外层我们需要一个包裹容器，里面的每一项都是一个子view，这些子view都需要flex布局，并且每一项都是33.33%的宽度，允许他们换行，最终就会呈现九宫格效果

//wxml部分
<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

// wxss部分
.grid-list {
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}

.grid-item {
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}

.grid-item image {
  width: 60rpx;
  height: 60rpx;
}

.grid-item text {
  font-size: 24rpx;
  margin-top: 10rpx;
}

效果

6. 实现图片布局

//wxml部分
<!-- 图片区域 -->
<view class="img-box">
  <image src="/images/link-01.png" mode="widthFix"></image>
  <image src="/images/link-02.png" mode="widthFix"></image>
</view>

// wxss部分
.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}

.img-box image{
  width: 45%;
}

效果

完整代码

//js部分，没有用到的方法让我去掉了
// pages/home/home.js
Page({
  data: {
    // 轮播图数据
    swiperList: [],
    // 九宫格数据
    gridList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSwiperList()
    this.getGridList()
  },

  // 获取轮播图数据
  getSwiperList() {
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: 'get',
      success: (res) => {
        this.setData({ swiperList: res.data })
      }
    })
  },
  //获取九宫格数据
  getGridList() {
    wx.request({
      url: 'https://www.escook.cn/categories',
      method: 'get',
      success: (res) => {
        this.setData({ gridList: res.data })
      }
    })
  },

})

//wxml部分
<!-- indicator-dots 添加小圆点 -->
<!-- circular 开启衔接滚动 -->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>


<!-- 图片区域 -->
<view class="img-box">
  <image src="/images/link-01.png" mode="widthFix"></image>
  <image src="/images/link-02.png" mode="widthFix"></image>
</view>

//wxss部分
swiper {
  height: 350rpx;
}

swiper image {
  width: 100%;
  height: 100%;
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}

.grid-item {
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}

.grid-item image {
  width: 60rpx;
  height: 60rpx;
}

.grid-item text {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}

.img-box image{
  width: 45%;
}