高校新闻网

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；

2、能够在开发过程中熟练掌握真机预览、调试等操作；

3、形成包含首页、新闻页、个人中心的高校新闻网小程序。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1. 创建一个新的项目，并手动修改页面配置文件，步骤同实验一相似。然后进行项目文件配置，本项目需要创建3个页面文件，包括index（首页页面），detail（新闻页面）和my（个人中心页面）。除此之外，本项目还需创建两个文件夹：images用于存放图片素材（主要是导航图标），utils用于存放公共js文件。配置好的项目结构如下图所示。

2. 导航栏设计。我们通过navigationBarTitleText设置导航栏标题，设置为：我的新闻网，使用navigationBarBackgroundColor改变导航栏背景颜色，改变成蓝色。字体颜色设置为白色。设计好的导航栏如下图所示。

3. tabBar设计。具体代码如图一所示。color设置未选中的颜色，selectedColor设置选中之后的颜色，list中包含的就是两个个导航按钮对应的页面。里面存放了页面地址，页面名称，页面的两个图标等等。设置好的导航栏如图二三所示。分别展示了选中两个按钮时发生的变化。

4. 页面设计。第一，首页主要包含两部分内容，即幻灯片滚动和新闻列表。幻灯片计划使用swiper组件进行图片的轮播图效果，新闻列表计划使用view容器，内部使用数组循环。当前效果如下图所示。这里我们在utils文件下的common.js文件中存放了三条news，所以这里的新闻列表中我们显示出来了三条新闻。

   第二，个人中心页主要包含两个版块,即登录面板和“我的收藏”。登录面板用于显示用户的微信头像和昵称,“我的收藏”用于显示收藏在本地的新闻列表。这部分的页面我们会在之后再详细进行编写。

   第三，新闻页是用于给用户浏览新闻全文的，需要用户点击首页的新闻列表，然后在新窗口中打开该页面。新闻页包括新闻标题,新闻图片、新闻正文和新闻日期。由于暂时没有做点击跳转的逻辑设计，所以可以在微信web开发者工具顶端工具栏中找到“普通编译”下拉选项，选择“添加编译模式”，然后就可以追加对于detail页面的直接浏览效果。具体效果如下图图二所示。

5. 逻辑实现。接下来在 common.js中添加自定义函数getNewsList 和 getNewsDetail，分别用于获取新闻列表信息和指定ID的新闻正文内容。最后需要在common.js 中使用module.exports语句暴露函数出口，代码片段如下图所示。然后需要在各页面的JS文件顶端引用公共JS文件。

   首页逻辑：首页主要有两个功能需要实现，一是展示新闻列表，二是点击新闻标题可以跳转对应的内容页面进行浏览。新闻列表展示使用了{{newsList }}，因此需要在页面JS文件的 onLoad函数中获取新闻列表，并更新到data属性的newsList参数中。若希望用户点击新闻标题即可实现跳转，需要首先为新闻列表项目添加点击事件goToDetail。代码如下图所示，+id主要是为了成功携带新闻ID数据（后面需要再detail页面进行携带数据的接收处理才可以显示新闻）。

6. 接下来我们设置一个收藏按钮，用来添加/取消收藏新闻，并使用wx：if和wx：else属性使其每次只存在一个。同时添加了本地缓存。效果如下图所示。

   1. 个人中心页逻辑。个人中心页主要有3个功能需要实现，一是获取微信用户信息，二是获取收藏列表，三是浏览收藏的新闻。修改my. wxml 代码,追加<button >组件作为登录按钮,并且使用wx:if 和wx:else属性让未登录时只显示按钮﹐登录后只显示头像和昵称。同时我们参照实验一使得微信能够获取用户的头像和昵称。

   8.获取收藏列表。最后需要清除或注释掉一开始为了测试样式录入的临时数据,以免影响整体逻辑效果。考虑到登录成功后用户还可以手动更改新闻的收藏状态,因此修改my.js 中的onShow函数,判断如果是登录状态就刷新一下收藏列表。

三、程序运行结果

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

四、问题总 结与体会

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

1. 在实验过程中，出现了获取不了用户的头像及昵称的问题此问题和实验一出现的问题一样。在实验过程中，我们使用getUserInfo来获取用户信息时，发现获取失败，头像是默认灰色头像，昵称是微信用户，产生这个问题的原因在于微信开放平台对原来的接口进行了修改。为此，我们需要查看更新后获取用户信息的方法，通过查看我们发现现在需要采用 wx.getUserProfile 这个 API ，并通过用户接收才能来获取到微信头像和微信用户名。

2. 通过本次实验，我综合所学知识创建了完整的前端新闻小程序项目，并且能够在开发过程中熟练掌握真机预览、调试等操作，形成了包含首页、新闻页、个人中心的高校新闻网小程序。