2024年夏季《移动软件开发》实验报告
一、实验目标
1、掌握视频API的操作方法;
2、掌握如何发送随机颜色的弹幕。
二、实验步骤
关键步骤:
1、创建首页、新闻页和个人中心页的功能需求。
2、创建项目并配置页面文件。
3、设计导航栏和tabBar。
4、设计页面样式和布局。
5、实现公共逻辑,如幻灯片播放效果和新闻列表。
6、实现首页逻辑,包括幻灯片自动播放和点击新闻列表打开全文。
7、实现新闻页逻辑,包括显示新闻标题、图片、正文和日期,以及收藏和取消收藏功能。
8、实现个人中心页逻辑,包括登录状态下显示收藏夹和未登录状态下显示为空。
9、清除临时数据。
部分代码分析:
1、首页页面(index.wxml)的代码,主要包含两个部分:幻灯片滚动和新闻列表。
幻灯片滚动:使用swiper组件实现幻灯片效果,设置indicator-dots="true"显示指示点,autoplay="true"自动播放,interval="5000"每5秒切换一次,duration="500"切换动画时长为500毫秒。通过wx:for循环遍历swiperImg数组,将图片地址绑定到image组件的src属性上。
新闻列表:使用view组件创建一个新闻列表容器,设置id=‘news-list’。在列表容器内,使用wx:for循环遍历newsList数组,将每条新闻的标题、添加日期等信息绑定到text组件上,并使用bindtap事件绑定goToDetail方法,点击时跳转到新闻详情页面。同时,将新闻的id通过data-id属性传递给详情页面。
2、我的页面(my.wxml)的代码,主要包含两个部分:登录面板和我的收藏。
登录面板:使用view组件创建一个登录面板容器,设置id=‘myLogin’。通过wx:if判断用户是否已登录,如果已登录,则显示用户的头像和昵称;否则,显示一个按钮,点击后调用getUserProfile方法获取用户信息并实现登录功能。
我的收藏:使用view组件创建一个收藏列表容器,设置id=‘myFavorties’。在容器内,首先显示收藏数量,然后遍历newsList数组,将每条新闻的标题、添加日期等信息绑定到text组件上,并使用bindtap事件绑定goToDetail方法,点击时跳转到新闻详情页面。同时,将新闻的id通过data-id属性传递给详情页面。
三、程序运行结果
列出程序的最终运行结果及截图。
四、问题总结与体会
在本次微信小程序开发高校新闻网的实验中,我深刻体验到了微信小程序的开发流程和其独特的开发环境。通过实际操作,我学习到了许多编程知识和技能,同时也认识到了实际开发中的各种挑战和乐趣。
小程序框架理解: 学习小程序的框架和生命周期,理解了如何在不同页面间传递数据,以及如何使用应用的逻辑层和视图层。
前端技术开发: 实验中主要涉及到WXML和WXSS,对CSS和HTML进行了扩展以适应微信小程序特有的样式和布局。
JavaScript应用: 深入应用JavaScript,编写小程序逻辑,实现了新闻数据的动态加载和页面状态的管理。
问题解决能力: 在实验中遇到了图片不显示、数据绑定错误等问题,通过查看文档和网上搜索,我逐一解决了这些问题。
调试技巧: 学会了使用微信开发者工具进行调试,查看控制台输出,跟踪代码执行流程,从而快速定位问题。
界面设计: 通过多次调整,了解了如何设计符合用户体验的界面,包括颜色搭配、布局合理性等。
用户交互: 重视用户交互的细节,如响应用户操作、提供反馈、动效使用等,提升用户体验。
实际应用场景理解:
综上所述,通过本次实验,我不仅提高了自己的技术能力,更加深了对微信小程序开发流程和注意事项的理解。此外,我也体会到了创造一个实用、高效、用户友好的应用程序所带来的成就感。这次实验是一段宝贵的学习和成长经历,它让我对未来的软件开发有了更清晰的规划和期待。