24移动软件开发（第五个实验）

一、实验目标

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

二、实验步骤

1.项目创建和页面配置

app.json

"pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/my/my"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的新闻网",
    "navigationBarBackgroundColor": "#328EEB"
  },
  "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":"我的"
      }
    ]
  }

将导航栏背景色设为蓝色、字体为白色

2.页面设计

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}}" class="slide-image"></image>
    </swiper-item>
  </block>
</swiper>
<!-- 新闻列表 -->
<view id='new-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

swiper{
  height: 400rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}
#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;
}

在JS文件中的data中临时录入几个测试数据

index.js

data: {
    swiperImg:[
      {src:'http://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg'},
      {src:'http://news.ouc.edu.cn/_upload/article/images/3a/4d/73b22a9b404f93e907238f2a2325/55606b28-53b8-412f-9420-74c7a30657b6.jpg'},
      {src:'http://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg'}
    ],
    newList:[{
      id:'001',
      title:'中国海大志愿者完成第五届跨国公司领导人青岛峰会志愿服务',
      poster:'http://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg',
      add_date:'2024-8-31'
    }]
  },

2.个人中心页设计

使用<view>组件进行整体布局

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='new-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;
}
/* 1-1头像照片 */
#myIcon{
  width:200rpx;
  height: 200rpx;
  border-radius: 50%;
}
/* 1-2微信昵称 */
#nickName{
  color: white;
}
/* 我的收藏 */
#myFavorites{
  padding: 20rpx;
}

app.wxss

/* 新闻列表区域样式 */
/* 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;
}
/* 新闻标题 */
.list-item text{
  width:100%;
  display: block;
  line-height: 60rpx;
  font-size:10pt;
}

my.js

data: {
    // 临时微信用户昵称和头像
    nickName:'未登录',
    src:'/images/index.png',
    // 临时收藏夹新闻数据
    newsList:[{
      id:'001',
      title:'中国海大志愿者完成第五届跨国公司领导人青岛峰会志愿服务',
      poster:'http://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg',
      add_date:'2024-8-31'
    }]
  },

3.新闻页设计

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

为了进行布局和样式效果的预览，还需要在JS文件中data临时录入一条测试数据

detail.js

data: {
    article:{
      id:'001',
      title:'中国海大志愿者完成第五届跨国公司领导人青岛峰会志愿服务',
      poster:'http://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg',
      content:'本站讯 8月27日至29日，第五届跨国公司领导人青岛峰会在青岛国际会议中心举办。为全面做好服务保障，确保峰会顺利举行，中国海洋大学招募选派115名志愿者参与峰会志愿服务，志愿者们以饱满的热情完成本次大会的各项工作，累计服务时长3000余小时，用实际行动展现中国海大青年风采。',
      add_date:'2024-8-31'
    }
  },

3.逻辑实现

1.公共逻辑

common.js

const news = [
  {id: '001',
  title: '中国海大志愿者完成第五届跨国公司领导人青岛峰会志愿服务',
  poster: 'http://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg',
  content: ' 8月27日至29日，第五届跨国公司领导人青岛峰会在青岛国际会议中心举办。为全面做好服务保障，确保峰会顺利举行，中国海洋大学招募选派115名志愿者参与峰会志愿服务，志愿者们以饱满的热情完成本次大会的各项工作，累计服务时长3000余小时，用实际行动展现中国海大青年风采。',
  add_date: '2024-08-31'},
  {id: '002',
  title: '《贵州省人大干部综合能力提升培训班在中国海洋大学举办',
  poster: 'http://news.ouc.edu.cn/_upload/article/images/3a/4d/73b22a9b404f93e907238f2a2325/55606b28-53b8-412f-9420-74c7a30657b6.jpg',
  content: ' 8月26日至30日，贵州省人大干部综合能力提升培训班（第三期）在中国海洋大学举办。贵州省人大常委会党组成员于杰，中国海洋大学党委常委、副校长王雪鹏出席开班式，贵州省人大常委会副秘书长、机关党组成员闵红棕主持开班式。',
  add_date: '2024-08-30'},
  {id: '003',
  title: '中国海洋大学开展2024级本科生集中入学教育',
  poster: 'http://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg',
  content: '为帮助2024级本科生尽快适应大学生活，8月27日，学校在崂山校区体育馆举行了2024级本科生集中入学教育。当天的集中教育分为心理健康教育、传染病防控教育和安全教育三个部分。学校学生工作处副处长、心理健康教育与咨询中心主任牟宏玮就“如何解决大学生的心理困惑”这一问题与同学们深入交流。',
  add_date: '2024-08-29'}
];
​
//获取新闻列表
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) { //匹配新闻id编号
      msg.code = '200'; //成功
      msg.news = news[i]; //更新当前新闻内容
      break;
    }
  }
  return msg; //返回查找结果
}
​
// 对外暴露接口
module.exports = {
  getNewsList: getNewsList,
  getNewsDetail: getNewsDetail
}

