实验5：高校新闻网

一、实验目标

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

二、实验步骤

1. 根据实验手册上的网址下载common.js、图片文件、以及index页面的代码。创建项目的步骤和之前的实验相同。

   

2. 此次的项目一共需要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文件。

   全部完成后的目录如下图所示：

   

3. 导航栏设计。在app.json中对windows属性进行配置来自定义导航栏效果。

   

4. tabBar设计。在app.json中添加tabBar属性并对其进行配置。

   

5. 首页包括两个部分：

   • 幻灯片滚动——<swiper>组件
   • 新闻列表——<view>容器，内部使用数组循环

   在pages/index/index.wxml中编写代码，使用wx:for循环显示幻灯片内容和新闻列表数据。

   

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

   

   由于后续在个人中心页也会用到新闻列表，所以将这部分样式写在公共样式表app.wxss中。

   

6. 个人中心页包括两个部分：

   • 登录面板——<view>容器
   • 我的收藏——<view>容器，内部使用数组循环

   在pages/my/my.wxml中编写代码，使用wx:for循环显示我的收藏中的新闻列表数据。

   

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

   

7. 新闻页使用view组件进行整体布局，包括：

   • container：整体容器
   • title：新闻标题区域
   • poster：新闻图片区域
   • content：新闻正文区域
   • add_date：新闻日期区域

   在pages/detail/detail.wxml中编写代码：

   

   在pages/detail/detail.wxss中编写样式表：

   

8. 公共逻辑使用utils中的common.js文件，有两个自定义函数：

   • getNewsList——获取新闻列表
   • getNewsDetail——获取新闻内容

   在common.js中有module.exports语句用于对外暴露调用公共函数的接口。

   

9. 首页需要实现两个功能：

   • 新闻列表展示——自定义onLoad函数
   • 点击跳转新闻内容——自定义goToDetail函数

   在pages/index/index.js中实现以上两个函数，并在pages/index/index.wxml中添加相应的点击事件。需要在文件开头声明var common = require('../../utils/common.js')才能使用common.js中的getNewsList函数。

   

10. 新闻页需要实现两个功能：

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

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

11. 个人中心页需要实现3个功能：

    • 获取微信用户信息——自定义getUserProfile函数
    • 获取收藏列表——自定义getMyFavorites函数和onShow函数
    • 浏览收藏的新闻——自定义goToDetail函数

    在pages/my/my.js中实现以上4个函数，并在pages/my/my.wxml中添加相应的点击事件。

    

12. 最后需要清除临时数据：

    • 首页index.js：data中的临时新闻列表数据newsList
    • 新闻页detail.js：data中的临时新闻数据article
    • 个人中心页my.js：data中临时收藏夹新闻数据newsList、临时昵称数据nickName以及临时头像路径地址src。

    清除缓存后重新编译运行即可。

三、程序运行结果

首页：

未登录时的用户信息页：

点击登录按钮：

登录后：

四、问题总结与体会

1. 使用文档中用户登录的函数需要改写成更新后的getUserProfile，否则只能获取灰色头像和微信用户名称。
2. 通过这次实验，熟悉了公共函数、本地缓存的用法，在今后的开发中非常有用。