微信小程序项目搭建

1.新建小程序项目

填入自己的appid

2.搭建目录结构

目录名	作用
styles	存放公共样式
components	存放组件
lib	存放第三方库
utils	⾃⼰的帮助库
request	⾃⼰的接⼝帮助库

3.搭建项目的页面

页面名称	名称
首页	index
分类页面	category
商品列表页面	good_list
商品详情页面	goods_detail
购物车页面	cart
收藏页面	collect
订单页面	order
搜索页面	search
个人中心页面	user
意见反馈页面	feedback
登录页面	login
授权页面	auth
结算页面	pay

5.搭建项目tabbar结构

在app.json文件中进行配置,与window同层级。

pagePath:引入地址
iconPath:图标
selectedIconPath:选中后的图标

"tabBar": { 
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa", 
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/home.png",
      "selectedIconPath": "icons/home-o.png"
      },
      {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "icons/category.png",
      "selectedIconPath": "icons/category-o.png"
      },
      {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "icons/cart.png",
      "selectedIconPath": "icons/cart-o.png"
      },
      {
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "icons/my.png",
      "selectedIconPath": "icons/my-o.png"
      }
    ]
  },

6.初始化页面样式

6.1 在app.wxss中对全局进行定义

1. 定义全局样式

/* 在微信小程序中 不支持通配符 * */
page,view,text,swiper,swiper-item,image,navigator{
  /* p0+m0+bz */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

2. 定义主题颜色

page{
    --themeColor:#eb4450; //定义主题颜色
    font-size:28rpx; //定义字体
}

6.2 在相关页面使用

在index.wxss使用

view{
  /* 使用主题颜色 */
  color:var(--themeColor);
}

6.3 设置导航颜色

在app.json

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "MINA_shop",
    "navigationBarTextStyle":"white"
  },