微信小程序开发之——婚礼邀请函-项目初始化(4.2)

一 概述

• tabBar组件介绍
• 项目初始化
• 项目目录结构说明

二 tabBar组件介绍

2.1 常用属性表

属性	说明
color	未选择时，底部导航文字的颜色
selectedColor	选中时，底部导航文字的颜色
borderStyle	底部导航边框的颜色(如果没有写入样式会出现浅灰色线条)
backgroundColor	底部导航背景色
list	导航配置数组

2.2 list数组元素

属性	说明
pagePath	页面访问地址
iconPath	未选择时，图片路径
selectedIconPath	选中时，图片路径
text	导航图标下方文字

三 项目初始化

3.1 创建空项目，配置app.json文件

{
  "pages": [
    "pages/index/index",
    "pages/picture/picture",
    "pages/video/video",
    "pages/map/map",
    "pages/guest/guest"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ff4c91",
    "navigationBarTitleText": "婚礼邀请函",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#ccc",
    "selectedColor": "#ff4c91",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "邀请函",
      "iconPath": "/images/invite.png",
      "selectedIconPath": "/images/invite.png"
    },{
      "pagePath": "pages/picture/picture",
      "text": "照片",
      "iconPath": "/images/marry.png",
      "selectedIconPath": "/images/marry.png"
    },{
      "pagePath": "pages/video/video",
      "text": "美好时光",
      "iconPath": "/images/video.png",
      "selectedIconPath": "/images/video.png"
    },{
      "pagePath": "pages/map/map",
      "text": "婚礼地点",
      "iconPath": "/images/map.png",
      "selectedIconPath": "/images/map.png"
    },{
      "pagePath": "pages/guest/guest",
      "text": "宾客信息",
      "iconPath": "/images/guest.png",
      "selectedIconPath": "/images/guest.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3.2 项目样式文件

page{
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

3.3 配置后的页面样式

四 项目目录结构说明

路径	说明
app.js	应用程序的逻辑文件
app.json	应用程序的配置文件
app.wxss	定义公共样式
pages/index/	"邀请函"页面文件保存目录
pages/picture/	"照片"页面文件保存目录
pages/video/	“美好时光”页面文件保存目录
pages/map/	“婚礼地点”页面文件保存目录
pages/guest/	“宾客信息”页面文件保存目录
images	图片文件