微信小程序案例2-3：婚礼邀请函

实现步骤

（一）准备工作

1.创建微信小程序

• 项目名称：婚礼邀请函
• 模板选择：不使用模板
  
• 单击【确定】按钮
  

2.清空index页面内容

• index.wxml
  

3.修改index页面配置文件

• index.json
  

4.配置全局导航栏

• app.json
  
• 查看预览效果
  

5.准备图片素材

• 在项目根目录创建images目录，拷贝项目所需图片
  

6.准备服务器端资源

• 服务器端目录
  
• 将视频资源放在htdocs目录
  
• 本地HTTP服务器程序 - index.js
  

var express = require('express'); // 导入Express框架

var app = express(); // 创建Express框架的实例

app.use(express.static('./htdocs')); // 设置静态资源目录

app.listen(8088, res => {
    // 服务器监听8088端口	
    console.log('服务器启动成功，访问地址：http://localhost:8088/文件名');
});

7.启动服务器

• 在命令行窗口执行命令：node index.js
  
• 在浏览器访问视频资源 - http://localhost:8088/01.mp4
  

8.配置四个页面

• 在app.json文件里配置四个页面
  

（二）项目初始化

1.配置标签栏

• 编写标签栏样式的相关配置
  
• 在list数组里配置标签按钮
  

"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/photo/photo",
        "iconPath": "images/marry.png",
        "selectedIconPath": "images/marry.png",
        "text": "照片"
      },
      {
   
        "pagePath": "pages/time/time",
        "iconPath": "images/video.png",
        "selectedIconPath": "images/video.png",
        "text": "美好时光"
      },
      {
   
        "pagePath": "pages/guest/guest",
        "iconPath": "images/guest.png",
        "selectedIconPath": "images/guest.png",
        "text": "宾客信息"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• 查看预览效果
  

2.配置导航栏

• 配置“邀请函”页面的导航栏
  

• 查看预览效果
  

• 配置“照片”页面的导航栏
  

• 查看预览效果
  

• 配置“美好时光”页面的导航栏
  

• 查看预览效果
  

• 配置“宾客信息”页面的导航栏
  

• 查看预览效果
  

• 修改全局的导航栏配置
  

• 查看“邀请函”页面的导航栏
  

3.编写公共样式

• 在app.wxss文件里定义公共样式
  

（三）实现“邀请函”页面的结构

1.设置背景图片

• 在ndex.wxm添加图像组件
  
• 查看预览效果
  
• 此时，背景图片没有充满“邀请函”页面，需要在样式文件里进行设置

2.编写内容区域的整体结构

• 包含顶部图片、标题、合照、新郎和新娘的姓名、婚礼信息区域
  

<!--index.wxml-->
<image class="bg" src="/images/bg_1.png"/>
<