2022年夏季《移动软件开发》实验 告四（新闻 ）

本实验属于哪门课程td>	中国海洋大学22夏《移动软件开发》
实验名称td>	实验4：第四个微信小程序，新闻
博客地址td>	XXXXXXX
Github仓库地址td>	XXXXXXX

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

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

1.将模板清空，并且创建images文件存放所需png图片，创建utils文件存放common.js文件，通过在app.json中添加代码，使得在pages中创建两个文件夹detail和my，用于制作新闻首页和用户界面，此外，设计tabBar用于跳转不同界面，同时设置导航栏

代码为：

导航栏：

tabBar：

 

2.编写index下的wxml，wxss和js（新闻首页）

①wxml

创建幻灯片滚动效果，利用了,,以及组件，实现了不同新闻图片的滚动效果

然后，创建新闻列表区域，包含新闻图片和标题每个新闻占用一行，通过获取新闻列表的数据一次列出

代码为：

 

 

②wxss（由于布局一样，app.wxss代码和index.wxss一样（只少个button的布局））

用来布局wxml中创建的幻灯片滚动区域和新闻列表区域，规定了每一个组件的宽和高等数据

代码为：

最终首页呈现为：

 

③js（所有js文件在头部要申明require common.js文件）

用swiperImg存放了三个新闻的标题，用于幻灯片滚动替换，除此之外创建onload函数用于获取新闻列表，goToDetail函数用于进行跳转查看新闻的具体内容

 

3.编写my文件下的wxml，wxss和js（个人中心页面）

①wxml

这一界面需要登录面板myLogin，微信头像myIcon，微信昵称nickName和我的收藏myFavourites信息，共分为两大区域：登录面板区域和收藏区域

登录区域设置了登录按钮，并且能更新用户信息

收藏区域，显示了收藏新闻的标题和图片，显示样式类似于首页的新闻列表，并且能通过添加和移除收藏实时更新

代码为：

 

②wxss

设计组件的布局，登录界面用蓝色作为背景，并让整个区域呈现居中状态，并且使整个内容均匀对齐，设置头像和昵称为适宜大小

代码为：

 

效果图：（未设置初始收藏）

 

③js

需要获取到微信用户的信息，创建了自定义函数getMyInfo并且通过getUserProfile的接口获取个人信息，同样设置了跳转函数，用于用户点击新闻标题跳转至具体新闻内容界面，同时创建onShow函数：通过切换页面更新收藏的内容，getMyFavourites用于获取收藏列表

代码为：

 

 

效果图：（成功读取用户信息）

 

4.detail下的wxml，wxss和js（新闻内容页面）

①wxml

在总的view:container下面设有标题，图片，内容和收藏按钮四个部分，分别用了text，image，text和button四个组件实现，并且button是二选一的类型，二者只能同时出现一种在界面上，采取了if else语句

 

②wxss

布局了各个组件

 

③js

创建addFavourites函数，将该新闻加入收藏列表并且设置isAdd为已收藏创建了

cancelFavourites函数，将该新闻从收藏列表删除，并且更新isAadd为假，表示未收藏

onLoad函数，用于检查该新闻是否已经存在于收藏列表，进行一个if else的选择判断，而后获取数据

 

 

效果图：

 

三、程序运行结果

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

①首页和界面滑动：（成功滑动）

 

②用户界面和登录和收藏新闻：（登录成功）

 

③点击进入新闻内容界面：（进入成功）

 

④取消收藏《光明日 》：（取消成功）

 

四、问题总结与体会

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

1.同样的读取微信用户信息不再使用之前的getmyinfo而是通过getUserProfile的接口获取个人信息

2.收藏个数的显示是{{number}}，一开始总是多一个，后来发现是keys.length赋值给number时，因为自身多一个，导致初始为1，后来我使keys.length赋值时先减一，最后number正确，也不会多显示多出来的空白一行

文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3895 人正在系统学习中