【微信小程序——案例2-3 婚礼邀请函】

最新推荐文章于 2024-06-20 23:38:38 发布

J7.777

最新推荐文章于 2024-06-20 23:38:38 发布

阅读量874

点赞数 4

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_67308035/article/details/133697322

版权

文章目录

一、运行效果
二、知识储备
三、实现步骤

一、运行效果

“婚礼邀请函”微信小程序由4个页面组成，分别是“邀请函”页面、“照片”页面、“美好时光”页面和“宾客信息”页面。每个页面顶部的导航栏和底部的标签栏是公共部分，在每个页面中都会出现；页面中间的部分是页面内容，每个页面的内容都不同。
“邀请函”页面
“照片”页面
“美好时光”页面
“宾客信息”页面

二、知识储备

（一）导航栏配置

目标：掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置
在微信小程序中，有时为了页面美观，需要更改导航栏的样式。此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。

（二）标签栏配置

目标：掌握标签栏的配置方法，能够完成页面标签栏的配置
通过标签栏可以很方便地在多个页面之间进行切换。在微信小程序的全局配置文件app.json中添加tabBar配置项即可实现标签栏配置。

（三）vw、vh单位

目标：掌握vw、vh单位的使用方法，能够灵活运用vw、vh单位设置宽度和高度
在使用CSS编写移动端的页面样式时，由于不同手机的屏幕宽高不同，屏幕适配会比较麻烦。针对这类型问题，通过视口单位可以有效解决。视口表示可视区域的大小，视口单位主要包括vw（Viewport Width）和vh（Viewport Height），在CSS中很常用。

（四）video组件

目标：掌握video组件的使用方法，能够灵活运用video组件实现页面中视频的处理
微信小程序提供了video组件用来播放视频，video组件的默认宽度为300px，高度为225px，可通过WXSS代码设置宽高。

（五）表单组件

目标：掌握表单组件的使用方法，能够灵活运用表单组件完成表单页面的制作
微信小程序中的表单组件与HTML中的表单类似。微信小程序在HTML基础上做了封装，并且增加了一些组件。表单组件通常用于用户信息的填写，以便于把用户填写的信息提交给服务器。

（六）Node.js概述

目标：能安装Node.js，简单使用Node.js启动服务器，并且能访问服务器端资源

三、实现步骤

（一）准备工作

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:8080/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": "宾客信息"
          }        
      ]
  },