一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；
2、能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
- 创建项目：
创建项目：news，1）在app. json文件 pages属性中继续追加 pages/detail/detail 和 pages/ my/ my;2）再创建以下两个文件夹：
- images:用于存放图片素材;
- utils:用于存放公共JS文件。
明确需求： - 首页功能需求如下：（1）首页需要包含幻灯片播放效果和新闻列表；（2）幻灯片至少要有 3 幅图片自动播放；（3）点击新闻列表可以打开新闻全文。
- 新闻页功能需求如下：（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；（3）已经收藏过的新闻也可以点击按钮取消收藏。
- 个人中心页功能需求如下：（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。（3）收藏夹中的新闻可以直接点击查看内容。（4）未登录状态下收藏夹显示为空。
- 导航栏设计：
在app.json中自定义导航栏标题和背景颜色，并追加tabBar的相关属性代码，如下：
"pages": [
"pages/index/index",
"pages/detail/detail",
"pages/my/my"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#328eeb",
"navigationBarTitleText": "我的新闻网",
"navigationBarTextStyle": "white"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/index.png",
"selectedIconPath": "images/index_blue.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "images/my.png",
"selectedIconPath": "images/my_blue.png"
}
]
} 
- 首页设计：
导入压缩包中的index和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余小时，用实际行动展现中国海大青年风采。',
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: ' 8月26日至30日，贵州省人大干部综合能力提升培训班（第三期）在中国海洋大学举办。贵州省人大常委会党组成员于杰，中国海洋大学党委常委、副校长王雪鹏出席开班式，贵州省人大常委会副秘书长、机关党组成员闵红棕主持开班式。',
add_date: '2024-08-30'},
{id: '305670',
title: '中国海洋大学开展2024级本科生集中入学教育',
poster: 'https://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg',
content: '为帮助2024级本科生尽快适应大学生活，8月27日，学校在崂山校区体育馆举行了2024级本科生集中入学教育。当天的集中教育分为心理健康教育、传染病防控教育和安全教育三个部分。学校学生工作处副处长、心理健康教育与咨询中心主任牟宏玮就“如何解决大学生的心理困惑”这一问题与同学们深入交流，引导同学们用“热爱心、平常心、进取心、同理心、初心”五心来调整自身状态，积极适应大学生活；青岛市中心医院呼吸科副主任刘加洪医生主讲《肺结核、新冠、流感等呼吸道传染病防治及校园控烟》，带领同学们认识了肺结核等呼吸道传染病的感染症状、传染途径和预防措施，以及吸烟的危害和校园控烟措施；学校党委保卫部副部长、保卫处副处长王法利以《平安海大 与你同行》为题，为2024级本科生讲授入学安全教育第一课。他用生动的案例和详实的数据，向同学们介绍了防盗、防诈骗、消防安全、交通安全、网络安全、国家安全等安全知识，教育引导同学们遵守国家法律法规和学校规章制度，主动学习安全知识，提高安全防范技能。',
add_date: '2024-08-29'}
]; - 个人中心页设计
这个板块可以注意的是“我的收藏”的新闻和首页相同,没必要重复代码、造成冗余,可以将index. wxss中新闻列表样式的相关代码挪到app. wxss 中公共使用。
修改my.wxml文件：
<!--pages/my/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" bindtap="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文件：
/* pages/my/my.wxss */
/* 登陆面板 */
#myLogin {
background-color: #328eeb;
height: 400rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
/* 1-1 头像图片 */
#myIcon {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
/* 1-2 微信昵称 */
#nickName {
color: white;
}
/* 我的收藏 */
#myFavorites {
padding: 20rpx;
} - 新闻页设计
修改detail.wxml文件：
<!--pages/detail/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文件：
/* pages/detail/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: 250rpx;
height: 100rpx;
margin: 20rpx auto;
} - 逻辑实现：
- 首页页面：展示新闻列表、点击新闻跳转逻辑不再赘述
- 个人中心页面：
1.获取微信用户信息（my.js）
getMyInfo: function(e) {
wx.getUserProfile({
desc: '获取用户信息',
success: (res) => {
console.log(res)
let info = res.userInfo;
this.setData({
isLogin: true,
src: info.avatarUrl,
nickName: info.nickName
})
// 获取收藏列表
this.getMyFavorites();
}
})
},
2.获取收藏列表(my.js)
getMyFavorites: function() {
// 读取本地缓存信息
let info = wx.getStorageInfoSync();
// 获取全部key信息
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);
} 3.浏览收藏的新闻:
与首页点击新闻跳转相似
- 新闻页页面：
1. 显示对应新闻（detail.js）
在首页中，点击新闻跳转时携带了新闻ID，新闻页需接收ID编号，并查询对应的新闻内容在获取id后，需检查当前新闻是否在收藏夹中来确认isAdd是true还是false，来使收藏按钮显示不同的文本
onLoad: function (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
})
}
}
} 2. 添加、取消新闻收藏（detail.js）
/**
* 添加到收藏夹
*/
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})
}, 三、程序运行结果
测试收藏功能和取消收藏ing:
展示首页幻灯片照片放送ing：
展示新闻详细页面ing：
四、问题总结与体会
实验问题
本次实验较为简单，没有遇到问题
收获与体会
通过本次实验，我深入学习了微信小程序的开发，特别是在从0开始模仿网易新闻实现一个基于模拟数据的简易高校新闻小程序。我掌握了如何使用 tabBar并且注意到了要控制代码冗余。
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
