2022夏中国海洋大学《移动软件开发》实验四

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

​

姓名：**** 学号：************

​

姓名和学号？	*****，***********
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验4：高校新闻网
博客地址？
Github仓库地址？	qumple/- (github.com)

一、实验目标

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

二、实验步骤

1.项目创建

本项目一共需要3个页面，即首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。

1.1首页功能需求

首页功能需求如下:(1）首页需要包含幻灯片播放效果和新闻列表;(2）幻灯片至少要有3幅图片自动播放;(3)点击新闻列表可以打开新闻全文。

1.2新闻页功能需求

新闻页功能需求如下:(1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期;(2）允许点击按钮将当前阅读的新闻添加到本地收藏夹中;(3）已经收藏过的新闻也可以点击按钮取消收藏。

1.3个人中心页功能需求

个人中心页功能需求如下:(1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。(2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。(3）收藏夹中的新闻可以直接点击查看内容。(4）未登录状态下收藏夹显示为空。

2.页面配置

2.1创建页面文件

具体操作如下：

(1)将app.json文件 pages属性中的 pages/logs/logs删除﹔ (2)在app.json文件 pages 属性中继续追加pages/detail/ detail 和 pages/ my/ my;

2.2删除和修改文件

具体操作如下：

(1）删除utils文件夹中的所有内容﹔ (2）删除 pages文件夹下的logs目录及其内部所有内容﹔

(3）删除index. wxml 和 index.wxss中的全部代码﹔ (4）删除index.js 中的全部代码,并且输入关键词“page”找到第二个选项按回车让其自动补全函数 (5）删除app. wxss 中的全部代码; (6）删除app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车让其自动补全函数。

2.3创建其他文件

创建Images文件夹，存放图片素材；创建utils文件夹存放公共JS文件。

3.视图设计

3.1导航栏设计

在app.json中自定义导航栏标题和背景颜色。

3.2tabBar设计

在app.json中追加相关属性代码。

3.3页面设计

3.3.1首页设计

首页主要包含两部分内容,即幻灯片滚动和新闻列表 计划使用如下组件。 ·幻灯片:<swiper >组件; ·新闻列表:<view >容器,内部使用数组循环。

接着为组件添加wx: for 属性循环显示幻灯片内容和新闻列表数据。

为了进行布局和样式效果的预览,还需要在JS文件的data中临时录人几个测试数据。

此时可以显示幻灯片播放和一条临时新闻。由于尚未获得新闻数据,所以暂时无法显示完整的新闻列表,仅供作为样式参考。

3.3.2个人中心页设计

个人中心页主要包含两个版块,即登录面板和“我的收藏”。登录面板用于显示用户的微信头像和昵称,“我的收藏”用于显示收藏在本地的新闻列表。

计划使用<view >组件进行整体布局，接着为这两个区域添加内容。

由于新闻列表的样式与首页完全相同,没有必要重复样式代码,否则会造成冗余,可以将index. wxss中新闻列表样式的相关代码挪到app. wxss中公共使用。

此时可以显示完整的样式效果。由于尚未获得微信用户数据和收藏在本地的缓存数据,所以暂时无法显示实际内容,仅供作为样式参考。

3.3.3新闻页设计

新闻页是用于给用户浏览新闻全文的,需要用户点击首页的新闻列表,然后在新窗口中打开该页面。新闻页包括新闻标题﹑新闻图片﹑新闻正文和新闻日期。 由于暂时没有做点击跳转的逻辑设计,所以可以在微信web开发者工具―视频讲解顶端工具栏中找到“普通编译”下拉选项,选择“添加编译模式”,然后追加对于detail页面的直接浏览效果，此时预览就可以直接显示detail 页面了,设计完毕后再切换回“普通编译”模式显示首页( index)即可。

由图可见,此时可以显示完整的样式效果。由于尚未获得新闻数据,所以暂时无法根据用户点击的新闻标题入口显示对应的新闻内容,仅供作为样式参考。

4.逻辑实现

4.1公共逻辑

假设已经获取到了数据,将其放在公共JS文件(utils/common.js)中，接下来在common.js中添加自定义函数getNewsList和 getNewsDetail,分别用于获取新闻列表信息和指定ID的新闻正文内容。最后需要在common.js中使用module. exports语句暴露函数出口。现在就完成了公共逻辑处理的部分。然后需要在各页面的JS文件顶端引用公共JS文件。

4.2首页逻辑

首页主要有两个功能需要实现，一是展示新闻列表,二是点击新闻标题可以跳转对应的内容页面进行浏览。新闻列表展示使用了{{ newsList}},因此需要在页面JS文件的 onLoad函数中获取新闻列表,并更新到data属性的newsList参数中。若希望用户点击新闻标题即可实现跳转,需要首先为新闻列表项目添加点击事件。具体修改为第5行加粗字体部分,为<text >组件添加了自定义触摸事件函数 goToDetail,并且使用data-id属性携带了新闻ID编号。 然后在对应的detail.js文件中添加goToDetail 函数的内容。此时已经可以点击跳转到detail页面,并且成功携带了新闻ID数据,但是仍需在detail页面进行携带数据的接收处理才可显示正确的新闻内容。

4.3新闻页逻辑

新闻页主要有两个功能需要实现,一是显示对应新闻,二是可以添加/取消新闻收藏。在首页逻辑中已经实现了页面跳转并携带了新闻ID编号,现在需要在新闻页接收ID编号,并查询对应的新闻内容。此时重新从首页点击新闻跳转就可以发现已经能够正确显示标题对应的新闻内容了。修改detail. wxml代码,追加两个<button >组件作为添加/取消收藏新闻的按钮,并使用wx : if 和wx :else属性使其每次只存在一个。继续在detail.js文件中追加addFavorites 和 cancelFavorites 函数,用于点击添加/取消新闻收藏。现在从首页开始预览,选择其中任意一篇新闻进入detail 页面,并尝试点击按钮收藏和取消收藏。

4.4个人中心页逻辑

个人中心页主要有3个功能需要实现，一是获取微信用户信息﹔二是获取收藏列表;三是浏览收藏的新闻。 修改my. wxml 代码,追加<button >组件作为登录按钮,并且使用wx : if 和wx:clse属性让未登录时只显示按钮﹐登 在my.wxml页面修改<button >组件的代码,为其追加获取用户信息事件。其中 open-1ype= 'getUserInfo'表示激活获取微信用户信息功能,然后使用bindgetuserinfo属性表示获得的数据将传递给自定义函数 getMyInfo,开发者也可以使用其他名称。

在my.js 文件的 Page()内部追加getMyInfo函数，保存后预览项目,单击按钮后如果Console控制台能够成功输出用户信息数据,则说明获取成功。修改my.js文件中 getMyInfo函数的代码,将信息更新到动态数据上,此时就已完成登录功能。

修改my. wxml 代码,将“我的收藏”后面的数字更改为动态数据效果。继续在detail.js文件中追加 getMyFavorites函数﹐用于展示真正的新闻收藏列表。 修改my.js中的getMyInfo函数,为其追加关于getMyFavorites函数的调用。

现在从首页开始预览,选择其中任意两篇新闻进入detail 页面,并尝试点击收藏。然后退出切换到个人中心页,登录后查看收藏效果。考虑到登录成功后用户还可以手动更改新闻的收藏状态,因此修改my.js 中的 onShow 函数,判断如果是登录状态就刷新一下收藏列表。

点击浏览已经收藏的新闻和首页的点击跳转新闻内容功能类似,首先修改my.wxml 收藏列表的代码，具体修改为第5行加粗字体部分,为<text >组件添加了自定义触摸事件函数go'ToDetail ,并且使用data-id 属性携带了新闻ID编号。

4.5清楚临时数据

最后需要清除或注释掉一开始为了测试样式录入的临时数据,以免影响整体逻辑效果。 需要清除的数据如下。 ·首页(index.js): data中的临时新闻列表数据(newsList) ; ·新闻页(detail.js) : data中的临时新闻数据( article); ·个人中心页(my. js ): data中的临时收藏夹新闻数据( newsList)、临时昵称( nickName)以及临时头像路径地址(src)。 此时带有模拟新闻数据的小程序前端项目“高校新闻网”就全部完成,后续章节将为其追加后端服务器和数据库的相关内容。

三、程序运行结果

 

四、问题总结与体会

在学习了小程序的基础知识和各类API以后，通过本次实验尝试独立动手创建一个小程序前端综合设计，通过模仿网易新闻实现了一个基于模拟数据的简易高校新闻小程序。通过本次实验充分巩固了之前实验中积累下来的知识，为个人项目的完成打下坚实基础