实验4：高校新闻网

一、实验目标

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

二、实验步骤

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

1、一些初始操作：

本次实验需要用到3个页面，即首页、新闻页和个人中心页，他们的功能需求分别为： 首页功能需求如下：

（1）首页需要包含幻灯片播放效果和新闻列表；

（2）幻灯片至少要有3幅图片自动播放；

（3）点击新闻列表可以打开新闻全文。

新闻页功能需求如下：

（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；

（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；

（3）已经收藏过的新闻也可以点击按钮取消收藏。

个人中心页功能需求如下：

（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称；

（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表；

（3）收藏夹中的新闻可以直接点击查看内容；

（4）未登录状态下收藏夹显示为空。

包括项目创建、页面配置（创建页面文件、删除和修改文件、创建其他文件）、视图设计（导航栏设计、tabBar设计、页面设计），在此不过多赘述，详情请见Docs。

执行上述操作过程中的效果图：

自定义导航栏效果图：

 

首页初步设计效果图：

 

新闻页初步设计效果图（还没有完成点击进入的功能，通过添加编译模式进行该页面）：

 

 

个人页初步设计效果图：

2、逻辑实现

2.1 公共逻辑

初始新闻数据存放在公共JS文件（utils/common.js)，其中自定义函数getNewsList和getiNewsDetail分别用于获取新闻列表信息和指定ID的新闻正文内容：

 

2.2 首页逻辑

实现：

1. 展示新闻列表；

1. 点击新闻标题可以跳转到对应的内容页面进行浏览。

2.2.1 新闻列表展示

index.js 中添加代码如下：

1. 函数onLoad用于获取新闻列表；

2. 由于在页面列表展示时使用了{{newsList}}，写入对应getNewsList（）；

3. 语句this.setData()用于更新列表数据。

最终效果：

 

2.2.2 点击跳转新闻内容

index.wxml 中修改代码如下：

1. 使用bindtap添加自定义触摸事件函数goToDetail，并使用data-id属性携带了新闻ID编号；

2. data-id='{{news.id}}'这里的news.id为js里面设置的数据； 需要注意的是，这里的data-后面的值是不区分大小写的。获取值是只能用小写获取，页面传值大小写不作区分。

index.js 中添加代码如下：

1. currentTarget代表触发事件的组件的一些属性值集合，将news.id数据取出来，

2. wx.navigateTo()保留当前页面，跳转到应用内的某个页面;

3. url:参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'

2.3 新闻页逻辑

2.3.1 显示对应新闻

detail.js 中添加代码如下：

1. onLoad函数用于获取页面跳转来时携带的数据，其中result.code==‘200’时表示获取到了新闻内容，此时将其更新到Data。

最终效果：

（可以从首页点击新闻跳转到对应的新闻）

 

2.3.2 添加/取消新闻收藏

detail.wxml 中修改后代码如下：

 

detail.wxss中添加代码如下：

 

detail.js 中添加代码：

1. 上述操作用于检查当前新闻是否在收藏夹中，获取对应新闻内容，若不存在，执行收藏函数addFavorites，并标记为已收藏；否则即为已被收藏，更新数据即可。

1. 函数addFavorites用于添加到收藏夹，包括获取当前新闻、添加到本地缓存、更新显示按钮等；

2. 函数cancelFavorites用于取消收藏，包括获取当前新闻、从本地缓存中删除、更新按钮显示。

最终效果图：

本地存储Storage中内容：

2.4 个人中心页逻辑

2.4.1 获取微信用户信息

与实验一（《移动软件开发》实验报告_m0_53057170的博客-CSDN博客）操作相同，若使用getUserInfo和bindgetuserinfo只会显示灰色头像和“微信用户”，需使用getUserProfile和bindtap。

my.wxml 中修改代码如下：

 

my.js 中修改代码如下：

 

使用getUserInfo和bindgetuserinfo时Console显示信息：

 

使用getUserProfile和bindtap时Console显示信息：

 

使用getUserInfo和bindgetuserinfo时个人页效果图：

 

使用getUserProfile和bindtap时最终个人页效果图（最终效果，还没进行获取收藏列表时显示的是初始数据（与上图收藏列表相同）：

 

2.4.2 获取收藏列表

my.js 中添加代码如下：

 

 

2.4.3 浏览收藏的新闻

my.js 中添加代码如下：

 

2.5 清除个人数据

三、程序运行结果

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

 

四、问题总结与体会

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

遇到的问题

本地存储Storage ”logs“”影响收藏数据，如下图所示，正确收藏数量应为2，实际显示却为3.

 

解决方法：

删除“logs”栏。

参考文献：

《移动软件开发》实验报告_m0_53057170的博客-CSDN博客

Docs

微信小程序之绝对路径、相对路径、返回到某个页面 抛弃../../_幽幽靖的博客-CSDN博客_微信小程序图片相对路径

微信小程序中wxml中用data-id传出的数据在js中的获取方法_岁末Zzz的博客-CSDN博客

微信小程序：wx.navigateTo传值和跳转_Janson_Lin的博客-CSDN博客_微信小程序wx.navigateto传递数据