婚礼邀请函小程序制作

厦门华厦学院

婚礼邀请函小程序制作

学期：2023-2024学年第一学期

课程名称：移动开发技术

姓名：

学号：

所属学院：商务与管理学院

专业（班级）：2021级电子商务（1）班

任课教师：________________

提交日期：2023年12月24日

一、项目概述

本课程设计为婚礼邀请函小程序的制作，在小程序开发中，经常会遇到各种

特殊需求，如视频播放、地图定位、发送消息等，小程序为这些需求提供了API

和组件，掌握了这些APT和组件的使用，即可完成对应功能的开发。

二、实验环境

操作系统：Windows或MacOS均可，但具体版本可能会有要求，需根据微信

开发者工具的兼容性来选择。

微信开发者工具：这是微信小程序开发的核心工具，提供了代码编辑、预览、

调试、上传等一系列功能。可以从微信公众平台官网下载并安装。

三、宾客分工

小组成员：杨金涛、陈敬川

成员分工：

（1）杨金涛负责整个项目的规划与总结（邀请函页面、照片展示页面、视频展示

页面与点赞效果的实现、材料的收集与整理）

（2）陈敬川负责活动地点页面和宾客信息页面，并提供PS高级技术的支持

四、制作内容（此部分内容可根据自己的项目修改）

婚礼邀请函小程序由5个页面组成，包括邀请函页面、照片展示页面、活动

地点页面、视频展示页面、宾客信息页面等等，要求小程序中包含：音乐播放、

图片轮播图、地图API及基础组件与框架的运用。例如：

（1）邀请函页面：展示举办活动的内容、联系人电话、活动地点、活动时

间等信息。

（2）照片页面：展示举办活动相关的照片轮播图、背景音乐等等。

（3）地图页面：调用地图服务APT,通过导航查看活动地点的路线图。

（4）视频页面：展示举办活动相关的视频等。

（5）宾客信息页面：表单的设计、参加活动的宾客填写个人信息，写一些

祝福语等。

五、功能分析与实现（此部分内容可根据自己的项目修改）

（一）邀请函首页

1.邀请函页面的任务需求如下:

(1)背景音乐播放：页面的右上角有一个背景音乐播放按钮，用于控制音乐

播放状态，单击按钮播放音乐，再次单击按钮暂停音乐。

功能实现：invitation.js

constback=wx.getBackgroundAudioManager();

backmusic:function(){

player();

functionplayer(){

back.title="婚礼______________________________________________________________________________

back.src="/20231224201144/5fdc7168884210b07696593fd554ee38/ymu

sic/8b60/b282/3-Fb9/c71dfe4d29f95ce88309eab877f254f3.mp3"；_____________________________________

back.onEnded(()=>{_______________________________________________________________________

playerO;//音乐循环播放

))

}_____________________________________________________________________________________________________

},

