移动软件开发实验5新闻

2024年夏季《移动软件开发》实验报告

姓名和学号？	未知
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验5：新闻小程序
博客地址？	blog.csdn.net/astroiszz
Github仓库地址？	gitee.com/astrome

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目。

2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1.项目资源准备

创建文件夹，并添加需要的图标资源和公共js文件到相应文件夹。

对导航栏的样式进行设计。

2.tabBar设计

在app.json中添加detail和my页面，分别显示新闻详情和个人信息。

添加tabBar并进行设计。

可通过tabBar转到相应界面。

3.首页设计

首页包含两个区域，一个图片轮播和新闻列表。

swiper是轮播组件，其后的参数代表是否自动轮播和轮播动画速度等相关参数设置。

样式设计如下。

效果：

4.个人页设计

个人页包含个人基本信息和收藏列表两个部分。

先在my.js中添加如下数据便于预览显示效果。

5.详情页设计

首先添加编译模式，以便与预览详情页的显示效果。

详情页依次展示文章的标题、封面图、正文和发布日期。

6.跳转逻辑设计

首先设计小程序首页加载是对新闻列表的初始化。

然后设计点击新闻列表中条目进行对应跳转的逻辑函数。先在组件中绑定点击事件。

编写对应逻辑函数。

然后在detail.js中编写对应逻辑函数，接受跳转携带的参数并加载对应内容。

事先将收藏按钮添加到详情页，以便收藏逻辑实现进行对应设计。

展示完整详情页：

7.收藏逻辑设计

修改detail.js的onLoad函数，获取文章的收藏情况。

为收藏按钮实现收藏和取消收藏的功能。

通过将收藏的文章信息加入缓存中保存收藏列表。通过console的storage可以观察逻辑函数的执行结果。

逻辑函数正常运行。

接下来设计个人页面的登录功能，登录时将获取收藏列表。

设计逻辑函数获取个人信息。

登录效果：

然后对收藏列表的逻辑进行实现，使其能够读取缓存以获取实时的列表数据。

先对组件显示数据做修改，再添加存储对应实时数据的字段。

编写逻辑函数获取缓存数据并更新到收藏列表字段。

在页面显示时调用该函数。

在登录时也进行调用。

删除用于预览的字段数据后小程序可以正常运行。

三、程序运行结果

四、问题总结与体会

本次实验通过制作一个新闻小程序，熟悉了tabBar的制作和页面跳转的逻辑设计，通过跳转中参数可以决定跳转后页面的内容。同时运用缓存可以实现在不同页面之间传递信息。通过自定义编译条件可以编译预览跳转后的页面，方便了设计。