一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；2、能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
准备工作
本次实验需要三个页面，因此在pages中除index（首页）之外还需创建detail（新闻页面）和my（个人中心页面）两个文件，同时除pages外还需要images文件夹储存图片，utils文件夹存放公共js文件，创建好各个文件后如图所示。
视图设计
首先修改导航栏，修改为背景为蓝色，字体为白色。
然后在app.json中添加tabBar属性，代码和效果如下图所示，可以看到最下方出现了“首页”和“我的”两个按钮，点击后可以切换页面：
然后设计首页，上面是一个<swiper>组件，用来循环放映新闻图片，下方是新闻列表，用来显示新闻标题和图片，点击后可以查看该新闻。
代码如下：
<!--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}}" class="slide - 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}}" />
<text bindtap='goToDetail' data-id="{{news.id}}">◇{{news.title}}
-- {{news.add_date}}</text>
</view>
</view>
/* pages/index/index.wxss */
swiper{
height: 400rpx;
}
swiper image{
width: 100%;
height: 100%;
}
注：因为我的页面和首页页面都用到了同样的新闻列表，因此将列表的属性写在app.wxss中公共使用，如下所示：
#new-list{
min-height: 600rpx;
padding: 15rpx;
}
.list-item{
display: flex;
flex-direction: row;
border-bottom: 1rpx solid gray;
}
.list-item image{
width: 230rpx;
height: 150rpx;
margin: 10rpx;
}
.list-item text{
width: 100%;
line-height: 60rpx;
font-size: 10pt;
}
效果如下图：
然后是个人中心页面，这个页面也是由两部分构成，上半部分为登录部分，下半部分用来显示已经收藏的新闻。
代码如下：
<!--pages/my/my.wxml-->
<view id="myLogin">
<block wx:if="{{isLogin}}">
<image src="{{src}}" id="myIcon" />
<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}}" />
<text bind:tap="goToDetail" data-id="{{news.id}}">◇{{news.title}}
-- {{news.add_date}}
</text>
</view>
</view>
</view>
/* 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%;
}
#nickName{
color: white;
}
#myFavorites{
padding: 20rpx;
}
效果如下图：
最后是新闻页面设计，新闻页面包含了四部分，从上到下依次是标题，图片，正文，日期。在设计这一页面的时候，由于最开始并没有写跳转到detail的代码，所以先点击上方的普通编译右侧的小三角，选择添加编译模式并将路径设置为pages/detail/detail，这样可以显示该页面，方便调试。
代码如下：
<!--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>
<!-- <rich-text nodes="{{article.content.replace(`\n`,`<br \/>`)}}"/> -->
<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>
/* pages/detail/detail.wxss */
.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;
white-space: pre-wrap;
}
.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;
}
效果如下图（这里为了将四部分全部显示出来，删除了部分新闻内容）：
逻辑实现
common.js直接使用了压缩包中所提供的，其中有两个关键函数，分别为获取新闻列表和获取新闻内容。
先实现首页逻辑，首页需要实现的功能有新闻列表展示和点击跳转新闻内容。前者需要修改onLoad函数来实现，后者先在wxml中为<text>添加bindtap属性并在js中自定义一个goToDetail函数用于跳转，即<text bindtap='goToDetail' data-id="{{news.id}}">◇{{news.title}} -- {{news.add_date}}</text>。
新闻列表展示中onLoad函数如下：
onLoad: function (options) {
let list = common.getNewsList()
this.setData({newsList:list})
},
点击跳转新闻内容中自定义的goToDetail函数如下：
goToDetail:function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id
})
},
然后是新闻页面，这一页面中也需要实现两个逻辑，首先是显示对应新闻，然后是添加/取消收藏。前者需要接收主页发送的id编号并查询对应内容，因此需要修改onLoad函数来进行实现，后者则是需要先在wxml中添加两个按钮点击收藏和已收藏，并通过wx:if和wx:else属性使得这两个按钮只会存在一个，同时继续修改onLoad函数并自定义addFavorites和cancelFavorites函数，这里给出最终结果：
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
});
},
效果则如下图所示：
最后是个人中心页，这一页需要实现获取微信用户信息、获取收藏列表、浏览收藏的新闻三个功能，第一个功能现在wxml中使用wx:if和wx:else来让上半部分界面显示头像和名称或未登录，点此登录，具体则使用到了自定义的getMyInfo函数。第二个功能用到了自定义的getMyFavorites函数并在getMyInfo中调用该函数，同时修改onShow函数，判断如果是登陆状态就刷新一下收藏列表。最后一部分则使用了自定义的goToDetail函数，与首页中使用的基本相同。
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 (let index = 0; index < num; index++) {
let obj = wx.getStorageSync(keys[index]);
myList.push(obj);
}
this.setData({
newsList: myList,
num: num
})
},
goToDetail:function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id='+id
})
},
onShow() {
if(this.data.isLogin){
this.getMyFavorites()
}
},
效果图如下（这里我的收藏在登录前就有一个的原因是没有删除实验中使用的临时数据）：
最后删除临时数据。
三、程序运行结果
四、问题总结与体会
经过这次实验，我学会了如何设计多个页面以及如何跳转进别的页面中，能够综合所学知识创建完整的前端新闻小程序项目并且能够在开发过程中使用真机预览、调试等操作。
扫一扫
1828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