onLoad:function(options){

this.backmusic();

(2)联系人信息：页面中展示联系人的姓名、电话等信息。

功能实现:invitation.wxml

<!-婚礼信息一〉

<viewclass="content-address,^

<view>我们诚邀您来参加我们的婚礼</view>

<view>联系人：杨锦涛电话lt;/view>

<view>时间：2026年6月6号18:36</view>

<view>地点：厦门巾思明区熨港御道大学路177号双手塔6楼</view>

</view>

invitation.json

"usingComponents":{},

"navigationBarTitleText":"邀诘函”

(3)活动信息：页面展示活动举办的时间及地点。

功能实现：invitation.wxml

<!--婚礼信息-->

<viewclass="content-address">

<view>我们诚邀您来参加我们的婚礼</view>

<view>联系人：杨锦涛电话lt;/view>

<view>时间：2。26年6月6号18:36</view>

<view>地点：度门市思明区咀港街道大学路177号双子塔6楼</view>

</view>_____________________________________________________

invitation.wxss

•bg{

width:100vw;

height:100vh;

}

.content{

width:100vw;__________

height:100vh;_________

position:fixed;

display:flex;

flex-direction:column;

align-items:center;

)

.content-gift{

width:19vh;

height:18vh:

margin-bottom:1.5vh;

}_

.content-title{

font-size:6vh;

color:#ff4c91;

text-align:center;

margin-bottom:10vh;

}

.content-avatarimage(

width:26vh;

height:26vh;

border:3pxsolid#ff4c91;

border-radius:50%;______

position:relative;

}_

/*新郎新娘区域样式*/

.content-info{

width:66vw;

text-align:center;

margin-top:6vh;

display:flex;

flex-direction:row;

align-items:center;_

)

.content-name{

color:#Cr4c91;

font-size:5vh;_________

line-height:4.5vh;

font-weight:bold;

position:relative;

}

/*新郎新娘电话图片样式*/

.content-name>image{

width:2.5vh;

height:2.5vh;____________

border:lpxsolid#ff4c91;

border-radius:50%;______

position:absolute;

top:-Ivh;________________

right:-3.5vh;

}

/*新郎新娘中间的图片样式*/

.content-wedding{

flex:1;_

width:9vh;

height:9vh;

}

.content-wedding>image{

width:20vh;

height:13vh;

margin-left:0vh;

}

/*婚礼信息区域样式*/

.content-address(

margin-top:6vh;______________

color:#ff4c91;

font-size:3vh;

font-weight:bold;

text-align:center;

line-height:Svh;

}

.content-addressview:first-child{

font-size:3vh;

padding-bottom:3vh;

2.邀请函首页的效果展示：（截图）

(二)照片页面

1.在本任务中，将会完成照片页面的开发，该页面采用纵向轮播的方式展示图

片，可以通过单击指示面板的圆点切换到相对应的图片。功能需求如下：

(1)每一张轮播的图片都占满显示区域，滑动屏幕可以实现图片的纵向切换。

(2)在右侧纵向显示指点面板，单击圆点可切换显示状态。

(3)在用户无操作时，可以实现自动无缝轮播。

功能实现：photo.json

"usingcomponents":{},__________

2navigationBarTitleText":

photo,wxml

<!s/photo/photo.wxml-->

<!-照片轮播图（添加音乐播放）-->

<swiperindicator-color="white"indicator-active-color="#ff4c91"indicator-dots="true"autopla

y="true"interval="3000"duration="1000"vertical="true"circular="true">

<swiper-item>

<imagesrc="/images/ljipg"/>_______________________________________________________________

</swiper-item>________________________________________________________________________________

<swiper-item>_______________________________________________________________________________

<imagesrc="/images/2.jpg"/>

</swiper-item>

<swiper-item>_______________________________________________________________________________

<imagesrc="/images/3.jpg"/>

</swiper-item>

<swiper-item>

<imagesrc="/images/4.jpg"/>

</swiper-item>

<swiper-item>

<imagesrc="/images/5.jpg"/>

</swlper-item>______________________________________________________________________________

<swiper-item>_______________________________________________________________________________

<imagesrc="/images/6.jpg"/>

</swiper-item>______________________________________________________________________________

〈/swipe”

photo.WXSS

/*pages/photo/photo.wxss*/

/*设置轮番图高度和图片大小”/

height:100vh;

image(

width:100vh;

height:100vh;

2.照片页面的效果展示：（截图）

（三）地图页面

1.在本任务中，将会完成活动地点页面的开发，该页面会显示活动地点的地图,

单击导航图标可以定位位置，查看路线。功能需求如下：

（1）拾取到活动举办地点的经纬度坐标。

(2)利用m叩组件显示地图，并在活动地点放置markers覆盖物标记。

⑶单击蓝色图标的标记点，通过wx.opcnLocation。调用微信内置地图查看

位置。

功能实现：map.js

Page({

data:{

latitude:24.435661,

longitude:118.088730,

markers:[{

iconPath:'/images/navi.png',

id:0,

latitude:24.435661,

longitude:118.08873。,

width:50,

height:50

}

]

}，

markertap:function(){

wx.openLocation({

latitude:this.data.latitude,

longitude:this.data.longitude,

name:'厦门双子塔L

address:‘厦门世茂,

))

map.json

"usingcomponents":{),

"navigationBarTitleText":"定位"

map.wxml

<maplongitude="{{longitude}}"latitude="{{latitude}}"markers="{{markers}}"bindmarkertap="ma

rkertap,'/>______________________________________________________________________________________

<viewclass="info">_____________________________________________________________________________

<textclass="title”>活动主题：我们结婚了</text>

<textclass="loc”>活动地点：厦门双子塔</text>

<textclass="time”>活动时间：2026年6月6日</text>

</view>

map.wxss

2.地图页面的效果展示：（截图）___________

Ma.。的门市海洋综合

IB门朝宗宫。行政执法支队

网埠C演武，

工港海洋

文BJ化展示厅f々Bi-器iw靛i^K『C

0

沙城岸艺术西区-.

c曲目电五金店

4p«

世茂前大2仲矗院取

（思明院区）

O演或大）

演武大桥大桥

观景平台

向r1丝0曾

(四)视频页面

1.在本任务中，将会完成视频页面的开发，该页面采用播放视频的方式展示结

婚佳人的美好时光，可以通过单击指示三个按钮分别实现发送祝福、开始、

暂停。功能需求如下：

(1)发送祝福按钮。

(2)开始按钮。

(3)暂停按钮。

功能实现：time.json

"usingComponents":{},

"navigationBarTitleText":"美好时光"

time.wxml

<!s/vedio/vedio.wxml-->

<viewclass="vedio-container">

<!・・给视频组件创建一个Id(video),用于API创建时绑定这个id

<videoid="video"src="/upgcxcode/18/42/1379234218/13

79234218-：l-：L6.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX

8fqJeYTj_lta53NCM=&uipk=5&nbs=l&deadline=1703418103&gen=playurlv2&os=08cbv&oi=1786440855&trid=

564edl44ee854dl7ball0a9256fe3-F19h&mid=1083758780&platform=html5&upsig=249df487bcb4919326ad909b

:

3f34dl-fe&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,midjplatform&bvc=vod&nettype=0&f=h_0_0&bw=

47998&logo=80000000"autoplay="false"/>

<inputbindinput="danmuText"type="text"/>

<buttonbindtap="danmu"type="warn”>发送祝福C/button〉

<buttonbindtap="tapPlay"type="primary”>播放(/button)

<buttonbindtap="tapPause"type="default”>暂停V/button)

</view>

time.wxss

.vedio-container{

padding:20rpx;

.}__________________

video{

width:100%;

input{____________

width:100%;_

height:100rpx;

border:2rpxsolid#cccccc;

padding-left:20rpx;

button{

margin-top:40rpx;

2.视频页面的效果展示：(截图)

暂停暂停

(五)宾客信息页面

1.在本任务中，将会完成宾客信息页面的开发，该页面提供了一个表单，用于

填写宾客的信息，包括姓名、手机号、人数、建议、祝福等等。例如功能需

求如下：

(1)为页面添加背景图。

(2)当姓名、手机号所在文本框失去焦点时，触发失去焦点事件bindblur,

对文本内容进行获取"

(3)单击submit提交按钮，获取form表单数据，提交成功后会给出“成功”

提示。

功能实现：guest.json

"usingComponents":{),

"navigationBarTitleText":"宾客信息”

guest.wxml

<!s/guest/guest.wxml-->

<!一背信图片・•>

<!二mode：表示对象在内存中的存储类型，基本数据类型

'atomic'mode:numericCInteger/double),complex,character和logical,递的对象_

(recursiveobject):'list'或'function'._______________________________________________________

class：是-一种抽象类型，或者理解为一种数据结构(数据框.因子,列友)，他主要是用来给泛型函数(参考java

中泛型的概念》识别参数用。所以当给函数传参数的时候如果发生错误，就查看class属性。

<imagesrc="/images/bgl.jpg"class="bg"/>

<!--内容区域-->

<form>

<viewclass="content">

<!--姓名・・>_

<viewclass="name">________________________________________________________________________

<inputname="name"placeholder-class="phcolorMplaceholder："请输入您的姓名—

“typea'^ext"/>

</view>

<!--性别一>

<viewclass=MgenderM>

<text>请选择您的性别：</text>

<radio-group>

<radio>5B</radio>

〈radio〉女</radio>

</radio2group>___________________________________________________________________________

</view>

<!-一手机号一〉

<viewclass="telephone">___

<inputname="telephone"placeholder-class="phcolor"placeholder="i有输入您的手机号码_

"type="number"/>

</view>

<!--贺礼-->

<viewclass="gift">

<inputname=',gift"placeholder-class="phcolor"placeholder="i，i输入您的贺礼

"type="text,'/>

</view>

<!-提交按钮-->_____

(button)提交〈/button〉

</view>

</form>

guest.wxss

/*pages/guest/guest.wxss*/______

•bg<_______________________________

width:100vw;____________________

height:100vh;___________________

}

.content{

width:88vw;

position:fixed;

left:16vw;

bottom:30vh;

}

/*姓各样式性别手机号码货也M*/

.content.name{

font-size:large;______________

border:Irpx#ff4c91;

border-radius:10rpx;

padding:lvh40rpx;

margin-bottom:lvh;

color:#ff4c91;

}

.content.gender(

font-size:33rpx;

margin-bottom:lvh;___________

color:#0bb2fa;

display:flex;___________________

}_

.content.telephone{

■Font-size:large;

border:Irpx#ff4c91;

border-radius:10rpx;

padding:lvh40rpx;

margin-bottom:2vh;

color:#ff4c91;

}

.content.gift!

•font-size:large;____________

border:Irpx#ff4c91;

border-radius:10rpx;

padding:lvh40rpx;

margin-bottom:2vh;

color:#ff4c91;

}

