一、实验目标
1、综合所学知识创建完整的前端新闻小程序项目;能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
首页功能需求如下:(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()
}
},
在进行完所有的代码编写后,需要对为了测试而录入的临时数据进行清除,以免影响整体的逻辑效果。
三、程序运行结果
四、问题总结与体会
本次实验比较复杂,实验过程中出现了许多错误,例如图片文字不显示、点击新闻不跳转、点击收藏失败等等情况,并且有些错误在网上无法查询到相关解决方法,或者显示无错误但是不能达到预期效果,这是在实验中比较费时间的部分。本次实验的收获就是积累了相关知识,为后面个人项目的制作做了一些准备工作。
原文地址:https://www.jb51.cc/wenti/3280195.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。