ouc移动软件开发实验五

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，编写小程序逻辑，实现了新闻数据的动态加载和页面状态的管理。

问题解决能力： 在实验中遇到了图片不显示、数据绑定错误等问题，通过查看文档和网上搜索，我逐一解决了这些问题。

调试技巧： 学会了使用微信开发者工具进行调试，查看控制台输出，跟踪代码执行流程，从而快速定位问题。

界面设计： 通过多次调整，了解了如何设计符合用户体验的界面，包括颜色搭配、布局合理性等。
用户交互： 重视用户交互的细节，如响应用户操作、提供反馈、动效使用等，提升用户体验。
实际应用场景理解：

综上所述，通过本次实验，我不仅提高了自己的技术能力，更加深了对微信小程序开发流程和注意事项的理解。此外，我也体会到了创造一个实用、高效、用户友好的应用程序所带来的成就感。这次实验是一段宝贵的学习和成长经历，它让我对未来的软件开发有了更清晰的规划和期待。