《移动软件开发》实验4

《移动软件开发》实验4

一、实验目标

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

二、实验步骤

4.0准备工作

课程提供的common.js、图片文件以及 index 页面的代码，下载地址：“https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip”

4.1项目创建

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

4.1.1 首页功能需求

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

4.1.2 新闻页功能需求

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

4.1.3 个人中心页功能需求

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

4.2项目创建

单击“新建”按钮完成项目创建,然后准备手动修改页面配置文件。

4.3页面配置

4.3.1创建页面文件

项目创建完毕后,在根目录中会生成文件夹pages 用于存放页面文件。项目创建完毕后,在根目录中会生成文件夹pages 用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面;其他页面名称可以自定义。本项目需要创建3个页面文件,包括index(首页页面)、detail(新闻页面)和my(个人中心页面)。
具体操作如下:
(1)、将app. json文件内pages属性中的"pages/logs/logs"删除；
(2)、在app.json文件pages属性中继续追加pages/detail/detail和pages/my/my;

(3)、按快捷键Ctrl+S保存修改,然后会在pages文件夹下自动生成detail和my目录。

如图所示：

4.3.2删除和修改文件

具体操作如下:
(1)删除utils文件夹及其内部所有内容。
(2)删除pages文件夹下的logs目录及其内部所有内容。
(3)删除index. wxml 和index. wxss中的全部代码。
(4)删除index. js中的全部代码,并且输入关键词"page”找到第二个选项按回车键让其自动补全函数。(5)删除app. wxss中的全部代码。
(6)删除app.js中的全部代码,并且输入关键词“app"找到第一个选项按回车键让其自动补全函数。

4.3.3创建其他文件

本节创建其他自定义文件,本项目还需要创建以下两个文件夹。

●images: 用于存放图片素材;

●utils: 用于存放公共JS文件。

文件夹名称由开发者自定义,创建方式与pages文件夹创建方式完全相同。

1.添加图片文件

本项目将在tabBar栏中用到两组图标文件,右击目录结构中的images文件夹,选择“在资源管理器中显示”。在images文件夹中将图标文件复制、粘贴进去。如下图所示：

2.创建公共JS文件

右击utils文件夹,选择“新建"|JS命令,输人“common”按回车键即创建公共函数common. js,如下图所示：

最终的目录结构如图所示：

4.4视图设计

4.4.1导航栏设计

小程序默认导航栏是黑底白字的效果，可以通过在app. json中对window属性进行重新配置来自定义导航栏效果。

更改后的app. json文件代码如下:

上述代码将导航栏背景色改为蓝色、字体为白色。

4.4.2tabBar设计

首先在app.json中追加tarBar的相关属性代码,更改后的app.json文件代码如下:

此时已经可以切换首页和个人中心页了，如下图所示：

4.4.3页面设计

1.页面设计

首页主要包含两部分内容,即幻灯片滚动和新闻列表,计划使用如下组件：

●幻灯片: < swiper>组件;

●新闻列表:容器,内部使用数组循环。

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

index. wxml( pages/ index/ index. wxml)代码如下:

相关WXSS( pages/ index/index. wxss)代码片段如下:

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

index. js( pages/ index/index. js)代码片段如下:

此时可以显示幻灯片播放和一条临时新闻。由于尚未获得新闻数据,所以暂时无法显示完整的新闻列表。当前效果如下图所示：

2.个人中心页设计

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

计划使用< view >组件进行整体布局,对自定义的id名称解释如下：

​ ● myILogin:登录面板;

​ ● myIcon: 微信头像图片;

​ ● nickName: 微信昵称;

​ ● myFavorites:我的收藏。

同时为两个区域添加内容。

my. wxml(pages/my/my. wxml)代码如下:

my. wxss(pages/my/my. wxss)代码如下:

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

修改后index.wxss的代码如下:

app. wxss的代码如下:

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

my. js( pages/ my/my. js)代码片段如下:

此时可以显示完整的样式效果。由于尚未获得微信用户数据和收藏在本地的缓存数据,所以暂时无法显示实际内容。当前效果如下图所示：

3.新闻页设计

新闻页是用于给用户浏览新闻全文的,需要用户点击首页的新闻列表,然后在新窗口中打开该页面。新闻页包括新闻标题、新闻图片、新闻正文和新闻日期。

由于暂时没有做点击跳转的逻辑设计,所以可以在微信web开发者工具顶端工具栏中找到“普通编译”下拉选项,选择“添加编译模式”,然后追加对于detail页面的直接浏览效果。

如下图所示：

此时预览就可以直接显示detail 页面了,设计完毕后再切换回“普通编译"模式显示首页(index)即可。

该页面计划使用< view >组件进行整体布局,对自定义的class名称解释如下：

​ ● container :整体容器;

​ ● title:新闻标题区域;

​ ● poster:新闻图片区域;

​ ● content:新闻正文区域;

​ ● add_date:新闻日期区域。

detail. wxml( pages/ detail/ detail. wxml)代码如下:

detail. wxss( pages/ detail/ detail. wxss)代码如下:

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

detail. js( pages/detail/detail. js)代码片段如下:

此时可以显示完整的样式效果。由于尚未获得新闻数据,所以暂时无法根据用户点击的新闻标题人口显示对应的新闻内容。当前效果如下图所示：

4.5逻辑实现

4.5.1公共逻辑

使用课程提供的common.js文件即可。

