小程序 | 实现本地生活的首页基础布局

新建项目并梳理项目结构

1. 创建一个文件夹用来存放该项目
2. 打开【微信开发者工具】—>【新建项目】

   注意选择不使用云服务

3. 我们有三个tab页面，所以前往 app.json 进行修改 pages
   

配置导航栏效果

根据👇这个进行配置

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

配置 tabBar 效果

1. 将需要到的图片素材放进项目文件夹images中

• 根据以下 来进行配置
  
  

tabBar 和 window 平齐

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

实现轮播图效果

获取轮播图数据

获取轮播图数据列表的接口
【GET】https://www.escook.cn/slides

1. 获取轮播图的数据（通过wx.request()来获取）

   

2. 将获取到的轮播图数据存放到 home.js 里面的 data 中（通过this.setData来修改data中的数据）

// pages/home/home.js
Page({
   

    data: {
   
        // 存放轮播图数据的列表
        swiperList: [], // 一开始就是个数组形式
    },

	// 生命周期函数--监听页面加载
    onLoad(options) {
   
        // 页面一加载就开始调用 获取轮播图数据的方法
        this.getSwiperList();
    },
    
    // 获取轮播图数据的方法
    getSwiperList() {
   
        wx.request({
   
            url: 'https://www.escook.cn/slides',
            method: "GET",
            success: (res) => {
   
                // 修改 data 中的数据，将轮播图的数据进行修改
                this.setData({
   
                    swiperList: res.data,
                })
            }
        })
    },
}

渲染轮播图页面效果

每一个轮播图是对 swiperList 进行for循环拿到的，item 包括id和image，我们的轮播图里面就是 item.image

<swiper indicator-dots circular interval="3000" autoplay>
    <swiper-item wx:for="{
    {swiperList}}" wx:key="id">
        <image src="{
    {item.image}}">image>
    swiper-item>
swiper>

对轮播图进行美化

/* pages/home/home.wxss */
swiper{
   
    height: 350rpx;
}
swiper image{
   
    width: 100%;
    height: 100%;
}

实现九宫格效果

获取九宫格数据

获取九宫格数据列表的接口
【GET】https://www.escook.cn/categories

// pages/home/home.js
Page({
   

    data: {
   
        // 存放轮播图数据的列表
        swiperList: [], // 一开始就是个数组形式
        // 获取九宫格数据的列表
        gridList:[], 
    },

    onLoad(options) {
   
        // 页面一加载就开始调用 获取轮播图数据的方法
        this.getSwiperList();
        this.getGridList();
    },
...
    // 获取九宫格数据的方法
    getGridList(){
   
        wx.request({
   
          url: 'https://www.escook.cn/categories',
          method:'GET',
          success:(res)=>{
   
            // 对九宫格数据进行赋值