"婚礼邀请函"小程序：开放前准备

项目展示

• 邀请函页面
• 照片页面：轮播图
• 美好时光页面：视频在线播放
• 婚礼地点页面: 在线地图
• 宾客信息页面：填写宾客信息

先导知识：底部菜单栏tabBar

tabbar:

• color: 未选择时的颜色
• selectedColor：选中时的颜色
• borderStyle：底部导航边框的颜色
• backgroundColor：底部导航背景色
• list:导航配置数组

• pagePath：页面访问地址
• iconPath: 未选择时图片路径
• selectedIconPath: 选中时图片路径
• text:导航图表下方文字

app.json:

{
{
  "pages": [
    "pages/index/index",
    "pages/test/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#505050",
    "selectedColor": "#1296DB",
    "list":[
      {
      "text":"主页",
      "pagePath":"pages/index/index",
      "iconPath":"/images/invite.png",
      "selectedIconPath": "/images/invite.png"
      },
      {
        "text": "测试",
        "pagePath": "pages/test/index",
        "iconPath": "/images/marry.png",
        "selectedIconPath": "/images/marry.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

项目初始化

页面和导航栏样式

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

分页面标题

在每一个标签页打开时，导航栏的标签也要随之变化

下面为每个页面的json配置页面标题：

{
  "navigationBarTitleText": "邀请函"
}

定义公共样式

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

box-sizing: border-box; 元素的总高度和宽度包含内边距和边框(padding 与 border) :

效果图