实验5：高校新闻网

catting123 / 2023-09-05 / 原文

一、实验目标

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

二、实验步骤

根据实验手册上的网址下载common.js、图片文件、以及index页面的代码。创建项目的步骤和之前的实验相同。
此次的项目一共需要3个页面，包括：
- 首页——index
- 新闻页——detail
- 个人中心页——my
其中，首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。

首先在app.json文件pages属性中删除pages/logs/logs，然后添加pages/detail/detail和pages/my/my，保存后在pages文件夹下自动生成了detail和my目录。

然后将下载文件中的images和utils两个文件夹放到总目录下，images文件夹中存放了图标，utils文件夹存放了common.js文件。

全部完成后的目录如下图所示：
导航栏设计。在app.json中对windows属性进行配置来自定义导航栏效果。
tabBar设计。在app.json中添加tabBar属性并对其进行配置。
首页包括两个部分：
- 幻灯片滚动——<swiper>组件
- 新闻列表——<view>容器，内部使用数组循环
在pages/index/index.wxml中编写代码，使用wx:for循环显示幻灯片内容和新闻列表数据。

在pages/index/index.wxss中编写样式表，展示幻灯片和新闻列表。

由于后续在个人中心页也会用到新闻列表，所以将这部分样式写在公共样式表app.wxss中。
个人中心页包括两个部分：
- 登录面板——<view>容器
- 我的收藏——<view>容器，内部使用数组循环
在pages/my/my.wxml中编写代码，使用wx:for循环显示我的收藏中的新闻列表数据。

在pages/my/my.wxss中编写样式表，展示幻灯片和新闻列表。
新闻页使用view组件进行整体布局，包括：
- container：整体容器
- title：新闻标题区域
- poster：新闻图片区域
- content：新闻正文区域
- add_date：新闻日期区域
在pages/detail/detail.wxml中编写代码：

在pages/detail/detail.wxss中编写样式表：
公共逻辑使用utils中的common.js文件，有两个自定义函数：
- getNewsList——获取新闻列表
- getNewsDetail——获取新闻内容
在common.js中有module.exports语句用于对外暴露调用公共函数的接口。
首页需要实现两个功能：
- 新闻列表展示——自定义onLoad函数
- 点击跳转新闻内容——自定义goToDetail函数
在pages/index/index.js中实现以上两个函数，并在pages/index/index.wxml中添加相应的点击事件。需要在文件开头声明var common = require('../../utils/common.js')才能使用common.js中的getNewsList函数。
新闻页需要实现两个功能：

根据新闻的id编号显示对应新闻——自定义onLoad函数
添加/取消新闻收藏——自定义addFavorites和cancelFavorites函数

在pages/detail/detail.js中实现以上3个函数，并在pages/detail/detail.wxml中添加<button>组件实现收藏功能。需要在文件开头声明var common = require('../../utils/common.js')才能使用common.js中的getNewsDetail函数。

个人中心页需要实现3个功能：
- 获取微信用户信息——自定义getUserProfile函数
- 获取收藏列表——自定义getMyFavorites函数和onShow函数
- 浏览收藏的新闻——自定义goToDetail函数
在pages/my/my.js中实现以上4个函数，并在pages/my/my.wxml中添加相应的点击事件。
最后需要清除临时数据：
- 首页index.js：data中的临时新闻列表数据newsList
- 新闻页detail.js：data中的临时新闻数据article
- 个人中心页my.js：data中临时收藏夹新闻数据newsList、临时昵称数据nickName以及临时头像路径地址src。
清除缓存后重新编译运行即可。