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

(一)准备工作

1，创建微信小程序

• 单击【确定】按钮
  

清空index页面内容

• index.wxml
  

3,修改index页面配置文件

• index.json
  

4，修改全局配置文件

- app.json

• 查看预览效果
• 

5，准备图片素材

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

6，准备服务器端资源

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

7启动服务器

• 在命令行窗口执行命令：node index.js
  
• 在浏览器访问资源
  

8，配置四个页面

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

（二）项目初始化

1，配置标签

• 编写标签栏样式的相关配置项

{
   
  "pages": [
    "pages/index/index",
    "pages/photo/photo",
    "pages/time/time",
    "pages/guest/guest"
    

  ],
  "window": {
   
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序",
    "navigationBarBackgroundColor": "#eee"
    
  },
  "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"