移动软件开发-高校新闻网

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

一.实验准备：

提前下载好commom.js、图片文件以及Index页面的代码，下载地址：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip

二.项目需求：

本项目需要三个页面，即首页，新闻页和个人中心页。

首页功能需求如下：（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.首页详情：

在这里我们需要循环的展示幻灯片内容和新闻列表，所有我们在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}}'></image>
    <text>${{news.title}}--{{news.add_date}}</text>
  </view>
</view>

并且修改相关的样式：

/*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中的代码如下：

<view id='myLogin'>
  <block>
    <image id='myIcon' src='{{src}}'></image>
    <text id='nickName'>{{nickName}}</text>
  </block>
</view>
<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>

相关代码的样式如下：

#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文件里面进行配置，

首先就是它的布局代码：

<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>

然后是相关的样式：

.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文件，里面包含了三条临时新闻信息和获取新闻信息，新闻id的函数。

var common = require('../../utils/common.js') //引用公共JS文件

在首页我们主要实现两个功能，一是展示新闻列表，二是我们点击每一条新闻可以显示详情。

我们在js文件中追加如下代码，用于获取新闻列表并且更新列表数据：

onLoad: function(options) {
​
  //获取新闻列表
​
  let list = common.getNewsList()
​
  //更新列表数据
​
  this.setData({
​
   newsList: list
​
  })
​
 },

当用户点击每一条新闻时，跳转显示详情：

在index.wxml文件的<text>组件中加一个点击事件

<text bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}——{{news.add_date}}</text>

然后在对应的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})
​
•    }
​
  },

接下来我们要实现添加或者取消收藏的功能：

我们需要添加两个<button>组件作为添加和取消收藏的按钮，并使用wx:if和wx:else使其每次只能存在一个。

对应的detail.wxml文件修改如下:

<button wx:if='{{isAdd}}'plain bindtap='cancelFavorites'>已收藏</button>
​
 <button wx:else plain bindtap='addFavorites'>点击收藏</button>

对应的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中做如下修改：

<view id='myLogin'>
  <block wx:if='{{isLogin}}'>
    <image id='myIcon' src='{{src}}'></image>
    <text id='nickName'>{{nickName}}</text>
  </block>
  <button wx:else bindtap="getMyInfo">未登录，点击登录</button>
</view>

然后在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<num;i++)
​
•    {
​
•      let obj = wx.getStorageSync(keys[i]);
​
•      myList.push(obj);
​
•    }
​
•    this.setData({
​
•      newsList:myList,
​
•      num:num-1
​
•    });
​
  },

然后在获取微信头像的函数里面调用这个函数，当获取到微信头像时，同时显示收藏列表。

3.3：浏览收藏的新闻：

这里的功能跟首页显示新闻信息一样，首先my.wxml里面的修改如下：

<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}}'></image>
      <text bindtap='goToDetail' data-id='{{news.id}}'>${{news.title}}——{{news.add_date}}</text>
    </view>
  </view>
</view>

然后在对应的js文件里面追加goToDetail函数，

goToDetail:function(e){
​
•    let id = e.currentTarget.dataset.id;
​
•    wx.navigateTo({
​
•      url:'../detail/detail?id='+id
​
•    })
​
  },

效果图如下：

三、程序运行结果

最后源码地址：https://github.com/g26g/lab4-xinwenwang.git