【B站教程--文字笔记】零基础商城小程序项目2

发现个方法是出问题试试重新编译、构建npm等方法

把没用的这个log页面删了。（小程序里一个文件夹里四个文件，这个文件夹对应一个页面）

app.css，index.wxml,index.css里面都删干净了，index.json里面只剩这个

然后关于tabBar，就是底边栏，有几个就在app.json里的pages里写好几个，这就是注册。每个要有icon图标，去网上下图标（png的），对应上去。

//app.json
{
  "pages": [
    "pages/index/index",
    "pages/classify/classify",
    "pages/cart/cart",
    "pages/mine/mine"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "market",
    "navigationBarBackgroundColor": "#1296db"
  },
  "tabBar": {
    "selectedColor": "#1296db",//selectedColor会让图标被点击后下面的字也跟着变色
    "list": [
      {
        "text":"首页",
        "iconPath": "./images/index.png",
        "selectedIconPath": "./images/index1.png",
        "pagePath": "pages/index/index"
      },
      {
        "text":"分类",
        "iconPath": "./images/classify.png",
        "selectedIconPath": "./images/classify1.png",
        "pagePath": "pages/classify/classify"
      },
      {
        "text":"购物车",
        "iconPath": "./images/cart.png",
        "selectedIconPath": "./images/cart1.png",
        "pagePath": "pages/cart/cart"
      },
      {
        "text":"我的",
        "iconPath": "./images/mine.png",
        "selectedIconPath": "./images/mine1.png",
        "pagePath": "pages/mine/mine"
      }


    ]
  },
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  },

  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

明确一下首页的样子，显示搜索框、轮播图、宫格图、热门推荐。这堂课就是实现前两个，比较简单，直接用tdesign官网的轮播图和宫格。