微信小程序--邀请函

标签栏和布局的练习--婚礼邀请函案例

说明：

• 关于第三页美好时光页面里的视频，没找到合适的视频外链，关于视频的插入没有做。
• 喜欢的可以点个赞，如果有问题或者想要完整的项目代码及素材，评论区有百度云链接。

效果图及需求分析：

• 案例分析：小程序共5个页面，其中第一页为信息展示页。右上角的光盘可播放背景音乐；中间部分的电话图标可跳转到拨号。第二页为照片页。用竖向轮播图的方式展示照片。第三页为美好时光页。可以播放视频。第四页为婚礼地点的地图页。点击标记点可以打开地图，用以导航。第五页为宾客信息页。收集参加婚礼的宾客的信息，其中参加人数用Picker组件来弹出选择。
• 遇到的问题：z-index属性的使用；
• 效果图： 

        

bug:

• 预览时背景音乐的播放音频出现错误，而在开发者工具中确可以正常的使用。

代码部分：

• 给出项目目录结构和app.json的代码，这次的代码和素材有点多且乱。

app.json

{

  "pages":[

    "pages/invate/invate",

    "pages/photo/photo",

    "pages/time/time",

    "pages/map/map",

    "pages/customer/customer"

  ],

  "window":{

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "wedding invating letter",

    "navigationBarTextStyle":"black"

  },

  "tabBar": {

    "color": "#ccc",

    "selectedColor": "#ff4c91",

    "borderStyle": "black",

    "backgroundColor":"#fff",

    "list": [

      {"pagePath": "pages/invate/invate","iconPath": "./icon/信封.png","selectedIconPath": "./icon/信封1.png","text": "邀请函"},

      {"pagePath": "pages/photo/photo","iconPath": "./icon/照片.png","selectedIconPath": "./icon/照片1.png","text": "照片"},

      {"pagePath": "pages/time/time","iconPath": "./icon/视频.png","selectedIconPath": "./icon/视频1.png","text": "美好时光"},

      {"pagePath": "pages/map/map","iconPath": "./icon/地图.png","selectedIconPath": "./icon/地图1.png","text": "附近地点"},

      {"pagePath": "pages/customer/customer","iconPath": "./icon/人员信息.png","selectedIconPath": "./icon/人员信息1.png","text": "人员信息"}

    ]

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json",

  "requiredBackgroundModes": ["audio", "location"] 

}