咨询热线：
400-023-4936
400-023-4936
球王会一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
球王会一.实验准备：
提前下载好commom.js、图片文件以及Index页面的代码，下载地址：
二.项目需求：
球王会本项目需要三个页面，即首页jsp 点击新闻标题显示新闻内容，新闻页和个人中心页。
首页功能需求如下：（1）首页需要包含幻灯片播放效果和新闻列表；（2）幻灯片至少要有3幅图片自动播放；（3）点击新闻列表可以打开新闻全文。
新闻页功能需求如下：（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；（3）已经收藏过的新闻也可以点击按钮取消收藏。
球王会个人中心页功能需求如下：（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。（3）收藏夹中的新闻可以直接点击查看内容。（4）未登录状态下收藏夹显示为空。
三.页面的初始文件创建与修改：
首先：
然后：
最后：
创建两个文件夹，一个是images文件夹，用于存放图片素材，第二个是utils文件夹，用于存放公共js文件。
四.视图设计：
1.导航栏设计：
我们把导航栏的背景颜色改为蓝色，字体颜色改为白色。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#328EEB",
"navigationBarTitleText": "我的新闻网",
"navigationBarTextStyle":"white"
},2.tabBar设计：
设计首页和个人中心页：
"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":"我的"
}
]
},页面效果图：
3.首页详情：
在这里我们需要循环的展示幻灯片内容和新闻列表jsp 点击新闻标题显示新闻内容，所有我们在index.wxml中加上如下代码：
${{news.title}}--{{news.add_date}}
并且修改相关的样式：
/*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;
}
然后在js文件里面放上几条临时新闻信息：
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'}
],
},并在page页面前面引用一个公共js文件，里面存放了一些新闻数据和一些相关的函数：
var common = require('../../utils/common.js') //引用公共JS文件大致的效果图如下：
4.个人中心页详情：
在这里我们主要需要进行登录，登录之后我们需要显示我们已经收藏过的新闻列表。
在my.wxml中的代码如下：
{{nickName}}
我的收藏（1）
${{news.title}}--{{news.add_date}}
相关代码的样式如下：
#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;
}对个人中心的新闻列表，它的样式和首页的新闻列表样式一样，所以这里app.wxss中的代码样式如下：
#news-list{
min-height:600rpx;
padding:15rpx;
}
.list-item{
display:flex;
flex-direction: row;
border-bottom:1rpx soild gray;
}
.list-item image{
width:230rpx;
height:150rpx;
margin:10rpx;
}
.list-item text{
width:100%;
display:block;
line-height:60rpx;
font-size:10pt;
}然后我们在common.js里面找一条临时新闻放入my.js文件里面，
大致的效果图：
5.点击的新闻页面的详情配置：
点击进来的新闻页面我们放在detail文件里面进行配置，
首先就是它的布局代码：
{{article.title}}
{{article.content}}
时间:{{article.add_date}}
然后是相关的样式：
.container{
padding:15rpx;
text-align:center;
}
.title{
font-size:14pt;
line-height:80rpx;
}
.poster image{
width:700rpx;
}
.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;
}最后在detail.js文件里面找一条临时新闻信息，用于展示临时新闻。
效果图如下：
五.逻辑实现：
1.首页逻辑实现：
我们先要给每一个页面的js文件在开头都引用一个公共js文件，里面包含了三条临时新闻信息和获取新闻信息jsp 点击新闻标题显示新闻内容，新闻id的函数。
var common = require('../../utils/common.js') //引用公共JS文件在首页我们主要实现两个功能，一是展示新闻列表jsp 点击新闻标题显示新闻内容，二是我们点击每一条新闻可以显示详情。
我们在js文件中追加如下代码，用于获取新闻列表并且更新列表数据：
onLoad: function(options) {
//获取新闻列表
let list = common.getNewsList()
//更新列表数据
this.setData({
newsList: list
})
},当用户点击每一条新闻时，跳转显示详情：
在index.wxml文件的组件中加一个点击事件
◇{{news.title}}——{{news.add_date}} 然后在对应的detail.js文件加入点击事件函数：
goToDetail: function(e) {
//获取携带的data-id数据
let id = e.currentTarget.dataset.id;
//携带新闻id进行页面跳转
wx.navigateTo({
url: '../detail/detail?id=' + id
})
},效果图：
2.新闻页逻辑：
在新闻页我们主要接收到点击后的新闻ID，然后正确显示对应的新闻内容，如果我们想要收藏，还可以实现一个收藏功能。
在detail.js文件里面添加如下代码，能实现点击后显示正确的新闻：
onLoad: function (options) {
• let id=options.id
• let result = common.getNewsDetail(id)
• if(result.code==200){
• this.setData({article:result.news})
• }
},接下来我们要实现添加或者取消收藏的功能：
我们需要添加两个组件作为添加和取消收藏的按钮jsp 点击新闻标题显示新闻内容，并使用wx:if和wx:else使其每次只能存在一个。
对应的detail.wxml文件修改如下:
对应的wxss文件样式如下：
button{
width:250rpx;
height:100rpx;
margin:20rpx auto;
}
js文件修改如下：
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)//获取新闻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});
},页面效果如下：
3.个人中心页逻辑：
3.1：在这里我们需要设置一个登录按钮，登录之后我们还需要获取到微信的头像和昵称.
设置登录按钮，在my.wxml中做如下修改：
{{nickName}}
然后在js文件中追加getMyInfo函数，获取头像和昵称：
getMyInfo: function()
{
• var that = this;
• wx.getUserProfile({
• desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
• success: (res) => {
• console.log("获取用户信息成功", res);
• that.setData({
• isLogin:true,
• src: res.userInfo.avatarUrl,
• nickName: res.userInfo.nickName
• })
• //获取新闻列表
• this.getMyFavorites()
• },
• fail: res => {
• console.log("获取用户信息失败", res)
• }
• })
},效果如下：
3.2：然后我们需要获取收藏列表：
在my.wxml文件中将数字更改为动态数据：
然后在my.js文件中追加一个获取真正收藏列表的函数，主要将获取到的新闻信息进行更新，
getMyFavorites:function(){
• let info = wx.getStorageInfoSync();
• let keys = info.keys;
• let num = keys.length;
• let myList = [];
• for(var i=0;i然后在获取微信头像的函数里面调用这个函数，当获取到微信头像时，同时显示收藏列表。
3.3：浏览收藏的新闻：
这里的功能跟首页显示新闻信息一样，首先my.wxml里面的修改如下：
我的收藏({{num}})
${{news.title}}——{{news.add_date}}
然后在对应的js文件里面追加goToDetail函数，
goToDetail:function(e){
• let id = e.currentTarget.dataset.id;
• wx.navigateTo({
• url:'../detail/detail?id='+id
• })
},效果图如下：
三、程序运行结果
球王会最后源码地址：
Copyright © 2022.球王会 版权所有 网站地图 皖ICP备82357419号 XML地图 球王会模板
