2024年夏季《移动软件开发》实验报告
一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目;2、能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
1. 准备阶段,导入素材
- 创建文件夹images,存放图片素材
- 创建detail页,用于查看新闻详情
- 创建my页,查看个人主页
- 创建util文件夹,准备放入common.js文件
下载https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip,将素材文件导入项目相应位置。
项目结构可参考上图
修改app.json,调整导航栏和设置下边栏。
{
"pages": [
"pages/index/index",
"pages/detail/detail",
"pages/my/my"
],
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "高校新闻网",
"navigationBarBackgroundColor": "#1E90FF"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents",
"tabBar": {
"color": "#000",
"selectedColor": "#328KKB",
"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": "我的"
}
]
}
}
common.js:
//模拟新闻数据
const news = [
{id: '264698',
title: '省退役**事务厅来校交流对接工作',
poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
content: '……',
add_date: '2022-08-19'},
{id: '304083',
title: '《光明日报》刊发我校研究员王顺理论文章《不断提高理论素养》',
poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg',
content: ' ……',
add_date: '2022-08-09'},
{id: '305670',
title: '我校在第八届安徽省“互联网+”大学生创新创业大赛再创佳绩',
poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg',
content: '……',
add_date: '2022-08-11'}
];
//获取新闻列表
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
}
2. 修改index页
首页的主要功能是显示所有新闻,用幻灯片展示新闻图片。后续要实现点击新闻查看详情。
<!--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>
样式:
/*新闻列表区域样式*/
/*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;
}
/*新闻列表区域样式*/
/*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;
}
3. 详情页
详情页功能要实现显示静态存在common.js中新闻标题,图片和文本。实现收藏和发送评论功能。
<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 class='comment-section'>
<input type='text' placeholder='发表评论' value='{{commentInput}}' bindinput='handleCommentInput' />
<button bindtap='submitComment'>提交评论</button>
</view>
<view class='comments'>
<block wx:for="{{comments}}" wx:key="index">
<view class='comment-item'>
<text>{{item.userID}}: {{item.text}}</text>
</view>
</block>
</view>
</view>
样式:
.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;
}
.comment-section {
display: flex;
margin-top: 30rpx;
text-align: left;
}
.comment-section input {
width: 70%;
padding: 10rpx;
border: 1px solid #ddd;
font-size: 12pt;
line-height: 30rpx;
border-radius: 10rpx;
}
.comment-section button {
width: 25%;
margin-left: 5%;
padding: 10rpx;
background-color: #007aff;
color: white;
font-size: 12pt;
border-radius: 10rpx;
}
.comments {
margin-top: 30rpx;
text-align: left;
}
.comment-item {
padding: 20rpx 10rpx;
border-bottom: 1px solid #ddd;
font-size: 12pt;
line-height: 60rpx;
}
4. 个人主页
个人主页要实现用户登录和收藏查看。
<!-- 登录面板 -->
<view id="myLogin">
<block wx:if="{{isLogin}}">
<image id="myIcon" src="{{src}}"></image>
<text id="nickName">{{nickName}}</text>
</block>
<button wx:else bindtap="getUserInfo">未登录,点此登录</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>
样式:
#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%;
}
#nickName {
color: white;
}
#myFavorites {
padding: 20rpx;
}
button {
width: 250rpx;
height: 100rpx;
margin: 20rpx auto;
}
5. 实现首页向详情页的跳转
为每个新闻文本绑定goToDetail
函数,修改index.js文件
index.js文件的内容:
// pages/index/index.js
var common = require('../../utils/common.js') //引用公共JS文件
Page({
/**
* 页面的初始数据
*/
data: {
//幻灯片素材
swiperImg: [
{src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg'},
{src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg'},
{src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.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
})
},
})
6. 实现收藏功能和个人主页收藏显示
为收藏按钮绑定addFavorites
和cancelFavorites
函数
addFavorites:function(options) {
let article = this.data.article;
wx.setStorageSync(article.id, article);
this.setData({isAdd:true});
},
cancelFavorites: function(options) {
let article = this.data.article;
// console.log(article);
wx.removeStorageSync(article.id);
this.setData({isAdd:false})
},
my.js:
// pages/my/my.js
var common = require("../../utils/common")
Page({
//获取授权信息
getUserInfo: function(){
wx.getUserProfile({
desc: '获取授权信息',
success: (res) => {
let info = res.userInfo
this.setData({
isLogin: true,
src: info.avatarUrl,
nickName: info.nickName
})
this.getMyFavorites()
}
})
},
//跳转到详情页
goToDetail: function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id,
})
},
getMyFavorites: function(){
//读取所有本地信息
let info = wx.getStorageInfoSync()
if (!info){
console.log("未获取到信息")
} else {
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
})
}
},
/**
* 页面的初始数据
*/
data: {
num: 0
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log(this.data.isLogin)
console.log("调用onShow事件")
if (this.data.isLogin){
//更新收藏列表
this.getMyFavorites()
console.log("更新数据")
}
},
})
7. 额外功能:新闻评论
类似于上一个实验的发送弹幕功能,定义函数,读取文本框的文本,并用按钮将文本发送。每个评论会生成一个随机的用户ID,实现匿名发送
detail.js:
// pages/detail/detail.js
var common = require('../../utils/common.js')
Page({
/**
* 页面的初始数据
*/
data: {
article: {
id: '264698',
title: '省退役**事务厅来校交流对接工作',
poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
content: ' ……',
add_date: '2022-08-19'
},
commentInput: '',
comments: []
},
/**
* 生命周期函数--监听页面加载
*/
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
})
}
}
// 从本地存储中获取评论
let comments = wx.getStorageSync('comments_' + id) || [];
this.setData({ comments });
},
addFavorites:function(options) {
let article = this.data.article;
wx.setStorageSync(article.id, article);
this.setData({isAdd:true});
},
cancelFavorites: function(options) {
let article = this.data.article;
// console.log(article);
wx.removeStorageSync(article.id);
this.setData({isAdd:false})
},
handleCommentInput: function(e) {
this.setData({ commentInput: e.detail.value });
},
generateRandomUserID: function() {
return 'user_' + Math.floor(Math.random() * 10000);
},
// 提交评论
submitComment: function() {
let { commentInput, comments, article } = this.data;
if (commentInput.trim()) {
let userID = this.generateRandomUserID();
comments.push({ userID, text: commentInput });
this.setData({ comments, commentInput: '' });
wx.setStorageSync('comments_' + article.id, comments); // 将评论存储在本地
}
},
})
三、程序运行结果
1. 查看首页新闻
2. 点击新闻后跳转到新闻详细页
3. 登录账号,获取头像和昵称
4. 收藏新闻和发送评论
5. 回到个人主页查看收藏
四、问题总结与体会
问题总结: 在处理新闻数据和评论功能时,初期对本地存储的使用不够熟悉,导致数据存储和读取有些不稳定。通过调试和优化代码,解决了这些问题。
体会: 加深了对前端开发流程的理解,不断修正和调整代码是开发过程中不可或缺的一部分。