《微信小程序开发实战》学习笔记chapter07 第一个实例 1.首页布局

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

//在app.json文件中：
{
  "pages":[
    "pages/home/home", 
    "pages/message/message",
    "pages/contact/contact"
  ],

2. 配置导航栏效果

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ff6666",
    "navigationBarTitleText": "爱玩儿の编程小菜机",
    "navigationBarTextStyle":"white"
  },

3. 配置tabBar效果

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/home.jpg",
        "selectedIconPath": "/images/homeAA.jpg"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/message.jpg",
        "selectedIconPath": "/images/messageAA.jpg"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我",
        "iconPath": "/images/contact.jpg",
        "selectedIconPath": "/images/contactAA.jpg"
      }
    ]
  },

4. 实现轮播图效果

第一步，在js文件中
// pages/home/home.js
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    // 声明轮播图的数组
    swiperlist: []
​
  },
​
  // 定义函数获取轮播图的数组
  getswiperlist() {
    wx.request({
      URL: "*****************", //轮播图地址
      method: 'get',
      success: (res) => {
        console.log(res)
        this.setData({
          swiperlist:res.data
        })
      }
    })
  },
​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //调用函数
    this.getswiperlist()
  },
​
第二步，在wxml文件中
<!--pages/home/home.wxml-->
<!-- 轮播图区域 -->
<swiper indicator-dots="{{true}}" circular="{{true}}">
    <swiper-item wx:for="{{swiperlist}}" wx:key="id">
        <image src="{{item.image}}">            
        </image>
    </swiper-item>
</swiper>
​
第三步，在wxss文件中
/* pages/home/home.wxss */
.swiper{
    height: 350rpx;
}
​
.swiper{
    width: 100%;
    height: 100%;
} 

5. 实现九宫格效果

第一步，在js文件中
// pages/home/home.js
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    // 声明轮播图的数组
    swiperlist: [],
    gridlist:[]
​
  },    
// 获取九宫格数据的方法
  getgridlist() {
    wx.request({
      URL: '****************',
      method: 'GET',
      success: (res) => {
        console.log(res)
        this.setData({
          gridlist: res.data
        })
      }
    })
  },
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 调用函数
    this.getswiperlist()
    this.getgridlist()
  },
    
第二步，在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文件中 
/* pages/home/home.wxss */
.grid-list{
    display: flex;
    flex-wrap: wrap;
    border-left: 1rpx solid #efefef;
    border-top: 1rpx solid #efefef;
}
​
.grid-item{
    width:33.333%;
    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/link1.jpg" mode="widthFix"></image>
    <image src="../../images/link2.jpg" mode="widthFix"></image>    
</view>
​
第二步，在WXSS文件中
.img-box{
    display: flex;
    padding: 20rpx 10rpx;
    justify-content: space-around;
}
​
.img-box image{
    width: 45%;
}