2023年夏季《移动软件开发》实验报告
姓名和学号? | |
---|---|
本实验属于哪门课程? | 中国海洋大学23夏《移动软件开发》 |
实验名称? | 实验5:高校新闻网 |
博客地址? | |
Github仓库地址? |
(备注:将实验报告发布在博客、代码公开至 github 是 加分项,不是必须做的)
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目;能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
新建项目
还是先从经典的模板项目开始修改,这一次需要有三个页面,分别是:index首页
,detail新闻页
和my个人信息页
页面设计
导航栏设计,这里我们使用蓝底白字
然后我们需要用到导航栏,所以要在app.json中来配置一下:主要是配置了两个tabBar,分别是首页和我的,然后添加了跳转的路由和选中的图标。
接下来开始进行真正的首页的设计,首页需要有一个幻灯片的轮播图,所以需要用到seawer组件
然后再使用wx:for循环读取数据进行遍历:
接下来就是调样式的环节,过程不在赘述。可以看到,样式设置好之后,图片资源还是没有正常显示,这说明原来的图片资源挂了,需要我们重新选择一些。调好样式之后的成品演示:
接下来设计个人中心,主要有两个部分:登陆面板和我的收藏,用view组件进行布局;主要是登录面板的设计和样式的写,具体怎么写,还是参考教程;然后新闻收藏页的样式直接从首页新闻列表复制过来就可以复用了。
接下来进行新闻详情页设计,
wxml编写相对简单,使用标题+图片+正文的结构
wxss编写比较复杂,需要调比较多的样式,节选如下:
最后导入数据后效果如下
至此,页面设计已经基本完成,接下来进行逻辑的设计。
逻辑设计
新闻的更新需要有新闻源,但是由于课程局限性,这里我使用老师提供的common.js函数和虚拟数据。
接下来进行首页的逻辑设计:先在监听函数里添加获取新闻列表的函数,每一次onload时候都会刷新列表
然后再给新闻标题添加跳转函数,注意:该函数需要添加到detail.js中
其次,goToDetail函数是加在index.js文件中,不是ppt里说的detail.js
最后添加一个获取新闻详情的函数就可以实现页面的跳转了
接下来添加新闻收藏功能:首先显示增加和移除收藏的函数,使用文章id来索引
然后使用wx:if来判断此时文章的状态,调用函数
最后的效果:
收藏之后,数据会存入缓存。
接下来进行登录页的设计,因为21年之后getUserInfo函数就不好使了,所以换了一个新的函数getUserProfile
使用效果:
然后再添加一个登录按钮:
最终效果如下:
最后一步,添加获取收藏列表功能和收藏页跳转功能。
三、程序运行结果
首页
未登录后台
登录界面
后台收藏
新闻详情页和收藏功能
四、问题总结与体会
这次的实验综合性相对于上一个拼图实验又有很大的提升,特别是使用tabBar的分页,还使用了轮播图组件,同时使用了缓存等一些新的功能实现多用户的收藏状态的存储。同时使用了模拟的新闻获取接口,如果要真正接入只需要使用一个真实的获取新闻接口即可。这次项目对应能力和个人项目的编写有很大的帮助,我对小程序的兴趣提升了。