邀请函小程序.docx

上传人:p** 文档编号:713119 上传时间:2024-01-20 格式:DOCX 页数:24 大小:323.60KB
下载 相关 举报
邀请函小程序.docx_第1页
第1页 / 共24页
邀请函小程序.docx_第2页
第2页 / 共24页
邀请函小程序.docx_第3页
第3页 / 共24页
邀请函小程序.docx_第4页
第4页 / 共24页
邀请函小程序.docx_第5页
第5页 / 共24页
邀请函小程序.docx_第6页
第6页 / 共24页
邀请函小程序.docx_第7页
第7页 / 共24页
邀请函小程序.docx_第8页
第8页 / 共24页
邀请函小程序.docx_第9页
第9页 / 共24页
邀请函小程序.docx_第10页
第10页 / 共24页
亲,该文档总共24页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

《邀请函小程序.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.data.longitude,name:,J双,塔,address:W茂海峡大应),map.jsonusingcomponents:,navigationBarTitIeText:定位map.wxmlmaplongitude=,longitudelatitude=latitudemarkers=markersbindmarkertap=nmarkertap/,tetCIaSSWtitle”活动主题:我们结婚了活动地点:度门双子塔活动时间:2026年6月6日text

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > 数据结构与算法

copyright@ 2008-2023 1wenmi网站版权所有

经营许可证编号:宁ICP备2022001189号-1

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知第壹文秘网,我们立即给予删除!