邀请函小程序.docx

厦门华厦学院婚礼邀请函小程序制作学期：2023-2024学年第一学期课程名称：移动开发技术姓名：杨金涛、陈敬川学号：21107514K211075120所属学院：_商务与管理学院专业（班级）：2021级电子商务（1）班任课教师：林国凤提交日期：2023年12月24日一、项目概述本课程设计为婚礼邀请函小程序的制作，在小程序开发中，经常会遇到各种特殊需求，如视频播放、地图定位、发送消息等，小程序为这些需求提供了API和组件，掌握了这些APl和组件的使用，即可完成对应功能的开发。二、实验环境操作系统：WindOWS或MaCOS均可，但具体版本可能会有要求，需根据微信开发者工具的兼容性来选择。微信开发者工具：这是微信小程序开发的核心工具，提供了代码编辑、预览、调试、上传等一系列功能。可以从微信公众平台官网下载并安装。三、宾客分工小组成员：杨金涛、陈敬川成员分工：（1）杨金涛负责整个项目的规划与总结（邀请函页面、照片展示页面、视频展示页面与点赞效果的实现、材料的收集与整理）（2）陈敬川负责活动地点页面和宾客信息页面，并提供PS高级技术的支持四、制作内容（此部分内容可根据自己的项目修改）婚礼邀请函小程序由5个页面组成，包括邀请函页面、照片展示页面、活动地点页面、视频展示页面、宾客信息页面等等，要求小程序中包含：音乐播放、图片轮播图、地图APl及基础组件与框架的运用。例如：（1）邀请函页面：展示举办活动的内容、联系人电话、活动地点、活动时间等信息。（2）照片页面：展示举办活动相关的照片轮播图、背景音乐等等。（3）地图页面：调用地图服务APL通过导航查看活动地点的路线图。（4）视频页面：展示举办活动相关的视频等。（5）宾客信息页面：表单的设计、参加活动的宾客填写个人信息，写一些祝福语等。五、功能分析与实现（此部分内容可根据自己的项目修改）（一）邀请函首页1.邀请函页面的任务需求如下:(1)背景音乐播放：页面的右上角有一个背景音乐播放按钮，用于控制音乐播放状态，单击按钮播放音乐，再次单击按钮暂停音乐。功能实现：inVitationJsconstback=w×.getBackgroundAudioManager();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)联系人信息：页面中展示联系人的姓名、电话等信息。功能实现：invitation.wxml<-婚礼信息一><viewclass="content-address,><view>我们诚邀您来参加我们的婚礼view>CVieW>联系人：杨锦涛电话：13388889999<view><view>时间：2026年6月6号18:36<view><view>地点：度门市思明区鹿港街道大学路177号双子塔6楼<view><view>invitation.json"usingcomponents":,navigationBarTitIeText":"邀请函”(3)活动信息：页面展示活动举办的时间及地点。功能实现：invitation.wxml<!-婚礼信息<viewclass="content-address"><view>我们诚逖您来参加我们的婚礼<view><view>联系人：杨锦涛电话：13388889999<view><view>时间：2026年6JJ6'；18:36</view><view>地点：厦门市思明区厦港街道大学路177号双子塔6楼<view><view>invitation.Wxssbgwidth: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;te×t-align:center;margin-bottom:10vh;1_.content-avatarimagewidth:26vh;height:26vh;border:3p×solidffff4c91;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-name>imagewidth:2.5vh;height:2.5vh;border:lp×solidffff4c91;border-radius:50%;position:absolute;top:-Ivh;right:-3.5vh;/新郎新娘中间的图片样式/.content-weddingflex:1;width:9vh;height:9vh;.content-wedding>image(width:20vh;height:13vh;margin-left:0vh;*婚礼信息区域样式*/.content-addressmargin-top:6vh;color:#ff4c91;font-size:3vh;font-weight:bold;text-align:center;line-height:5vh;.content-addressview:first-childfont-size:3vh;padding-bottom:3vh;2.邀请函首页的效果展示：（截图）(二)照片页面1.在本任务中，将会完成照片页面的开发，该页面采用纵向轮播的方式展示图片，可以通过单击指示面板的圆点切换到相对应的图片。功能需求如下：(1)每一张轮播的图片都占满显示区域，滑动屏幕可以实现图片的纵向切换。(2)在右侧纵向显示指点面板，单击圆点可切换显示状态。(3)在用户无操作时，可以实现自动无缝轮播。功能实现：photo.json"usingcomponents":,"navigatIonBarTitIeText":"照片"photo,wxml<!-pagesphotophoto.<xml-><!-照片轮播图（添加音乐播放）-><swiperindicator-color="white"indicator-active-color="#ff4c91"indicator-dots三,'true"autoplay="true"interval="3000"duration="1000"vertical="true"circular=",true"><swiper-item><imagesrc=,imagesl.jpg"><swiper-item><swiper-item><imagesrc="images2.jpg"><swiper-item><swiper-item><imagesrc="images3.jpg"><swiper-item><swiper-item><imagesrc="images4.jpg"><swiper-item><swiper-item><imagesrc="images5.jpg"><swiper-item><swiper-item><imagesrc="images6.jpg"><swiper-item><swiper>photo.WXSS*pages/photo/photo.w×ss/设置轮番图高度和图片大小*/SWiPerheight:100vh;image(width:100vh;height:100vh;)2.照片页面的效果展示：（截图）（三）地图页面1.在本任务中,将会完成活动地点页面的开发，该页面会显示活动地点的地图,单击导航图标可以定位位置，查看路线。功能需求如下：（1）拾取到活动举办地点的经纬度坐标。(2)利用m叩组件显示地图，并在活动地点放置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.data.longitude,name:,¾'J双，塔',address:'W茂海峡大应'),map.json"usingcomponents":,'navigationBarTitIeText":"定位"map.wxml<maplongitude=',longitude"latitude="latitude"markers="markers"bindmarkertap=nmarkertap"/,<viewclass="info"><te×tCIaSSW"title”活动主题：我们结婚了<text><textClaSS="loc">活动地点：度门双子塔<text><te×tCIaSS="time”>活动时间：2026年6月6日text><view>