目的
1.掌握微信小程序的开发技术,包括页面布局、交互设计、数据存储等。
2.学会运用微信小程序的各种组件和 API,实现个性化的婚礼邀请函功能。
3.通过制作婚礼邀请函小程序,提升创意设计和用户体验优化的能力。
4.了解如何在小程序中整合多媒体资源,如图片、音乐、视频等,以增强邀 请函的吸引力。
5.能够将小程序发布上线,与亲朋好友分享幸福时刻,同时熟悉小程序的发 布流程和审核要求。
流程
确定婚礼邀请函小程序的功能需求,如展示新人照片、婚礼时间地点、RSVP 功能、地图导航等。规划小程序的页面结构和交互流程,确保用户能够方便地浏览和操作。
界面设计:制作精美的页面布局,包括首页、婚礼详情页、RSVP 页面等。可以使用微信小程序提供的组件,如视图容器(view)、图片(image)、文本(text)等,进行页面搭建。
测试与优化:在开发过程中进行多次测试,确保小程序的功能正常、界面美观、交互流畅。检查兼容性问题,确保小程序在不同设备和操作系统上都能正常运行。根据测试结果进行优化,修复漏洞和改进用户体验。
代码架构
对应代码
index.wxml
<view class="player player-{{isPlayingMusic ? 'play' : 'pause'}}" bindtap="play">
<image src="/images/music_icon.png" />
<image src="/images/music_play.png" />
</view>
<!-- 背景图片 -->
<image class="bg" src="/images/bg_1.png" />
<!-- 内容区域 -->
<view class="content">
<!-- 顶部GIF图片 -->
<image class="content-gif" src="/images/save_the_date.gif" />
<!-- 标题 -->
<view class="content-title">邀请函</view>
<!-- 新郎和新娘的合照 -->
<view class="content-avatar">
<image src="/images/avatar.png" />
</view>
<!-- 新娘和新郎的名字 -->
<view class="content-info">
<view class="content-name" bindtap="callGroom">
<image src="/images/tel.png" />
<view>张三石</view>
<view>新郎</view>
</view>
<view class="content-wedding">
<image src="/images/wedding.png"></image>
</view>
<view class="content-name" bindtap="callBride">
<image src="/images/tel.png" />
<view>张三石的爱人</view>
<view>新娘</view>
</view>
</view>
<!-- 婚礼信息 -->
<view class="content-address">
<view>我们诚邀您来参加我们的婚礼</view>
<view>时间:未来的某一天</view>
<view>地点:花海圆满酒店</view>
</view>
</view>
index.wxss
/* 音乐播放图标 */
.player {
position: fixed;
top: 20rpx;
right: 20rpx;
/* 提高堆叠顺序 */
z-index: 1;
}
.player > image:first-child {
width: 80rpx;
height: 80rpx;
/* 为唱片图标设置旋转动画 */
animation: musicRotate 3s linear infinite;
}
@keyframes musicRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.player > image:last-child {
width: 28rpx;
height: 80rpx;
margin-left: -5px;
}
/* 播放状态 class为.player-play */
.player-play > image:first-child {
animation-play-state: running;
}
.player-play > image:last-child {
animation: musicStart 0.2s linear forwards;
}
/* 暂停状态 class为.player-pause */
.player-pause > image:first-child {
animation-play-state: paused;
}
.player-pause > image:last-child {
animation: musicStop 0.2s linear forwards;
}
@keyframes musicStart {
from {
transform: rotate(0deg);
}
to {
transform: rotate(20deg);
}
}
@keyframes musicStop {
from {
transform: rotate(20deg);
}
to {
transform: rotate(0deg);
}
}
/* 背景图 */
.bg {
width: 100vw;
height: 100vh;
}
/* 内容区域 */
.content {
width: 100vw;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
/* 顶部gif图 */
.content-gif {
width: 19vh;
height: 18.6vh;
margin-bottom: 1.5vh;
}
/* 标题 */
.content-title {
font-size: 5vh;
color: #ff4c91;
text-align: center;
margin-bottom: 2.5vh;
}
/* 头像 */
.content-avatar image {
width: 24vh;
height: 24vh;
border: 3px solid #ff4c91;
border-radius: 50%;
}
/* 新郎新娘信息 */
.content-info {
width: 55vw;
text-align: center;
margin-top: 4vh;
display: flex;
align-items: center;
}
.content-name {
color: #ff4c91;
font-size: 2.7vh;
line-height: 4.5vh;
font-weight: bold;
position: relative;
}
.content-name > image {
width: 2.6vh;
height: 2.6vh;
border: 1px solid #ff4c91;
border-radius: 50%;
position: absolute;
top: -1vh;
right: -3.6vh;
}
.content-wedding {
flex: 1;
}
.content-wedding > image {
width: 5.5vh;
height: 5.5vh;
margin-left: 20rpx;
}
/* 婚礼信息 */
.content-address {
margin-top: 5vh;
color: #ec5f89;
font-size: 2.5vh;
font-weight: bold;
text-align: center;
line-height: 4.5vh;
}
.content-address view:first-child {
font-size: 3vh;
padding-bottom: 2vh;
}
map.wxml
<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" bindmarkertap="markertap" />
map.wxss
map {
width: 100vw;
height: 100vh;
}
picture.wxml
<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular>
<swiper-item wx:for="{{imgUrls}}" wx:key="*this">
<image src="{{item}}" mode="aspectFill" />
</swiper-item>
</swiper>
picture.wxss
swiper {
height: 100vh;
}
image {
width: 100vw;
height: 100vh;
}
腾讯视频插件,需要注册企业微信公众号(需要花钱),才可以使用,仅学习使用可忽略
video.wxml
<view class="video-list" wx:for="{{movieList}}" wx:key="user">
<view class="video-title">标题:{{item.title}}</view>
<view class="video-time">时间:{{formatData(item.create_time)}}</view>
<video src="{{item.src}}" objectFit="fill"></video>
</view>
<view class="video-list">
<view class="video-title">标题:腾讯视频插件演示</view>
<view class="video-time">时间:2019-1-1 10:11:12</view>
<txv-video vid="y0371c5p9cc" playerid="txv1"></txv-video>
</view>
<wxs module="formatData">
module.exports = function(timestamp) {
var date = getDate(timestamp)
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
var h = date.getHours()
var i = date.getMinutes()
var s = date.getSeconds()
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
}
</wxs>
vide.wxss
.video-list {
box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);
margin: 10rpx 25rpx;
padding: 20rpx;
border-radius: 10rpx;
margin-bottom: 30rpx;
background: #fff;
}
.video-title {
font-size: 35rpx;
color: #333;
}
.video-time {
font-size: 13px;
color: #979797;
}
.video-list video {
width: 100%;
margin-top: 20rpx;
}
配置文件
project.config.json
{
"description": "项目配置文件",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"urlCheck": false,
"es6": true,
"enhance": false,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": true,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false,
"bundle": false,
"useIsolateContext": true,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true
},
"compileType": "miniprogram",
"libVersion": "2.14.1",
"appid": "wx0298165ccea56bb4",
"projectname": "invitation",
"condition": {},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
}
}
效果截图
转载自CSDN-专业IT技术社区
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_66547608/article/details/142651066