《邀请函小程序.docx》由会员分享，可在线阅读，更多相关《邀请函小程序.docx（24页珍藏版）》请在三一办公上搜索。
1、厦门华厦学院婚礼邀请函小程序制作学期：2023-2024学年第一学期课程名称：移动开发技术姓名：杨金涛、陈敬川学号：21107514K211075120所属学院：_商务与管理学院专业（班级）：2021级电子商务（1）班任课教师：林国凤提交日期：2023年12月24日一、项目概述本课程设计为婚礼邀请函小程序的制作，在小程序开发中，经常会遇到各种特殊需求，如视频播放、地图定位、发送消息等，小程序为这些需求提供了API和组件，掌握了这些APl和组件的使用，即可完成对应功能的开发。二、实验环境操作系统：WindOWS或MaCOS均可，但具体版本可能会有要求，需根据微信开发者工具的兼容性来选择。微信开发
2、者工具：这是微信小程序开发的核心工具，提供了代码编辑、预览、调试、上传等一系列功能。可以从微信公众平台官网下载并安装。三、宾客分工小组成员：杨金涛、陈敬川成员分工：（1）杨金涛负责整个项目的规划与总结（邀请函页面、照片展示页面、视频展示页面与点赞效果的实现、材料的收集与整理）（2）陈敬川负责活动地点页面和宾客信息页面，并提供PS高级技术的支持四、制作内容（此部分内容可根据自己的项目修改）婚礼邀请函小程序由5个页面组成，包括邀请函页面、照片展示页面、活动地点页面、视频展示页面、宾客信息页面等等，要求小程序中包含：音乐播放、图片轮播图、地图APl及基础组件与框架的运用。例如：（1）邀请函页面：展示
3、举办活动的内容、联系人电话、活动地点、活动时间等信息。（2）照片页面：展示举办活动相关的照片轮播图、背景音乐等等。（3）地图页面：调用地图服务APL通过导航查看活动地点的路线图。（4）视频页面：展示举办活动相关的视频等。（5）宾客信息页面：表单的设计、参加活动的宾客填写个人信息，写一些祝福语等。五、功能分析与实现（此部分内容可根据自己的项目修改）（一）邀请函首页1.邀请函页面的任务需求如下:(1)背景音乐播放：页面的右上角有一个背景音乐播放按钮，用于控制音乐播放状态，单击按钮播放音乐，再次单击按钮暂停音乐。功能实现：inVitationJsconstback=w.getBackgroundAu
4、dioManager();backmusic:function()player();functionplayer()_back,title=婚礼；back.src=back.onEnded()=layer();/音乐循环播放)1),onLoad:function(options)this.backmusic();，结婚邀请函WeChHt 令2Ck3O10O%联系人：5VB清电话：1 3388889999 时间：2026年6月6号18:36点：厦门市思明区瞳港街道大学路177号双我们诚遨您来参加建们的婚礼音频随放.l结ft(2)联系人信息：页面中展示联系人的姓名、电话等信息。功能实现：invit
5、ation.wxml我们诚邀您来参加我们的婚礼viewCVieW联系人：杨锦涛电话：13388889999时间：2026年6月6号18:36地点：度门市思明区鹿港街道大学路177号双子塔6楼invitation.jsonusingcomponents:,navigationBarTitIeText:邀请函”(3)活动信息：页面展示活动举办的时间及地点。功能实现：invitation.wxml!-婚礼信息我们诚逖您来参加我们的婚礼联系人：杨锦涛电话：13388889999时间：2026年6JJ6；18:36地点：厦门市思明区厦港街道大学路177号双子塔6楼invitation.Wxssbgwid
6、th:100vw;height:lvh;).COntentwidth:100vw;height:100vh;position:fixed;display:flex;flex-direction:column;align-items:center;.content-giftwidth:19vh;height:18vh;margin-bottom:1.5vh;.content-title(font-size:6vh;color:#ff4c91;tet-align:center;margin-bottom:10vh;1_.content-avatarimagewidth:26vh;height:26
7、vh;border:3psolidffff4c91;border-radius:50%;position:relative;*新郎新娘区域样式*/.content2infowidth:66vw;text-align:center;margin-top:6vh;display:flex;flex-direction:row;align-items:center;.content-namecolor:#ff4c91;font-size:5vh;line-height:4.5vh;font-weight:boIdjposition:relative;1_/“新郎新娘电话图片样式*/.content-
8、nameimagewidth:2.5vh;height:2.5vh;border:lpsolidffff4c91;border-radius:50%;position:absolute;top:-Ivh;right:-3.5vh;/新郎新娘中间的图片样式/.content-weddingflex:1;width:9vh;height:9vh;.content-weddingimage(width:20vh;height:13vh;margin-left:0vh;*婚礼信息区域样式*/.content-addressmargin-top:6vh;color:#ff4c91;font-size:3
9、vh;font-weight:bold;text-align:center;line-height:5vh;.content-addressview:first-childfont-size:3vh;padding-bottom:3vh;2.邀请函首页的效果展示：（截图）(二)照片页面1.在本任务中，将会完成照片页面的开发，该页面采用纵向轮播的方式展示图片，可以通过单击指示面板的圆点切换到相对应的图片。功能需求如下：(1)每一张轮播的图片都占满显示区域，滑动屏幕可以实现图片的纵向切换。(2)在右侧纵向显示指点面板，单击圆点可切换显示状态。(3)在用户无操作时，可以实现自动无缝轮播。功能实现：p
10、hoto.jsonusingcomponents:,navigatIonBarTitIeText:照片photo,wxml!-pagesphotophoto.photo.WXSS*pages/photo/photo.wss/设置轮番图高度和图片大小*/SWiPerheight:100vh;image(width:100vh;height:100vh;)2.照片页面的效果展示：（截图）（三）地图页面1.在本任务中,将会完成活动地点页面的开发，该页面会显示活动地点的地图,单击导航图标可以定位位置，查看路线。功能需求如下：（1）拾取到活动举办地点的经纬度坐标。(2)利用m叩组件显示地图，并在活动地点
11、放置markers覆盖物标记。(3)单击蓝色图标的标记点，通过wx.openLocation()调用微信内置地图查看位置。功能实现：map.jsPageddata:latitude:24.435661,longitude:118.088730,markers:iconPath:,imagesnavi.png,id:。，latitude:24.435661,longitude:118.088730,width:50,height:50)，markertap:function()w.OpenLocation(latitude:this.data.latitude,longitude:this.da
12、ta.longitude,name:,J双，塔,address:W茂海峡大应),map.jsonusingcomponents:,navigationBarTitIeText:定位map.wxmlmaplongitude=,longitudelatitude=latitudemarkers=markersbindmarkertap=nmarkertap/,tetCIaSSWtitle”活动主题：我们结婚了活动地点：度门双子塔活动时间：2026年6月6日textap.wxss*pages/map/map.wss/apwidth:100%;height:500px;info(background-
13、color:rgb(233,252,224);height:500rpx;display:flex;flex-direction:column;margin-top:50rpx;.infotetflex:1;.title,.loc,.time(font-size:20pt;text-align:center;2.地图页面的效果展示：（截图） 诩安医院 （思明院区）0毛分 现茶平台囱，&0 圄定位(四)视频页面1.在本任务中，将会完成视频页面的开发，该页面采用播放视频的方式展示结婚佳人的美好时光，可以通过单击指示三个按钮分别实现发送祝福、开始、暂停。功能需求如下：(1)发送祝福按钮。(2)开始按
14、钮。(3)暂停按钮。功能实现：IimeJson“usingcomponents”:,navigationBarTitIeText:美好时光time.wxml!-给视频组件创建一个id(VideO),川于APl创建时绑定这个idvideoid=videosrc=htts:/upos-sz-发送祝福播放/button暂停time.wxss.Vedio-Containerpadding:20rp;videowidth:100%;inputwidth:100%;height:102rpx;border:2rpsolid#cccccc;padding-left:20rpx;buttonmargin-to
15、p:40rp;2.视频页面的效果展示:(截图)老0021祝福新人，白头偕老祝福新人，白头偕老播放暂停(五)宾客信息页面1.在本任务中，将会完成宾客信息页面的开发，该页面提供了一个表单，用于填写宾客的信息，包括姓名、手机号、人数、建议、祝福等等。例如功能需求如下：(1)为页面添加背景图。(2)当姓名、手机号所在文本框失去焦点时，触发失去焦点事件bindbkr,对文本内容进行获取。(3)单击submit提交按钮，获取form表单数据，提交成功后会给出成功提示。功能实现：guest.jsonusingcomponents:,navigationBarTitleTet:宾客信息”guest.wxml
16、!-背景图片 !-姓名请选择您的性别：radio女提交guest.wxss/pagesguestguest.wss*/bgwidth:100vw;height:100yh;).contentwidth:88vw;position:fixed;left:-6vw;bottom:30vh;)*姓名样双推别_立机号码贺礼按钮式.content.name(font-size:large;border:Irpx#ff4c91;border-radius:lrp;padding:Ivh40rp;margin-bottom:lvh;color:#ff4c91;.contentgenderfont-size:
17、33rx;margin-bottom:lvh;color:#0bb2fa;display:flex;).content.telephonejfont-size:large;border:Irpx#ff4c91;border-radius:10rp;padding:Ivh40rp;margin-bottom:2vh;color:#ff4c91;.content.giftfont-size:large;border:Irpx#ff4c91;border-radius:lrpx;padding:Ivh40rpx;margin-bottom:2vh;color:#ff4c91;1 .contentbu
18、tton(font-size:large;background:rgb(255,0,106);color:aliceblue;margin-top:lvh;position:center;left:-10vh;2 .宾客信息页面的效果展示：（截图）向自通窗向，自用B鼠请函片定位潮时光宾客僖息BW骐片定位潮时光宾喜髓（六）视频页面的点赞效果实现1 .在本任务中，为视频展示页面增添点赞效果功能的实现。功能实现：time.jsvanIastFrameTime=0;vancount=0;vanct=null;vanfactor=speed:.008,/运动速度，值越小越慢t:0/贝塞尔函数系数；Var
19、that;vantimer=r-：；,/,-Page(data:style-img:,img_path:30,】，Hx:30,y:400,:0jy:90,X：80,y:100,:30,y:0这里是贝塞尔曲线参数,onLoad:function(options)that=this获取canvas实例ct=w.CreateCanvasContext(mycanvas)onUnload:function()if(timer!=null)ClearTimeout(timer)不断绘制图片到CaVanSrequestAnimationFrame(callback)varCurrTime=newDate(
20、).getTime();手机屏幕刷新率殷为60Hz,大概16ms刷新一次，这里为了使页面看上去更流畅自然,通过改变timedis的值可以控制动画的快慢vantimedis=16-(currTime-IastFrameTime)vartimeToCall=Math.max(0jtimedis);varid-SetTimeout(callback,timeToCall);IastFrameTime=CurrTime+timeToCall;returnid;,drawlmage:function(data,repeatcount)iffreoeatcont=0returnvarpl0=data0;/
21、三阶贝塞尔曲线起点坐标值varpll=datal;/:阶贝塞尔曲线笫个控制点坐标值vanpl2=data02;/邈见蟀蝉第Varpl3=data03;：阶贝龙木曲/C，vanp20=datal0;varp21=datall;varp22datal2;Varp23=datal3;vanp30=data20;varp31data21;varp32=data22;VartMfactor、；*计算多项式系数*/varcl=3(pll.-pl.);varbl=3(pl2.-pll.x)-cl;Varaxl=pl3.x-p10.x-CXl-bxl;varcyl=3*(pll.y-pl0.y);varbyl
22、三3(pl2.y-pll.y)-cyl;Varay2=pl3.y-pl0.y-CyI-byl;*计算xtyt坐标值*/vanxtl三al*(t*t*t)+bl*(t*t)+cxl*t+pl.x;Varytl=ayl*(t*t*t)+byl*(tt)+CyI*t+pl0.y;/*计算多项式系数*/varc2-3(p21.-p20.);varb2=3(p22.-p21.)-c2;Varax2=p23.x-p2C.x-cx2-bx2;vancy2-3(p21.y-p20.y);vanby2=3*(p22.y-p21.y)-cy2;/*计算Xtyt坐标值*/Varxt2=ax2*(t*t*t)+bx2
23、*(t*t)+cx2*t+p20.x;Var yt2 = ay2 * (tt)+by2(t-t)+cy2*t+p20.y;/*计算多项式系数*/varc3-3(p31.x-p30.x);vanb3=3(p32.-p31.)-c3;Varax3=p33.x-p30.x-cx3-bx3;varcy3-3(p31.y-p30.y);varby3=3(p32.y-p31.y)-cy3;.*计算Xtyt坐标值*/varxt3=a3*(t*t*t)+b3*(t*t)+c3*t+p30.;varyt3=ay3*(t*t*t)+by3(t*t)+cy3*t+p30.y;factor.t+=factor.spe
24、ed;ct.drawlmage(iagesheartl.png,tl,ytl,30,30)；ctx.drawlmage(imagesheart2.png,t2,yt2,30,30)；ctx.drawlmage(imagesheart3.png”,xt3,yt3,3。，30)；ctx.draw();if(factor.t1)factor.t=;ClearTimeout(timer)if(repeatcount=-1)that.StartTimer(repeatcount)else(if(countrepeatcount)that.StartTimer(repeatcount)count+else
25、that.draworiginal()count-0;elsetimer=that.requestAnimationFrame(function()that.drawlmage(that.data.img-path,repeatcount)_,OnClickImage:function(e)点击心形的时候动画效果that.setDatastyle-img:,transform:scale(l.3);!)SetTimeout(function()that.setData(style-img:transform:scale(l);,),500)factor.t=2count=that.StartT
26、imer(I)/repeatcountT就是循环，其他大于零的整数就是动画循环次数StartTimer:function(repeatcount)that.drawlmage(that.data.img-path,repeatcount),draworigina1()ct.drawlmage(imagesheartl.png,30,400,30,30);ctx.drawlmage(7imagesheart2.png,30,400,30,30);ct.drawlmage(imagesheart3.png,30,400,30,30);ct.draw();)time.wxml二丝Zl!5ietime
27、.wxsscanvasbackground:transparent;width:9px;height:400px;position:fixed;right:20p;bottom:60px;*transform下面的属性是为了让动画看上去更自然/.heartposition:fixed;right:45p;bottom:30p;width:40px;height:4px;transform:scale(l);-webkit-transform:scale(l);- webkit-transition:easeall;- moz-transition:easeall;transition:ease
28、all;- webkit-transition-duration:7ms;- moz-transition-duration:70ms;transition-duration:700ms;2.视频页面的点赞效果实现效果展示：（截图）发送祝福发送祝福（七）小程序的总体布局3.在本任务中，将邀请函页面、照片展示页面、活动地点页面、视频展示页面、宾客信息页面这五个页面关联起来。功能实现：app.jsonpages:,pagesinvitationinvitation,“pages/PhOtO/photo”,pagesmapmap,pages八ime/time”,pages/guest/guest,，
29、window:navigationBarTetStyle:white,navigationBarBackgroundColor:#ff4c91,tabBar:color:#ccc,wselectedColor,:C91，borderstyle:white,backgroundcolor:list:pagepath:pages/invitation/invitation,iconPath:images/invite.png,SelectedIconPath:images/invite.png,text:,pagePathn:pages/photo/photo,iconPath:,images/m
30、arry.png,SelectedIconPath:images/marry.png,text:照片,agePath:pages/map/map,iconPath:,imagesmap.png,SelectedIconPath:images/map.png,text:定位,IagePath:pages/time/time”,iconPath:images/video.png,SelectedIconPath:images/video.png,text:美好时光pagePath:pages/guest/guest,iconPath:images/guest.png,wSelectedIconPa
31、th:images/guest.png”,text:宾客信息J,style:,v2,SitemapLocation:sitemap.jsonapp.wxsspagedisplay:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;4.小程序的总体布局关联效果展示：（截图）飞1T遨请函建片定位湖时光帚电息六、项目总结心得体会：此次婚礼邀请函小程序的制作项目概述应当全面而详细，涵盖以下关键点: 项目背景：介绍为什么需要制作结婚邀请函小程序，可能的原因包括环保、便捷、个性化定制等。 项目目标：
32、阐明制作结婚邀请函小程序的具体目标，比如提供婚礼信息、方便婚礼管理、增强婚礼体验等。 功能需求:列出小程序需要具备的功能，比如婚礼日程安排、地图导航、婚礼照片分享等。 技术实现：讨论小程序的技术实现方案，包括前端开发、后端支持等。 设计风格：确定小程序的整体设计风格，包括色彩搭配、界面布局、交互设计等。 项目进度计划：制定小程序制作的时间节点和进度安排，确保项目按时完成。 预算和资源：评估制作小程序所需的预算和资源，包括人力、物力、财力等。 风险管理：分析可能的风险因素，比如技术难点、需求变更、人力资源不足等，制定相应的风险缓解措施。接下来我将对分别邀请函页面、照片展示页面、活动地点页面、视频
33、展示页面、宾客信息页面进行分析：首先，分析邀请函界面。结婚邀请函小程序的界面设计应当以浪漫主题为基调，融入个性化定制元素，清晰展示婚礼信息，增加互动元素，并保持界面简洁易用。其次，分析照片展示页面。婚礼照片展示区并不是越满越好，有的时候东西太多，反而显得杂乱，主题也不容易突出。其实婚礼照片展示区的布置只需要能够展示出婚礼的主题，让人看了能够会心一笑，并且增添轮番图样式的精致程度就可以了。然后，分析活动地点页面。对于婚礼的地点我选择了厦门双子塔，给予了女方一场不留遗憾的盛大婚礼场面。紧接着，分析视频展示页面。以单一视频充分展现了婚礼的美满，并增添三个功能键按钮，提高了视频的格调。最后，分析宾客信息页面。采用表单结构并增添js功能的成功弹出页面。综上所述，婚礼邀请函小程序的制作项目概述应当全面而详细，涵盖项目背景、目标、功能需求、技术实现、设计风格、进度计划、预算和资源、风险管理等方面的内容。这将有助于我们全面理解项目要求，明确工作方向，确保项目顺利进行和完成。
