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

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

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

二 tabBar组件介绍

2.1 常用属性表

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

2.2 list数组元素

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

三 项目初始化

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
  "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 项目样式文件

1
2
3
4
5
6
7
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 图片文件