搭建tabar

1. 新建文件夹icons,在里面移入提前准备好的照片，png格式
2. 打开app.json文件

 "pages": [

    "pages/index/index",

    "pages/category/index",

    "pages/goods_list/index",

    "pages/goods_detail/index",

    "pages/cart/index",

    "pages/collect/index",

    "pages/order/index",

    "pages/search/index",

    "pages/user/index",

    "pages/feedback/index",

    "pages/login/index",

    "pages/auth/index",

    "pages/pay/index"

 

  ],

  "window": {

    "backgroundColor": "#F6F6F6",

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#F6F6F6",

    "navigationBarTitleText": "网上购物商店",

    "navigationBarTextStyle": "black"

  },

  "tabBar": {

    "list": [

      {

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath": "icons/h.png",

      "selectedIconPath": "icons/h1.png"

    },

    {

      "pagePath": "pages/category/index",

      "text": "分类",

      "iconPath": "icons/cd.png",

      "selectedIconPath": "icons/cd1.png"

    },

    {

      "pagePath": "pages/cart/index",

      "text": "购物车",

      "iconPath": "icons/gwc.png",

      "selectedIconPath": "icons/gec1.png"

    },

    {

      "pagePath": "pages/user/index",

      "text": "我的",

      "iconPath": "icons/m.png",

      "selectedIconPath": "icons/m1.png"

    }

  ]

  },

  "sitemapLocation": "sitemap.json",

  "style": "v2"

}

 

 

2.4P6：页面初始化项目

1.打开app.wxss

@import"./styles/iconfont.wxss";

/**在小程序中不支持通配符*

*{

 padding: 0;

margin: 0;

box-sizing: border-box;

}所以把*变成所有的小程序标签可以解决问题,写上所有的小程序标签，对页面进行初始化*/

page,view,text,swiper,swiper-item,image,navigator  {

  padding: 0;

margin: 0;

box-sizing: border-box;

}

/*

主题颜色  通过变量来实现

1.在less中存在变量这个知识

2.原生的css和wxss也是支持 变量

*/

page{

  /*定义主题颜色*/

  --themeColor:#eb4450;

}

 

 

 

 

 

 

/*修改字体像素大小输入以下代码

page{

  /*定义主题颜色*/

  --themeColor:#eb4450;

 

/*定义统一字体大小 假设设计稿 大小是375px

1px=2rpx

14px=28rpx

*/

font-size:28rpx

}*/

 

 3.打开pages/index/index/app.wxss

view{

/*

使用主题颜色

*/

color:var(--themeColor);

}

4.完成如下图

 

 

多数东西在app 里写，然后在index里面调用

1. 修改导航栏的背景颜色，打开app.json

 "window": {

    "backgroundColor": "#F6F6F6",

    "backgroundTextStyle": "light",//背景文本风格

    "navigationBarBackgroundColor": "#eb4450",//红色背景，修改导航栏背景颜色

    "navigationBarTitleText": "网上购物商店",

    "navigationBarTextStyle": "white"白色字体//导航栏标题颜色配置

  }