一、实验目标
1.综合所学知识创建完整的前端新闻小程序项目;
2.能够在开发过程中熟练掌握真机预览、调试等操作。
二、实验步骤
1.创建项目,选择不使用云服务。
2.页面配置。
(1)创建页面文件:
将app.json文件pages属性中的pages/logs/logs删除;
在app.json文件pages属性中继续追加pages/detail/detail和pages/my/my;
保存修改后,会在pages文件夹下自动生成detail和my目录。
(2)删除和修改文件:
删除utils文件夹中的所有内容;
删除pages文件夹下的logs目录及其内部所有内容;删除index.wxml和index.wxss中的全部代码;
删除index.js中的全部代码,并且输入关键词“page”找到Page选项按回车让其自动补全函数,如下图;
删除app.wxss中的全部代码;
删除app.js中的全部代码,并且输入关键词“app”找到App选项按回车让其自动补全函数。
(3)创建其他文件:
创建images文件夹,然后在文件管理器中找到它并将实验所需的图片保存进去;
在utils文件夹下新建common.js。
配置完成的文件目录如下:
3.视图设计。
(1)导航栏设计:
将导航栏背景改为蓝色,字体改为白色,app.json中代码如下:
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "我的新闻网",
"navigationBarBackgroundColor": "#328EEB"
},
效果如图:
(2)tabBar 设计:
在app.json中追加tarBar的相关属性代码,app.json中相关代码如下:
"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":"我的"
}
]
}
效果如图:
4.页面设计。
(1)首页设计:
使用swiper组件展现幻灯片,使用view组件展现新闻列表。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}}"></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}}'></image>
<text>◇{{news.title}}——{{news.add_date}}</text>
</view>
</view>
index.wxss中相关代码如下:
#news-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;
}
onLoad(options) {
let id=options.id
let result=common.getNewsDetail(id)
if(result.code=='200'){
this.setData({article:result.news})
}
},
然后将测试数据即幻灯片素材和临时新闻数据写入index.js的data中。index.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'}
],
//临时新闻数据
newsList:[{
id:...,
title:...,
poster:...,
add_date:...
}]
},
效果如图:
(2)个人中心页设计:
使用view组件进行整体布局,myLogin表示登录面板,mylcon表示微信头像图片,nickName表示微信昵称,myFavorites表示我的收藏。
my.wxml中相关代码如下:
<view id='myLogin'>
<block>
<image id='myIcon'src='{{src}}'></image>
<text id='nickName'>{{nickName}}</text>
</block>
<view id='myFavorites'>
<text>我的收藏(1)</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>{{news.title}}--{{news.add_date}}</text>
</view>
</view>
</view>
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;
}
app.wxss中有关新闻列表样式的代码与index.wxss中的相同。
然后在my.js的data中任意录入一条测试数据。
效果如图:
(3)新闻页设计:
首先在顶端工具栏中找到“普通编译”下拉选项,选择“添加编译模式”,然后追加对于detail页面的直接浏览效果,如下图所示:
此时预览就可以直接显示detail页面,设计完毕后再切换回“普通编译”模式即可。
然后使用view组件进行整体布局,container表示整体容器,title表示新闻标题区域,poster表示新闻图片区域,content表示新闻正文区域,add_date表示新闻日期区域。
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>
</view>
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;
}
在detail.js中的data里录入一条测试数据后效果如图:
5.逻辑实现。
(1)公共逻辑:
首先在common.js中写入需要呈现的新闻信息,然后在common.js中添加自定义函数getNewsList和getNewsDetail,用于获取新闻列表信息和指定ID的新闻正文内容,并在最后使用module.exports语句暴露函数出口。common.js中的相关代码如下:
function getNewsList() {
let list = [];
for (var i = 0; i < news.length; i++) {
let obj = {};
obj.id = news[i].id;
obj.poster = news[i].poster;
obj.add_date = news[i].add_date;
obj.title = news[i].title;
list.push(obj);
}
return list;
}
function getNewsDetail(newsID) {
let msg = {
code: '404',
news: {}
};
for (var i = 0; i < news.length; i++) {
if (newsID == news[i].id) {
msg.code = '200';
msg.news = news[i]; /
break;
}
}
return msg;
module.exports = {
getNewsList: getNewsList,
getNewsDetail: getNewsDetail
}
同时需要在各页面的js文件开头引用如下代码:
var common = require('../../utils/common.js')
(2)首页逻辑:
在index.js中的onLoad函数中获取新闻列表,并更新到data属性的newsList参数中。index.js中的相关代码如下:
onLoad: function(options) {
//获取新闻列表
let list = common.getNewsList()
//更新列表数据
this.setData({
newsList: list
})
},
效果如图:
接着为新闻列表项目添加点击事件,实现用户点击新闻标题即可跳转的功能。index.wxml中的相关代码如下:
<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>
然后在对应的detail.js文件中添加goToDetail函数的内容,代码片段如下:
goToDetail:function(e){
let id=e.currentTarget.dataset.id;
wx.navigateTo({
url:'../detail/detail?id='+id
})
},
(3)新闻页逻辑:
在新闻页接收ID编号,并查询对应的新闻内容。detail.js中的相关代码如下:
onLoad:function(options) {
let id=options.id
let result=common.getNewsDetail(id)
if(result.code=='200'){
this.setData({
article:result.news
})
}
},
点击新闻标题跳转后效果如图:
修改detail.wxml代码,追加两个button组件作为添加和取消收藏新闻的按钮,detail.wxml中的相关代码如下:
<button wx:if ='{{isAdd}}'plain bindtap ='cancelFavorites'>❤已收藏</button>
<button wx:else plain bindtap='addFavorites'>❤点击收藏</
对应的detail.wxss中的相关代码如下:
button{
width:250rpx;
height:100rpx;
margin:20rpx auto;
}
对应的detail.js中的onLond函数代码片段如下:
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.js中追加addFavorites和cancelFavorites函数,用于点击添加和取消新闻收藏。detail.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)
if(result.code=='200'){
this.setData({
article:result.news,
isAdd:false
})
}
}
},
效果如下:
(4)个人中心页逻辑:
在my.wxml中追加button组件作为登录按钮。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'bindgetuserinfo='getMyInfo'>未登录,点此登录</button>
</view>
效果如图:
在my.js中追加getMyInfo函数,代码片段如下:
getMyInfo:function(e){
let info=e.detail.userInfo;
this.setData({
isLogin:true,
src:info.avatarUrl,
nickName:info.nickName
})
},
效果如图:
在my.wxml中,将“我的收藏”后面的数字更改为动态数据效果。my.wxml中的相关代码如下:
<text>我的收藏{{num}}</text>
在detail.js中追加getMyFavorites函数,my.js中的相关代码如下:
getMyFavorites:function(){
let info=wx.getStorageInfoSync();
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);
}
this.setData({
newsList:myList,
num:num
});
},
在my.js中为getMyInfo函数追加关于getMyFavorites函数的调用。my.js中的相关代码如下:
getMyInfo:function(e){
let info=e.detail.userInfo;
this.setData({
isLogin:true,
src:info.avatarUrl,
nickName:info.nickName
})
this.getMyFavorites();
},
最后修改my.js中的onShow函数,判断如果是登录状态就刷新一下收藏列表。my.js中的相关代码如下:
onShow() {
if(this.data.isLogin){
this.getMyFavorites()
}
},
效果如图:
修改my.wxml,实现点击收藏的新闻即可跳转到新闻内容的功能。my.wxml中的相关代码如下:
<text bindtap='goToDetail'data-id='{{news.id}}'>{{news.title}}--{{news.add_date}}</text>
然后在对应的my.js中添加goToDetail函数,代码片段如下:
goToDetail:function(e){
let id=e.currentTarget.dataset.id;
wx.navigateTo({
url:'../detail/detail?id='+id
})
},
最后删除掉实验过程中录入的临时数据就完成了。
三、程序运行结果
首页:
个人主页:
新闻页:
点击收藏后:
取消一个收藏: