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的制作和页面跳转的逻辑设计,通过跳转中参数可以决定跳转后页面的内容。同时运用缓存可以实现在不同页面之间传递信息。通过自定义编译条件可以编译预览跳转后的页面,方便了设计。