2024年夏季《移动软件开发》实验报告
姓名和学号? | 林佳欣,22020007054 |
---|---|
本实验属于哪门课程? | 中国海洋大学24夏《移动软件开发》 |
实验名称? | 实验5:高校新闻网 |
博客地址? | LinJason.OUC-CSDN博客 |
Github仓库地址? | WechatMiniProgram: 2024年中国海洋大学移动软件开发作业 (gitee.com) |
(备注:将实验报告发布在博客、代码公开至 github 是 加分项,不是必须做的)
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目;2、能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1、导航栏设计
在app.json中输入代码
"pages": [
"pages/index/index",//首页
"pages/my/my",//个人中心
"pages/detail/detail"//新闻详细页
],
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "我的新闻网",
"navigationBarBackgroundColor": "#328EEB"
},
"tabBar": {
"color": "#000",
"selectedColor": "#328EEB",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/index.png",//首页图标
"selectedIconPath": "images/index_blue.png",//点击后变蓝图标
"text": "首页"
},
{
"pagePath": "pages/my/my",
"iconPath": "images/my.png",//我的图标
"selectedIconPath": "images/my_blue.png",//变蓝
"text": "我的"
}
]
},
//其它代码
2、公共逻辑
在utils/common.js中写入代码,因为首页和个人收藏都需要获取新闻的接口
//模拟新闻数据
const news = [
{id: '264698',
title: '中国海大志愿者完成第五届跨国公司领导人青岛峰会志愿服务',
poster: 'https://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg',
content: ' 8月27日至29日,第五届跨国公司领导人青岛峰会在青岛国际会议中心举办。为全面做好服务保障,确保峰会顺利举行,中国海洋大学招募选派115名志愿者参与峰会志愿服务,志愿者们以饱满的热情完成本次大会的各项工作,累计服务时长3000余小时,用实际行动展现中国海大青年风采。前期,学校团委根据峰会安排及各工作组志愿者需求,面向崂山校区15个学部、学院(中心)进行志愿者选拔招募,并邀请青岛团市委、峰会组委会相关专家对志愿者开展了峰会情况介绍、志愿服务礼仪与规范、大型赛会志愿服务知识与技能等系统培训。峰会举办期间,学校志愿者在4个工作组分别参与会务服务、媒体接待、酒店接待、交通抵离、青企峰会、人力资源高质量发展对话会等15个组别的工作任务。中国海大青年志愿者用耐心热心的服务态度、吃苦耐劳的坚韧品质、蓬勃向上的服务热情赢得广泛赞誉。恰逢学校百年华诞,此次峰会的志愿服务为志愿者和学校志愿服务工作提供了宝贵经验,也为学校建校100周年系列庆祝活动志愿服务夯基蓄力。学校团委将继续以服务大型赛会为依托,完善志愿服务工作体系,引领学生在志愿服务中成长成才,挺膺担当。',
add_date: '2024-08-31'},
{id: '304083',
title: '该新闻含敏感元素,可自行替换标题',
poster: 'https://news.ouc.edu.cn/_upload/article/images/3a/4d/73b22a9b404f93e907238f2a2325/55606b28-53b8-412f-9420-74c7a30657b6.jpg',
content: ' 该新闻含敏感元素,可自行替换正文',
add_date: '2024-08-30'},
{id: '305670',
title: '该新闻含敏感元素,可自行替换标题',
poster: 'https://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg',
content: '该新闻含敏感元素,可自行替换正文',
add_date: '2024-08-29'}
];
//获取新闻列表
function getNewsList() {
let list = [];
for (var i = 0; i < news.length; i++) {
let obj = {};
obj.id = news[i].id;
obj.poster = news[i].poster;
obj.add_date = news[i].add_date;
obj.title = news[i].title;
list.push(obj);
}
return list; //返回新闻列表
}
//获取新闻内容
function getNewsDetail(newsID) {
let msg = {
code: '404', //没有对应的新闻
news: {}
};
for (var i = 0; i < news.length; i++) {
if (newsID == news[i].id) { //匹配新闻id编号
msg.code = '200'; //成功
msg.news = news[i]; //更新当前新闻内容
break;
}
}
return msg; //返回查找结果
}
// 对外暴露接口
module.exports = {
getNewsList: getNewsList,
getNewsDetail: getNewsDetail
}
3、首页设计
在index.wxml中输入代码,设计首页幻灯片滚动效果和新闻列表
<!--pages/index/index.wxml-->
<!--幻灯片滚动-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
<block wx:for="{{swiperImg}}" wx:key='swiper{{index}}'>
<swiper-item>
<image src="{{item.src}}"></image>
</swiper-item>
</block>
</swiper>
<!--新闻列表-->
<view id='news-list'>
<view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
<image src='{{news.poster}}'></image>
<text bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}——{{news.add_date}}</text>
</view>
</view>
在index.wxss中输入代码,设计首页幻灯片滚动效果和新闻列表的样式
/*swiper区域样式*/
/*1-1swiper组件*/
swiper{
height: 400rpx;
}
/*1-2swiper中的图片*/
swiper image{
width: 100%;
height: 100%;
}
/*新闻列表区域样式*/
/*2-1新闻列表容器*/
#news-list {
min-height: 600rpx;
padding: 15rpx;
}
/*2-2列表项目*/
.list-item{
display: flex;
flex-direction: row;
border-bottom: 1rpx solid gray;
}
/*2-3新闻图片*/
.list-item image{
width:230rpx;
height: 150rpx;
margin: 10rpx;
}
/*2-4新闻标题*/
.list-item text{
width: 100%;
line-height: 60rpx;
font-size: 10pt;
}
在index.js中写入代码,实现首页的逻辑实现
// pages/index/index.js
var common = require('../../utils/common.js') //引用公共JS文件
Page({
/**
* 页面的初始数据
*/
data: {
//幻灯片素材,一共三张图片
swiperImg: [
{src: 'https://news.ouc.edu.cn/_upload/article/images/12/8b/de7f4963476da934b54aebfb8f97/36529309-d65e-48cb-ba3f-016cac9f4d19.jpg'},
{src: 'https://news.ouc.edu.cn/_upload/article/images/59/30/d19095614e568f55a5f692311218/bad85368-4b34-4c47-a9e4-737e543d3bf5.jpg'},
{src: 'https://news.ouc.edu.cn/_upload/article/images/73/48/f5ef2ba040c384d2a2b76c840ba2/27a4e591-9e1b-49e9-90c7-b8326690e2fd.jpg'}
],
},
/**
* 自定义函数--跳转新页面浏览新闻内容
*/
goToDetail: function(e) {
//获取携带的data-id数据
let id = e.currentTarget.dataset.id;
//携带新闻id进行页面跳转
wx.navigateTo({
url: '../detail/detail?id=' + id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//获取新闻列表
let list = common.getNewsList()
//更新列表数据
this.setData({
newsList: list
})
},
//其它生命周期函数
onReady: function() {},
onShow: function() {},
onHide: function() {},
onUnload: function() {},
onPullDownRefresh: function() {},
onReachBottom: function() {},
onShareAppMessage: function() {}
})
4、个人中心页设计
在my.wxml中设计登录面板和我的收藏,其中登录面板含有登录按钮
<!-- 用户登录信息展示区域 -->
<view id="myLogin">
<!-- 判断用户是否已登录 -->
<block wx:if="{{isLogin}}">
<!-- 用户头像 -->
<image id='myIcon' src="{{src}}"></image>
<!-- 用户昵称 -->
<text id='nickName'>{{nickName}}</text>
</block>
<!-- 如果用户未登录,显示登录按钮 -->
<button wx:else open-type="getUserInfo" bindgetuserinfo="getMyInfo">未登录,点此登录</button>
</view>
<!-- 用户收藏列表区域 -->
<view id="myFavorites">
<!-- 收藏总数显示 -->
<text>我的收藏({{num}})</text>
<view id="news-list">
<!-- 循环渲染每条收藏新闻 -->
<view class="list-item" wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
<!-- 新闻海报图片 -->
<image src="{{news.poster}}"></image>
<!-- 新闻标题和日期,点击可进入详情 -->
<text bindtap="goToDetail" data-id='{{news.id}}'>◇{{news.title}}--{{news.add_date}}</text>
</view>
</view>
</view>
在my.wxss中设计登录面板的样式,且收藏的新闻列表与index.wxss中相同,将index.wxss中的相关代码挪到app.wxss中公用
my.wxss:
/* pages/my/my.wxss */
/*登录面板*/
#myLogin{
background-color:#328EEB;
height: 400rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
#myIcon{
width: 200rpx;
height: 200rpx;
border-radius:50%;
}
/*1-2 微信昵称*/
#nickName{
color: white;
}
/*我的收藏*/
#myFavorites{
padding: 20rpx;
}
app.wxss:
/**app.wxss**/
/*新闻列表区域样式*/
/*2-1新闻列表容器*/
#news-list{
min-height: 600rpx;
padding:15rpx;
}
/*2-2列表项目*/
.list-item{
display: flex;
flex-direction: row;
border-bottom: 1rpx solid gray;
}
/*2-3新闻图片*/
.list-item image{
width:230rpx;
height:150rpx;
margin: 10rpx;
}
/*2-4新闻标题*/
.list-item text{
width:100%;
display: block;
line-height: 60rpx;
font-size: 10pt;
}
在my.js中写入代码,完成个人中心的逻辑实现,实现登录与读取本地缓存获得收藏的新闻
// pages/my/my.js
// 引入公共工具模块
var common = require('../../utils/common')
// 创建页面实例
Page({
data: {
// 收藏数量初始为0
num: 0
},
// 获取用户信息并更新登录状态
getMyInfo: function(e) {
// 获取用户信息对象
let info = e.detail.userInfo;
// 更新页面数据,包括登录状态、用户头像和昵称
this.setData({
isLogin: true,
src: info.avatarUrl,
nickName: info.nickName
})
// 获取并更新用户收藏列表
this.getMyFavorites();
},
// 获取用户收藏的新闻列表
getMyFavorites: function() {
// 读取本地缓存信息
let info = wx.getStorageInfoSync();
// 获取所有缓存键名
let keys = info.keys;
// 计算收藏新闻的数量
let num = keys.length;
let myList = [];
// 遍历所有键名,获取收藏的新闻数据
for (var i = 0; i < num; i++) {
let obj = wx.getStorageSync(keys[i]);
// 将新闻对象添加到收藏列表数组中
myList.push(obj);
}
// 更新页面数据,包括收藏列表和收藏数量
this.setData({
newsList: myList,
num: num
});
},
// 跳转到新闻详情页面
goToDetail: function(e) {
// 获取点击的新闻ID
let id = e.currentTarget.dataset.id;
// 跳转到新闻详情页面,并传递ID参数
wx.navigateTo({
url: '../detail/detail?id=' + id,
})
},
onShow: function() {
// 页面显示时执行的操作,如果用户已登录,则获取收藏列表
if (this.data.isLogin) {
this.getMyFavorites()
}
},
//其它生命周期函数
onLoad: function(options) {},
onReady: function() {},
onHide: function() {},
onUnload: function() {},
onPullDownRefresh: function() {},
onReachBottom: function() {},
onShareAppMessage: function() {}
})
5、新闻详细页设计
在detail.wxml中写入代码,设计新闻详细页的新闻标题、图片、正文、日期、收藏
<view class='container'>
<!-- 文章标题 -->
<view class='title'>{{article.title}}</view>
<!-- 文章海报图片 -->
<view class='poster'>
<!-- 海报图片,宽度自适应 -->
<image src='{{article.poster}}' mode='widthFix'></image>
</view>
<!-- 文章内容 -->
<view class='content'>{{article.content}}</view>
<!-- 文章发布时间 -->
<view class='add_date'>时间:{{article.add_date}}</view>
<!-- 如果文章已被收藏,显示取消收藏按钮 -->
<button wx:if='{{isAdd}}' plain bindtap='cancelFavorites'>❤已收藏</button>
<!-- 如果文章未被收藏,显示添加收藏按钮 -->
<button wx:else plain bindtap='addFavorites'>❤点击收藏</button>
</view>
在detail.wxss中写入代码,设计新闻详细页的样式
/*整体容器*/
.container{
padding:15rpx;
text-align: center;
}
/*新闻标题*/
.title{
font-size: 14pt;
line-height: 80rpx;
}
/*新闻图片*/
.poster image{
width:100%;
}
/*新闻正文*/
.content{
text-align: left;
font-size: 12pt;
line-height: 60rpx;
}
/*新闻日期*/
.add_date{
font-size: 12pt;
text-align: right;
line-height: 30rpx;
margin-right: 25rpx;
margin-top: 20rpx;
}
button{
width: 20rpx;
height: 100rpx;
margin: 20rpx auto;
}
在detail.js中写入代码,实现从上个页面获取新闻的标题、图片、正文、时间,判断有无收藏,点击收藏会写入本地缓存的功能
// pages/detail/detail.js
var common = require('../../utils/common')
Page({
data: {
},
onLoad(options) {
let id = options.id
//检查当前新闻是否在收藏夹中
var article = wx.getStorageSync(id)
//已存在
if (article != ''){
this. setData({
article:article,
isAdd: true
})
}
//不存在
else {
let result= common.getNewsDetail(id)
//获取到新闻内容
if (result.code == '200'){
this. setData({
article: result.news,
isAdd: false
})
}
}
},
//添加收藏
addFavorites:function(options) {
let article = this.data.article;
wx. setStorageSync(article.id,article);
this. setData({isAdd: true });
},
//取消收藏
cancelFavorites:function() {
let article = this.data.article;
wx.removeStorageSync(article.id);
this. setData({isAdd: false });
},
//其它生命周期函数
onReady() {},
onShow() {},
onHide() {},
onUnload() {},
onPullDownRefresh() {},
onReachBottom() {},
onShareAppMessage() {}
})
三、程序运行结果
列出程序的最终运行结果及截图。
四、问题总结与体会
描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。
问题:在使用<button wx:else open-type="getUserInfo"bindgetuserinfo="getMyInfo">未登录,点此登录</button>
登录的时候,无法获取用户的昵称和头像
解决方法:在详细–>本地设置–>调试基础库中将版本修改成2.20.3,即可获取用户头像和昵称
收获和体会:在这次的实验中,我体会到用户收藏的一种存储到本地缓存的方式,而不是数据库,当然用数据库也能够双重保险;学会了当多个界面使用同一种逻辑实现的时候,可以调用utils文件夹中的方法,减少代码重复编写;更加深入体会调用外界Url呈现在小程序中的功能;了解如何通过onLoad()
函数获取上一个页面的某一个新闻信息以便详细呈现,以及页面跳转时候的传参方式;此外对于样式的编写中,也学会幻灯片以及底部栏的设计,更加美观和实用。