然后在各个页面的JS文件顶端引用公共JS文件，引用代码如下

var common = require('../../utils/common.js')

2.首页逻辑

在页面的JS文件中的onLoad函数中获取新闻列表，并更新到data属性的newsList参数中

index.js

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

index.wxml

<!-- 新闻列表 -->
<view id='new-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>

index.js和my.js

// 自定义函数
  goToDetail:function(e){
    // 获得携带的data-id数据
    let id=e.currentTarget.dataset.id;
    // 携带新闻ID进行页面跳转
    wx.navigateTo({
      url:'../detail/detail?id='+id
    })
  },

此时已经可以点击跳转到detail页面，并且成功携带了新闻ID数据，但是仍需要在detail页面进行携带数据的接收处理才可显示正确的新闻内容

3.新闻页逻辑

首页逻辑已经实现了页面跳转并携带了新闻ID编号，现在需要在新闻页接受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

<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='cancelFavorite'>♥已收藏</button>
  <button wx:else plain bindtap='addFavorite'>♥点击收藏</button>
</view>

对应的detail.wxss页面

/* 点击收藏按钮 */
button{
  width: 250rpx;
  height: 100rpx;
  margin: 20rpx auto;
}

对应的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
        })
      }
    }
  },

6.个人中心页逻辑

修改my.wxml代码，追加<button>组件作为登录按钮，并且使用wx:if和wx:else属性让未登录时只显示按钮，登录后只显示头像和昵称。

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:function(e){
    // console.log(e.detail.userInfo)
    let info = e.detail.UserInfo;
    this.setData({
      isLogin:true,
      src:info.avatarUrl,
      nickName:info.nickName
    })
  },

my.wxml

<text>我的收藏（{{num}}）</text>

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.getStorageInfoSync(keys[i]);
      myList.push(obj);
    }
    this.setData({
      newsList:myList,
      num:num
    });
  },
  getMyInfo:function(e){
    // console.log(e.detail.userInfo)
    let info = e.detail.UserInfo;
    this.setData({
      isLogin:true,
      src:info.avatarUrl,
      nickName:info.nickName
    })
    // 获取收藏列表
    this.getMyFavorites();
  },
  onShow:function() {
    // 如果已经登录
    if(this.data.isLogin){
      this.getMyFavorites()
    }
  },

my.wxml

<!-- 收藏的新闻列表 -->
  <view id='new-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>

5.清除临时数据

需要清除的数据为：

首页（index.js）：data中临时新闻列表数据（newsList）；

新闻页（detail.js）：data中的临时新闻数据（article）；

个人中心页（my.js）：data中的临时收藏夹新闻数据（newsList）、临时昵称（nickName）以及临时头像路径（src）

三、程序运行结果

点击运行后

四、问题总结与体会

本次实验较为复杂，界面设计和相关逻辑都相较于以往实验难了很多，但根据实验手册一步步配置和实现，还是能够较好的完成的。通过本次实验了解到了swiper组件实现轮播图，能够让整体界面更加美观，以及对于wx:for的用法更加熟悉。本次实验的难点个人认为在于收藏功能的实现，这一功能设计的函数较多，很容易造成逻辑混乱导致无法实现。