《移动软件开发》实验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,如下图所示：