2024年夏季《移动软件开发》实验报告
本实验属于哪门课程? | 中国海洋大学24夏《移动软件开发》 |
实验名称? | 实验5:高校新闻网 |
博客地址? | 实验5:高校新闻网 |
一、实验目标
- 综合所学知识创建完整的前端新闻小程序项目;
- 能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
项目预期实现功能如下:
首页
- 首页需要包含轮播图播放效果和新闻列表;
- 轮播图 3 幅图片自动播放(可后期自行添加数量);
- 点击新闻列表可以跳转查看新闻全文
新闻页
- 阅读新闻全文的页面需要显示新闻标题、图片、正文和日期;
- 允许点击按钮将当前阅读的新闻添加到本地收藏夹中;
- 已经收藏过的新闻也可以点击按钮取消收藏
个人页
- 未登录状态下显示登录按钮,用户点击以后可以显示微信头像和昵称。
- 登录后读取当前用户的收藏夹,展示收藏的新闻列表。
- 收藏夹中的新闻可以直接点击查看内容。
- 未登录状态下收藏夹显示为空
【实验准备】
项目创建
创建微信小程序,填入个人的 AppID、不使用云服务、 JS基础模板
另:上述选择为最基础模板,可根据项目需求自行选择
注:关于微信小程序的注册与第一次使用:
① 微信公众平台 完成用户注册,微信小程序注册、备案相关流程
②安装 微信开发者工具,利用平台信息后获取的小程序 AppID 实现连接
项目文件整理
对已有初始化文件的整理如下
其他文件的创建与添加
-
在项目总目录下添加images、utils两文件夹
-
添加底部导航栏相关图片及命名如下
-
添加新闻文章用到的展示图片
如果新闻图片非本地,则不需要添加到目录中
整理后项目目录如下
【视图设计】
项目共展示三个页面:首页、个人页、新闻详细页(将分别展示代码以及对应页面划分)
注:此处不繁杂展示 .wxss 文件内容,有
需要的伙伴可前往 github 查看
设置顶部、底部导航栏(注释在使用代码时删除)
//app.json
//顶部导航栏
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "我的新闻网",
"navigationBarBackgroundColor": "#328EEB"
},
//底部导航栏(按照list中顺序显示)
"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": "我的"
}
]
},
则有分别选中 “首页” 和 “我的” 样式如下
首页
<!-- index.wxml -->
<!-- 轮播图 -->
<swiper indicator-dots autoplay interval="5000" duration="500">
<block wx:for="{{swiperImg}}" wx:key="swiper((index))">
<swiper-item>
<image src="{{item.src}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
- indicator-dots 是否显示面板指示点
- autoplay 是否自动切换
- interval 自动切换的时间间隔,单位为毫秒(ms)
- duration 滑动动画的时长,单位为毫秒(ms)
<!-- 新闻列表 -->
<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 bind:tap="goToDetail" data-id="{{news.id}}">◇{{news.title}}——{{news.add_date}}</text>
</view>
</view>
-
遍历 newsList 数组内容并为每一组数据生成一个新的 view 列表项
-
绑定 goToDetail 函数,用于点击跳转新闻详情页
编写完成后页面展示及划分如下
个人页
<!-- 微信用户登录 -->
<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>
- getUserInfo: 微信开发自带函数,用于获取微信用户信息
<!-- 收藏列表 -->
<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 bind:tap="goToDetail" data-id="{{news.id}}">◇{{news.title}}——{{news.add_date}}</text>
</view>
</view>
</view>
- num: 展示收藏文章总数
- 展示文章列表部分样式与 首页 部分一致
编写完成后页面展示及划分如下
【登录前】
【登录后】
详情页
<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 bind:tap="cancelFavorites">❤已收藏</button>
<button wx:else plain bind:tap="addFavorites">❤点击收藏</button>
</view>
- mode=“widthFix” 图片适应父容器宽度
- cancelFavorites 从收藏列表删除
- addFavorites 添加到收藏列表
编写完成后页面展示及划分如下
【逻辑实现】
注仅在初始化文件基础上添加or修改,其余默认内容保留
1、/utils/common.js
//模拟新闻数据
const news = [
{id: '264698',
title: '中国海大志愿者完成第五届跨国公司领导人青岛峰会志愿服务',
poster: '/images/newsimage1.jpg',
content: '文章1内容',
add_date: '2024-08-31'},
{id: '304083',
title: '贵州省人大干部综合能力提升培训班在中国海洋大学举办',
poster: '/images/newsimage2.jpg',
content: '文章2内容',
add_date: '2024-08-30'},
{id: '305670',
title: '中国海洋大学开展2024级本科生集中入学教育',
poster: '/images/newsimage3.jpg',
content: '文章3内容',
add_date: '2024-08-29'}
];
//获取新闻列表,放在 list 数组中返回
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; //返回新闻列表
}
//输入参数newID,获取新闻内容返回到 msg 中
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、/pages/index/index.js
var common = require('../../utils/common') //引入common.js
Page({
data: {
swiperImg:[
{src: "/images/newsimage1.jpg"},
{src: "/images/newsimage2.jpg"},
{src: "/images/newsimage3.jpg"}
],
},
//根据 id 跳转到详情页展示对应文章内容
goToDetail: function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id //带得到的 id 参数跳转
})
},
//页面加载时自动更新文章列表
onLoad: function (options) {
//获取新闻列表
let list = common.getNewsList()
//更新列表数据
this.setData({
newsList: list
})
},
})
3、/pages/detail/detail.js
var common = require('../../utils/common') //引入common.js
Page({
data: {
num: 0,
article: {}
},
//文章添加到收藏(wx.setStorageSync)
addFavorites: function (options) {
let article = this.data.article;
wx.setStorageSync(article.id, article);
this.setData({
isAdd: true //是否为收藏的判断标志
});
},
//文章从收藏删除(wx.removeStorageSync)
cancelFavorites: function () {
let article = this.data.article;
wx.removeStorageSync(article.id);
this.setData({
isAdd: false
});
},
//页面初加载时根据传参 id 返回对应文章 article
onLoad: function(options) {
let id = options.id
// console.log("得到的id是:",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
})
// console.log("返回数据",result.news.title, result.news.add_date)
}
}
},
})
4、/pages/my/my.js
var common = require('../../utils/common') //引入common.js
Page({
data: {
nickName: "未登录",
src: '/images/index.png',
num: 0,
},
//微信用户获取&查看
getMyInfo: function (e) {
let info = e.detail.userInfo;
this.setData({
isLogin: true,
src: info.avatarUrl,
nickName: info.nickName
})
// console.log(e.detail.userInfo)
this.getMyFavorites();
},
//从本地存储中获取收藏列表,以 myList 返回,并更新收藏数量 num
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
})
},
//根据 id 跳转到详情页展示对应文章内容(同 index.js )
goToDetail: function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id
})
},
//页面加载时自动更新收藏文章列表
onShow: function() {
if(this.data.isLogin){
this.getMyFavorites()
}
},
})
三、程序运行结果
微信用户登录
已在视图设计部分展示
首页轮播图展示
首页点击任一文章跳转详情页
详情页收藏功能
点击收藏后可以在 Storage部分查看到存储
收藏&查看&取消收藏
四、问题总结与体会
【问题总结】
-
对实验文档中 image 显示问题的思考
由于在本地编写时尝试设置 width: 100% 后未出现描述情况,故猜测可能原因为父容器( poster )宽度未设置问题,设置百分比宽度需要父容器有固定的宽度才能正常展示
-
详情页添加如下代码时未成功展示文章标题
<view class="title">{{article.title}}</view>
解决:
- 首先在 detail.js 的 onLoad函数中添加如下代码查看 get 到的数据是否正确
let id = options.id
// console.log("得到的id是:",id);
...
if(result.code == '200'){
this.setData({
article: result.news,
isAdd: false
})
// console.log("返回数据",result.news.title, result.news.add_date)
}
结果成功返回 title、add_date等参数
- 重新查看前端代码内容,发现将 “title” 错写成 “titel”
修改之后编译发现仍未展示
- 清缓存
解决 √
【体会】
本项目实现了轮播图展示、文章列表获取与指定展示、文章收藏与取消收藏功能,进一步了解了多数据展示、数据切换展示、页面传参切换、数据本地存储等实际需求的实现
学会了通过控制台打印 console.log(“注释”, 返回数据) ,自主查看文件报错的原因所在,进一步提高了前后端开发的能力