.contentbutton(

font-size:large;

background:rgb(255,0,106);

color:aliceblue;

margin-top:lvh;_____________

position:center;____________

left:-10vh;

2.宾客信息页面的效果展示：（截图）

向1自加管向［强汶a

函照片♦位湖时光宾舍信息■语函，片定位的时光英舍信息

（六）视频页面的点赞效果实现

1.在本任务中，为视频展示页面增添点赞效果功能的实现。

功能实现：timc.js

vanlastFrameTime=

varcount=0;

varctx=null;

varfactor={

speed:.008,//运动速度,值越小越慢

七：9〃贝鎏

Ji­

vanthat;

vartimer=null;//循环定时器

Page({

data:{

style_img:'',

img_path:[______________________

[(

x:30,

y:400______________________

},{

x:70,

y:300

},{

x:-50,

y:150

}，{

x：30,_____________________

y:0

}]，

[{_

x:30,

y:400

},{

x:30,

y:300

}，{

x:80,

y:150

}，{

30

y:0

}],

[(

x:30,

y:400

},{

x:0,

y:90

},{

x：80,

y:100

}，{_

X£30,________________

y:0

)]

]

〃这里是贝塞尔曲线参数__________

},

onLoad:function(options){

that=this

〃获取canvas实例

ctx=wx.createCanvasContext('mycanvas')

onUnload:function(){

if(timer!-null)(

clearTimeout(timer)

〃不断绘制图片到cavans

requestAnimationFrame(callback){

varcurrTime=newDate().getTime();

〃手机屏幕刷新率一般为60Hz,大概16ms刷新一次，这里为了使页面看上去更流畅自然，通过改变timedis的值

可以控制动画的快慢

vantimedis=16-(currTime-lastFrameTime)

vartimeToCall=Math.max(0,timedis);

varid=setTimeout(callback,timeToCall);

lastFrameTime=currTime+timeToCall;

returnid;____________________________________

}>

drawlmage:function(data,repeatcount){

iffreoeatcount»»0

return

1_______________________________________________________

vanpie=data[0][。）；〃邛介贝塞尔，坐标值

varpll=data[0][l];it道贝塞尔曲线第一个控制点坐标值

varpl2=data[0][2];〃三阶贝塞尔曲线第二个控制点坐标值.

三阶贝塞尔曲线终点坐标值

vanP13=data[01[3]；〃

varp20=data[l][0];

varp21=data[l][1];

varp22=data[l][2];

/arp23=data[l][3];

varp30=data[2][0];

varp31=data[2][1];

varp32=data[2][2];

,arp33=data[2][3];

vart=factor.t;

/*计算多婀系数*/_____________________

varcxl=3*(pll.x-plO.x);

varbxl=3♦(pl2.x-pll.x)-cxl;

varaxl=pl3.x-pl0.x-cxl-bxl;

varcyl=3*(pll.y-plO.y);

varbyl=3*(pl2.y-pll.y)-cyl;

varayl=p13.y-pie.y-cyl-byl;

/*计算xtyt坐标值*/

varxtl=axl*(t*t*t)+bxl♦(t♦t)+cxl♦t+pl0.x;

varytl=ayl*(t*t*t)+byl*(t*t)+cyl*t+plO.y；

/**计算多项式系数*/

varcx2=3*(p21.x-p20.x);

varbx2=3•(p22.x-p21.x)-cx2;

varax2■p23.x-p20.x-cx2-bx2;

varcy2=3*(p21.y-p20.y);

varby2=3*(p22.y-p21.y)-cy2;

，aray2=p23.y-p20.y-cy2-by2;

/*计算xtyt坐标值*/

varxt2=ax2*(t*t*t)+bx2*(t*t)+cx2*t+p20.x;

/**计算多项式系数*/

vancx3=3*(p31.x-p30.x);

varbx3-3*(p32.x-p31.x)-cx3;

varax3■p33.x-p30.x-cx3-bx3;

varcy3-3*(p31.yp3G.y);

varby3=3*(p32.y-p31.y)-cy3;

varay3=p33.y-p30.y-cy3-by3:

/*计算xtyt坐标值*/

varxt3=ax3*(t*t*t)+bx3*(t*t)+cx3*t+p30.x;

varyt3=ay3♦(t*t*t)+by3♦(t*t)+cy3*t+p30.y;

factor.t+=factor.speed;

ctx.drawlmage("/images/heartl.png",xtl,ytl,30,30);

ctx.drawlmage("/images/heart2.png",xt2,yt2,30,30);

ctx.drawlmage("/images/heart3.png",xt3,yt3,30,30);________

ctx.draw();____________________________________________________

if(factor.t>1){

factor.t=0;________________________________________________

clearTimeout(timer)

if(repeatcount<=

that.startTimer(repeatcount)

}else{

if(count<repeatcount){

that.startTimer(repeatcount)

count++

}else{

that.draworiginal()

count=0;_______________________________________________

}__________________________________________________________

}

)elbe(

timer=that.requestAnimationFrame(function(){

that.drawlmage(that.data.img_path,repeatcount)

))

}

3—

onClicklmage^function(e){_____________________________________

〃点击心形的时候动画效果_____________________________________________

that.setData({

style_img:'transform:scale(l.3);

!)

setTimeout(function(){

that.setData({

style_img:'transform:scale(l);'

))

),500)

factor.t=2

count=0

that.startTimer(l)

}，

//repeatcount-1就是循生乙其」蚣王雯的整数就是砌画循环次数

startTimer:function(repeatcount){

that.drawlmage(that.data.img_path,repeatcount)

}>

draworiginal(){

>

ctx.drawlmage("/iinages；heartl.png'>30,400,30,30);

ctx.drawlmage("/images；heart2.png",30,400,30,30);

ctx.drawImageC'/images/heartS.png",30,400,30,30);

ctx.draw();

)

1)

time.wxml

<view>

<canvascanvas-id="mycanvas"class="canvas"/>_______________________________________________

<imagesrc="/images/heart_button.png"class="heart"bindtap="onClickImage"style="{{style_im

g}}"x/image>

</view>_________________________________________________________________________________________

timc.wxss

.canvas{

background:transparent;

width:90px;

height:400px;

position:fixed;

right20px;

bottom:60px;________________________________

}___________________________________________________

/*transform下面的属性是为了让动画看上去更自然*/

.heart{

position:fixed;

right:45px;

bottom:30px;______________________

width:40px;_______________________

height:40px;______________________

transform:scale(l);

-webkit-transform:scale(l);

-webkit-transition:easeall;

-moz-transition:easeall;

transition:easeall;

-webkit-transition-duration:700ms;

-moz-transition-duration:700ms;

transition-duration:700ms;

2.视频页面的点赞效果实现效果展示：（截图）

（七）小程序的总体布局

3.在本任务中，将邀请函页面、照片展示页面、活动地点页面、视频展示

页面、宾客信息页面这五个页面关联起来。

功能实现：app.json

"pages":[

"pages/invitation/invitation",__________________

"pages/photo/photo",

"pages/map/map",________________________________

"pages/time/time",

"pages/guest/guest"

],

"window":{

"navigationBarTextStyle":"white",

"navigationBarBackgroundColor":"#ff4c91"

3

"tabBar":{

"color":"itccc",

"selectedColor":"#ff4c91",

"borderstyle":"white",

"backgroundColor'1:",___________________

"list":[

(

"pagePath":"pages/invitation/invitation",

"iconPath":"images/invite.png",

"selectedlconPath":"images/invite.png",

"text":"邀请函”

3

{________________________________________