手机网站表单验证做一网站

当前位置： 首页 > news >正文

手机网站表单验证,做一网站,友链购买有效果吗,公司网站建设合同交印花税吗文章目录 一、运行效果二、知识储备#xff08;一#xff09;导航栏配置#xff08;二#xff09;标签栏配置#xff08;三#xff09;vw、vh单位#xff08;四#xff09;video组件#xff08;五#xff09;表单组件#xff08;六#xff09;Node.js概述 三、实现… 文章目录 一、运行效果二、知识储备一导航栏配置二标签栏配置三vw、vh单位四video组件五表单组件六Node.js概述 三、实现步骤一准备工作1、创建微信小程序2、清空index页面内容3、修改index页面配置文件4、配置全局导航栏5、准备图片素材6、在服务器端准备资源7、启动服务端8、配置四个页面 二项目初始化1、配置标签栏2、配置导航栏3、编写公共样式 三实现“邀请函”页面的结构1、设置背景图片2、编写内容区域的结构 四实现“邀请函”页面的样式1、编写背景图片的样式2、编写内容区域的外部容器样式3、编写顶部图片区域样式4、编写标题区域样式5 、编写合照区域样式6、编写新郎和新娘区域的样式7、编写婚礼信息区域样式 五实现“照片”页面的结构六实现“照片”页面的样式七实现“美好时光”的页面的结构八实现“美好时光”页面的样式九实现“宾客信息”页面的结构十实现“宾客信息”页面的样式 一、运行效果 “婚礼邀请函”微信小程序由4个页面组成分别是“邀请函”页面、“照片”页面、“美好时光”页面和“宾客信息”页面。每个页面顶部的导航栏和底部的标签栏是公共部分在每个页面中都会出现页面中间的部分是页面内容每个页面的内容都不同。 邀请函页面 照片页面 美好时光页面 “宾客信息”页面
二、知识储备 一导航栏配置 目标掌握导航栏的配置方法能够完成导航栏标题颜色、背景颜色等页面效果的设置在微信小程序中有时为了页面美观需要更改导航栏的样式。此时可以通过页面配置文件或全局配置文件对导航栏的样式进行配置。
二标签栏配置 目标掌握标签栏的配置方法能够完成页面标签栏的配置通过标签栏可以很方便地在多个页面之间进行切换。在微信小程序的全局配置文件app.json中添加tabBar配置项即可实现标签栏配置。 通过标签栏切换页面效果 三vw、vh单位 目标掌握vw、vh单位的使用方法能够灵活运用vw、vh单位设置宽度和高度在使用CSS编写移动端的页面样式时由于不同手机的屏幕宽高不同屏幕适配会比较麻烦。针对这类型问题通过视口单位可以有效解决。视口表示可视区域的大小视口单位主要包括vwViewport Width和vhViewport 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 没弄好 下一个 7、启动服务端 在命令行窗口执行命令node index.js 在浏览器访问视频资源-http://localhost:⁸⁰⁸⁸⁄₀₁.mp4
8、配置四个页面 在app.json文件里配置四个页面
二项目初始化 1、配置标签栏 编写标签栏样式的相关配置 在list数组里面配置标签按钮 查看预览效果
2、配置导航栏 配置邀请函页面的导航栏 查看预览效果 配置照片页面的导航栏 查看预览效果 配置美好时光页面的导航栏 查看预览效果 配置宾客信息的导航栏 查看预览效果 修改全局的导航栏配置 查看邀请函页面的导航栏
3、编写公共样式 在app.wxss文件里定义公共样式
三实现“邀请函”页面的结构 1、设置背景图片 在index.wxml文件里添加图像组件 查看预览效果 此时背景图片没有充满“邀请函”页面需要在样式文件里进行设置
2、编写内容区域的结构 包含顶部图片、标题、合照、新郎和新娘的姓名、婚礼信息区域 查看预览效果有点凌乱
四实现“邀请函”页面的样式 1、编写背景图片的样式 让背景图片布满整个页面 查看预览效果效果图片为最终图能看懂就行
2、编写内容区域的外部容器样式 外部容器布满整个页面采用固定定位设置为纵向的Flex布局纵向是主轴横向是交叉轴容器里的项目水平居中交叉轴对齐方式 - align-items
3、编写顶部图片区域样式 设置图片区域的宽度和高度以及下边距
4、编写标题区域样式 设置标题字号、颜色、对齐方式与下边距 查看预览效果我懒自己加油 5 、编写合照区域样式 设置合照区域宽度高度、边框与边框半径 查看预览效果
6、编写新郎和新娘区域的样式 设置新郎与新娘区域样式、新郎和新娘姓名样式、新郎和新娘电话图片样式、新郎和新娘中间的双喜图片样式 查看预览效果
7、编写婚礼信息区域样式 设置字号、颜色、对齐方式、行高 查看预览效果“邀请函”页面彻底完成
五实现“照片”页面的结构 在photo。wxml文件里实现轮播效果 查看预览效果
六实现“照片”页面的样式 在photo.wxss文件里设置“照片”页面的样式 查看预览效果
七实现“美好时光”的页面的结构 在time.wxml文件里编写“美好时光”页面的结构 启动后台服务器才能访问到视频资源 查看预览效果
八实现“美好时光”页面的样式 在time.wxss文件里实现“美好时光”页面的样式 查看预览效果
九实现“宾客信息”页面的结构 十实现“宾客信息”页面的样式