高校新闻网

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

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1.项目创建。

创建新项目，选择不使用云服务，命名为News。

2.页面配置。

2.1创建页面文件：

（1）在app.json中的pages属性下添加pages/detail/detail和pages/my/my，并保存；

（2）创建images文件夹，下载并将https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip压缩包中的文件解压至images文件夹中；

（3）右击utils文件夹，添加文件命名为common.js；

(注：本实验直接将老师发的common.js公共资源文件复制过来使用即可，需要在各页面的js文件顶端引用公共js文件，引用代码为：

)

2.2删除以下文件：

（1）删除utils文件夹中的所有内容；

（2）删除 index.wxml和index.wxss全部代码；

（3）删除index.js中全部代码，输入page按下Tab自动补齐；

3.视图设计。

3.1导航栏设计

在app.json中修改如下：

得到效果图：

3.2 tabBar设计

在app.json文件中添加tabBar：

效果图为：

3.3页面设计

（1）首页页面设计包含幻灯片滚动和新闻列表两个部分

修改index.wxml文件如下：

相应的修改wxss文件如下：

在index.js文件中录入测试数据进行布局和样式效果的预览，临时数据可从common.js文件中复制获取。

（2）个人中心页设计

个人中心页包含登录面板和我的收藏两个板块：

修改my.wxml文件如下：

相应地修改my.wxss文件如下:

因新闻列表的样式和首页完全相同，故将index.wxss中新闻列表样式的相关代码直接复制到app.wxss文件中：

可以在common.js文件中找临时测试数据录入到data中，用于进行布局和样式效果的预览。

（3）新闻页设计

新闻页包括新闻标题、新闻图片、新闻正文和新闻日期。

首先修改detail.wxml文件如下：

相应地修改wxss文件如下：

同样地，可在common.js文件中找临时测试数据录入到data中，用于进行布局和样式效果的预览。

4.逻辑实现。

4.1公共逻辑

使用老师准备的common.js文件即可。

4.2首页逻辑

（1）新闻列表展示，修改index.js文件如下：

得到的效果图如下：

（2）点击跳转新闻内容

修改index.wxml文件如下：

（前面的截图为已修改后的）

对应地在index.js文件中实现goToDetail函数：

4.3新闻页逻辑

新闻页主要需要实现显示对应新闻和添加/取消新闻收藏。

（1）显示对应新闻

在首页逻辑中已经实现了页面跳转并携带了新闻ID编号，现在需要在新闻页接受ID编号，并查询对应的新闻内容，detail.js实现如下：

此时重新从首页点击新闻便可显示正确标题和对应的新闻内容了。

（2）添加/取消新闻收藏

修改detail.wxml文件，追加添加/取消收藏新闻的按钮，修改detail.wxml文件如下：

（注：前面的截图展示的为已经修改过的）

对应的wxss文件修改如下：

对应js文件中的onLoad函数修改如下：

继续在detail.js文件中追加addFavorites和cancelFavorites函数，用于点击添加/取消新闻收藏，对应detail.js文件中的函数代码实现如下：

4.4个人中心页逻辑

个人中心页主要需要实现以下功能：获取微信用户信息；获取收藏列表；游览收藏的新闻。

（1）获取微信用户信息

修改my.wxmls代码，追加button组件作为登录按钮，实现如下：

在js文件中实现getUserInfo函数如下：

此时登录完成，效果图如下：

（2）获取收藏列表

修改my.wxml代码，改为动态数据效果：

继续在my.js文件中追加getMyFavorites函数，用于展示真正的新闻收藏列表，对应my.js文件修改如下：

修改getUserInfo函数，为其追加getMyFavorites函数的调用:

判断用户若是登录状态就刷新一下收藏列表，在my.js中修改如下：

（3）游览收藏的新闻

修改my.wxml文件如下：

对应在my.js文件中实现goToDetail函数如下：

4.5清除临时数据

清除一开始为了测试样式录入的临时数据，以防影响整体逻辑效果：

（1）清除index.js文件中data的临时新闻列表数据newsList；

（2）清除detail.js文件中data的临时新闻数据article；

（3）清除my.js文件中data的临时收藏夹新闻数据newsList、临时昵称nickName以及临时头像路径地址src；

（4）my.js文件中添加如下代码，用于清空记录：

三、程序运行结果

列出程序的最终运行结果及截图。

点击新闻列表的第一条得到：

登录初始页面：

点击登录并收藏前两个新闻：

点开收藏夹的第二条新闻，点击“已收藏”按钮变为“点击收藏”，即可取消收藏：

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

​ 本次实验学习并创建了完整的前端新闻小程序项目，能够熟练掌握真机预览、调试等操作，同时我对微信开发者工具的使用有了进一步的学习和认识。本次实验在最后实现我的收藏时遇到了问题，发现登录后会自动显示一条已被收藏了的新闻，在和同学一起讨论并在CSDN上查询找到了解决方法，通过在onLoad中调用wx.clearStorage()清除来解决。
源码：https://github.com/learningyjz/Lab5