一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
此次新闻网一共需要3个页面，即首页、新闻页和个人中心页。
首页功能需求如下：（1）首页需要包含幻灯片播放效果和新闻列表；（2）幻灯片至少要有3幅图片自动播放；（3）点击新闻列表可以打开新闻全文。
新闻页功能需求如下：（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；（3）已经收藏过的新闻也可以点击按钮取消收藏。
个人中心页功能需求如下：（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。（3）收藏夹中的新闻可以直接点击查看内容。（4）未登录状态下收藏夹显示为空。
项目创建及配置
首先创建项目，根据文档要求删除相关文件及代码，再创建新的自定义文件用于实验。
视图设计
首先对小程序的导航栏进行设置，更改其标题和背景颜色。
"window": {
"navigationBarBackgroundColor":"#328EEB",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我的新闻网",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
首页和中心也需要以tabBar的形式展示，可以点击tab图标互相切换。代码如下
"tabBar": {
"color": "#000000",
"selectedColor": "#328EEB",
"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"
}
]
}
首页设计包括两方面，分别是顶部的幻灯片滚动和下边的新闻列表。幻灯片部分用swiper组件来实现，循环展示幻灯片内容，设置好相关样式。新闻列表部分用<view>容器，内部也使用数组循环。
//index.wxml
<!--幻灯片-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
<view wx:for="{{swiperImg}}" wx:key="swiper{{index}}">
<swiper-item>
<image src="{{item.src}}"></image>
</swiper-item>
</view>
</swiper>
<!--新闻列表-->
<view class="news-list">
<view class="news-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
<image src="{{item.poster}}"></image>
<text bindtap = 'goToDetail' data-id='{{news.id}}'>{{item.title}}---{{item.add_date}}</text>
</view>
<button plain="true">加载更多</button>
</view>
个人中心页设计主要包括两个模块，登录面板和“我的收藏”。登录面板用于展示用户的头像和昵称，“我的收藏”用于显示本地的新闻列表。使用<view>组件进行整体布局。
//my.wxml
<!--登录页面-->
<view class="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 class="myFavorite">
<text>我的收藏({{num}})</text>
<view class="news-list">
<view class="news-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
<image src="{{item.poster}}"></image>
<text bindtap="goToDetail" data-id="{{item.id}}">{{item.title}}---{{item.add_date}}</text>
</view>
</view>
</view>
//my.wxss
/*登录页面*/
.myLogin{
height: 400rpx;
background-color: #328EEB;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.myLogin image{
height: 200rpx;
width: 200rpx;
border-radius:50%;
}
.myLogin text{
color: white;
}
/*收藏列表*/
.myFavorite{
padding:20rpx;
}
新闻页用于给用户浏览全文，所以主要包括新闻标题、新闻图片、新闻正文和新闻日期。使用<view>组件进行整体布局。
//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.js中添加临时数据，预览图如下。
这样所有页面就设计完成了。
逻辑实现
公共逻辑
假设已经获取到了数据,将其放在公共JS文件(utils/common.js)中(文件在压缩文件中)。完成了公共逻辑处理的部分之后，需要在各页面的JS文件顶端引用公共JS文件,引用代码如下:
var common = require( '../ ../utils/common.js') //引用公共JS文件
首页逻辑
首页有两个功能实现，一个是展示新闻列表，另一个是点击新闻标题可以跳转对应的内容进行浏览。
新闻列表展示代码如下
onLoad(options) {
//获取新闻列表
let list = common.getNewsList()
//更新列表数据
this.setData({newsList:list})
},
点击跳转内容需要添加一个自定义触摸函数goToDetail,并且使用data-id属性携带了新闻ID编号。
然后在对应的 detail.js文件中添加 goToDetail 函数的内容。
/*自定义函数--跳转新页面浏览新闻数据*/
goToDetail:function(e){
//获取携带的data-id数据
let id = e.currentTarget.dataset.id;
//携带新闻ID进行页面跳转
wx.navigateTo({
url: '../detail/detail?id=' + id
})
},
新闻页逻辑
新闻页主要有两个功能，一是显示对应新闻，二是可以添加、取消新闻收藏。
代码如下
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,
isAdd:false
})
}
}
},
点击收藏和取消收藏需要在detail.wxml中添加两个button组件作为按钮，并且使用if-else属性让其每次只能出现一个。
<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>
个人中心页逻辑
个人中心页逻辑主要包括三个功能，一是获取微信用户信息，二是获取收藏列表，三是浏览收藏的新闻。
获取微信用户信息在my.wxml页面中修改<button>组件代码，追加获取用户信息事件，接着在detail.js文件中追加getMyFavorites函数，用于展示真正的新闻收藏列表。在getMyInfo函数中追加getMyFavorites函数的调用。
//my.js
// 获取用户信息
getMyInfo: function(e) {
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)
}
})
},
//更新num
getMyFavorites:function(){
let info = wx.getStorageInfoSync() //读取本地缓存信息
let keys = info.keys //获取全部key信息
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-1
})
},
现在从首页中浏览文章，点击收藏后，便可以在个人中心页中看到收藏的文章了。为了考虑登录成功后用户可以手动更改新闻的收藏状态，修改my.js中的onShow函数，判断是登录状态就刷洗一下收藏列表。
onShow:function() {
if(this.data.isLogin){
this.getMyFavorites()
}
},
浏览收藏的新闻和首页的点击跳转新闻内容功能类似，不再赘述。
在进行完所有的代码编写后，需要对为了测试而录入的临时数据进行清除，以免影响整体的逻辑效果。
三、程序运行结果
四、问题总结与体会
本次实验比较复杂，实验过程中出现了许多错误，例如图片文字不显示、点击新闻不跳转、点击收藏失败等等情况，并且有些错误在网上无法查询到相关解决方法，或者显示无错误但是不能达到预期效果，这是在实验中比较费时间的部分。本次实验的收获就是积累了相关知识，为后面个人项目的制作做了一些准备工作。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。