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的分页，还使用了轮播图组件，同时使用了缓存等一些新的功能实现多用户的收藏状态的存储。同时使用了模拟的新闻获取接口，如果要真正接入只需要使用一个真实的获取新闻接口即可。这次项目对应能力和个人项目的编写有很大的帮助，我对小程序的兴趣提升了。