但是需要在各页面的JS文件顶端引用公共的commom.js文件,引用代码如下:

需要注意这里暂时还不支持绝对路径引用,只能使用相对路径。

4.5.2首页设计

首页主要有两个功能需要实现，一-是展示新闻列表,二是点击新闻标题可以跳转对应的内容页面进行浏览。

1.新闻列表展示

新闻列表展示使用了{{newsList}},因此需要在页面index. js文件的onLoad函数中获取新闻列表,并更新到data属性的newsList参数中。

index. js( pages/ index/ index. js)代码片段如下:

效果图如下：

若希望用户点击新闻标题即可实现跳转,需要首先为新闻列表项目添加点击事件。

index. wxml( pages/index/index. wxml)代码片段修改如下：

具体修改为第5行加粗字体部分,为< text>组件添加了自定义触摸事件函数goToDetail,并且使用data-id属性携带了新闻ID编号。

然后在对应的index. js文件中添加goToDetail函数的内容,代码片段如下:

此时已经可以点击跳转到detail页面,并且成功携带了新闻ID数据,但是仍需在detail页面进行携带数据的接收处理才可显示正确的新闻内容。

4.5.3新闻页逻辑

新闻页主要有两个功能需要实现,一是显示对应新闻,二是可以添加/取消新闻收藏。

1.显示对应新闻

在首页逻辑中已经实现了页面跳转并携带了新闻ID编号,现在需要在新闻页接收ID编号,并查询对应的新闻内容。

detail. js( pages/ detail/ detail. js)代码片段如下:

此时重新从首页点击新闻跳转就可以发现已经能够正确显示标题对应的新闻内容了。

2.添加/取消新闻收藏

修改detail.wxml代码,追加两个< button >组件作为添加/取消收藏新闻的按钮,并使用

wx:if和wx:else属性使其每次只存在一个。

detail. wxml( pages/ detail/ detail. wxml)代码片段添加如下:

detail. wxss( pages/ detail/detail. wxss)代码片段添加如下:

同时在detail. js文件中追加addFavorites和cancelFavorites函数,用于点击添加/取消新闻收藏。

detail. js( pages/ detail/detail. js)中的onLoad函数代码片段修改如下:

此时进入新闻页面点击按钮，能实现相应的文本变换。

4.5.4个人中心页逻辑

个人中心页主要有3个功能需要实现，-是获取微信用户信息;二是获取收藏列表;三是浏览收藏的新闻。

1.获取微信用户信息

修改my.wxml代码,追加< button >组件作为登录按钮,并且使用wx:if和wx:else属性让未登录时只显示按钮，登录后只显示头像和昵称。其中if="{{canIUseGetUserProfile}}"表示如果激活获取微信用户信息功能，就使用bindtap属性表示获得的数据将传递给自定义函数getMyInfo。

my. wxml( pages/my/my. wxml)代码片段修改如下:

此时的效果图：

在my.js文件的Page()内部追加getMyInfo函数,将信息更新到动态数据上。

my. js( pages/my/my. js)代码片段如下:

同时修改该文件的onLoad文件，代码如下：

注意：图中被注释掉的wx.clearStorage()函数用于清除原本就有的缓存数据，所以在第一次编译的时候使用该函数，之后将其注释掉再编译一次即可。（但这样的逻辑功能多多少少有点问题）

此时点击登录的效果图：

登录后的效果图：

2.获取收藏列表

修改my.wxml代码,将“我的收藏”后面的数字更改为动态数据效果。

my. wxml( pages/ my/ my. wxml)代码片段如下:

my.js ( pages/ my/ my. js)中的data属性代码片段修改如下:

继续在my. js文件中追加getMyFavorites函数,用于展示真正的新闻收藏列表。

my. js(pages/my/my. js)代码片段如下:

修改my.js中的getMyInfo函数,为其追加关于getMyFavorites函数的调用。

my. js( pages/ my/ my. js)代码片段如下:

现在从首页开始预览，选择其中任意两篇新闻进入detail页面,并尝试点击收藏。然后退出切换到个人中心页,登录后查看收藏效果。此时页面效果如下图所示：

考虑到登录成功后用户还可以手动更改新闻的收藏状态,因此修改my.js中的onShow函数,判断如果是登录状态就刷新一下收藏列表。

my. js( pages/ my/my. js)代码片段如下:

3.浏览收藏的新闻

点击浏览已经收藏的新闻和首页的点击跳转新闻内容功能类似，先修改my.wxml文件中的收藏列表代码。

my. wxml( pages/ my/my. wxml)代码片段如下:

具体修改为第5行加粗字体部分,为< text >组件添加了自定义触摸事件函数goToDetail ,并且使用data-id 属性携带了新闻ID编号。

然后在对应的my.js文件中添加goToDetail函数的内容。

my. js( pages/ my/my. js)代码片段如下:

4.5.5清除临时数据

最后需要清除或注释掉一开始为了测试样式录人的临时数据,以免影响整体逻辑效果。

需要清除的数据如下：

​ ● 首页(index.js):data中的临时新闻列表数据(newsList);

​ ● 新闻页(detail. js): data中的临时新闻数据(article);

​ ● 个人中心页(my.js):data中的临时收藏夹新闻数据(newsList)、临时昵称(nickName)以及临时头像路径地址(sre)。

此时带有模拟新闻数据的小程序前端项目“高校新闻网”就全部完成,后续章节将为其追加后端服务器和数据库的相关内容。

至此，实验4就结束了。