2021级中国海洋大学移动软件开发项目5实验报告

【2021级中国海洋大学移动软件开发项目5实验报告】 本次实验是针对2021级中国海洋大学《移动软件开发》课程的一部分，旨在让学生综合运用所学知识，构建一个前端新闻小程序项目。实验的目标是让学生在实际操作中熟练掌握真机预览和调试技能，以创建一个完整的小程序应用。 实验主要分为以下几个关键步骤： 1. **设计app.json**：这是小程序的基础配置文件，用于定义全局样式和导航栏效果。在实验中，学生需要设置`navigationBarBackgroundColor`为蓝色(#328EEB)，`navigationBarTitleText`为“我的新闻网”，并设定导航栏文字颜色为白色。此外，还配置了`tabBar`，包含了首页和个人中心两个页面的切换，每个页面都有选中和未选中的图标以及对应的文本。 2. **实现轮播图组件**：在`index.wxml`中，通过`<swiper>`组件实现幻灯片效果，设置滑动指示点(`indicator-dots`)，自动播放(`autoplay`)，以及每张图片停留时间(`interval`)和过渡时长(`duration`)。`<block>`和`<swiper-item>`用于循环显示新闻图片，`wx:for`指令遍历`swiperImg`数组，`wx:key`确保每个滑块项的唯一性。 3. **构建新闻列表**：在幻灯片下方，使用`<view>`和`<text>`元素构建新闻列表。`wx:for`指令遍历`newsList`数据，为每条新闻显示图片和标题，同时附加添加日期。`bindtap`事件处理函数`goToDetail`用于点击新闻标题跳转到详情页，通过`data-id`传递新闻ID。 4. **数据处理函数**：实验中包含了两个JavaScript函数。`getNewsList()`用于从原始的`news`数组中提取必要信息，创建一个新的列表对象，方便在WXML中渲染。`getNewsDetail(newsID)`则用于根据传入的新闻ID查找具体新闻详情，返回一个包含状态码和新闻对象的消息。 5. **模块导出**：将这些功能函数`module.exports`导出，这样在其他页面或组件中可以调用这些功能，实现不同页面间的交互。 这个实验不仅锻炼了学生的前端开发能力，也强调了软件工程中模块化和数据处理的重要性。通过实际操作，学生能够更好地理解和应用小程序开发的流程和技术，提升软件开发的实践能力。在实验报告中，鼓励学生将实验成果发布到个人博客，并将代码上传到GitHub，这不仅能促进知识分享，也有助于提高项目的可见性和个人的技能展示。