2024年夏季《移动软件开发》实验报告五

LinJason.OUC

已于 2024-09-02 17:46:34 修改

阅读量368

点赞数 2

文章标签：微信小程序

于 2024-09-02 17:19:12 首次发布

本文链接：https://blog.csdn.net/lingard_wxck/article/details/141824812

版权

2024年夏季《移动软件开发》实验报告

姓名：林佳欣学号：22020007054

姓名和学号？	林佳欣，22020007054
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验5：高校新闻网
博客地址？	LinJason.OUC-CSDN博客
Github仓库地址？	WechatMiniProgram: 2024年中国海洋大学移动软件开发作业 (gitee.com)

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1、导航栏设计

在app.json中输入代码

"pages": [
    "pages/index/index",//首页
    "pages/my/my",//个人中心
    "pages/detail/detail"//新闻详细页
  ],
"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、公共逻辑

在utils/common.js中写入代码，因为首页和个人收藏都需要获取新闻的接口

//模拟新闻数据
const news = [
  {id: '264698',
  title: '中国海大志愿者完成第五届跨国公司领导人青岛峰会志愿服务',
  poster: 'https://news.ouc.edu.cn/_upload/article/images/dd/19/ede76a4a4ebdb1d3ab278a12fdd8/9bb154f8-e33b-421a-b453-82c758a32405.jpg',
  content: ' 8月27日至29日，第五届跨国公司领导人青岛峰会在青岛国际会议中心举办。为全面做好服务保障，确保峰会顺利举行，中国海洋大学招募选派115名志愿者参与峰会志愿服务，志愿者们以饱满的热情完成本次大会的各项工作，累计服务时长3000余小时，用实际行动展现中国海大青年风采。前期，学校团委根据峰会安排及各工作组志愿者需求，面向崂山校区15个学部、学院（中心）进行志愿者选拔招募，并邀请青岛团市委、峰会组委会相关专家对志愿者开展了峰会情况介绍、志愿服务礼仪与规范、大型赛会志愿服务知识与技能等系统培训。峰会举办期间，学校志愿者在4个工作组分别参与会务服务、媒体接待、酒店接待、交通抵离、青企峰会、人力资源高质量发展对话会等15个组别的工作任务。中国海大青年志愿者用耐心热心的服务态度、吃苦耐劳的坚韧品质、蓬勃向上的服务热情赢得广泛赞誉。恰逢学校百年华诞，此次峰会的志愿服务为志愿者和学校志愿服务工作提供了宝贵经验，也为学校建校100周年系列庆祝活动志愿服务夯基蓄力。学校团委将继续以服务大型赛会为依托，完善志愿服务工作体系，引领学生在志愿服务中成长成才，挺膺担当。',
  add_date: '2024-08-31'},
  {id: '304083',
  title: '该新闻含敏感元素，可自行替换标题',
  poster: 'https://news.ouc.edu.cn/_upload/article/images/3a/4d/73b22a9b404f93e907238f2a2325/55606b28-53b8-412f-9420-74c7a30657b6.jpg',
  content: ' 该新闻含敏感元素，可自行替换正文',
  add_date: '2024-08-30'},
  {id: '305670',
  title: '该新闻含敏感元素，可自行替换标题',
  poster: 'https://news.ouc.edu.cn/_upload/article/images/94/9e/509119874e5287e8c56ef708865b/11604054-e936-468b-a50e-a4233e475a53.jpg',
  content: '该新闻含敏感元素，可自行替换正文',
  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
}

3、首页设计

在index.wxml中输入代码，设计首页幻灯片滚动效果和新闻列表

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

在index.wxss中输入代码，设计首页幻灯片滚动效果和新闻列表的样式

/*swiper区域样式*/
/*1-1swiper组件*/
swiper{
  height: 400rpx;
}
/*1-2swiper中的图片*/
swiper image{
  width: 100%;
  height: 100%;
}
/*新闻列表区域样式*/
/*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;
}

在index.js中写入代码，实现首页的逻辑实现

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

  /**
   * 页面的初始数据
   */
  data: {
    //幻灯片素材，一共三张图片
    swiperImg: [
      {src: 'https://news.ouc.edu.cn/_upload/article/images/12/8b/de7f4963476da934b54aebfb8f97/36529309-d65e-48cb-ba3f-016cac9f4d19.jpg'},
      {src: 'https://news.ouc.edu.cn/_upload/article/images/59/30/d19095614e568f55a5f692311218/bad85368-4b34-4c47-a9e4-737e543d3bf5.jpg'},
      {src: 'https://news.ouc.edu.cn/_upload/article/images/73/48/f5ef2ba040c384d2a2b76c840ba2/27a4e591-9e1b-49e9-90c7-b8326690e2fd.jpg'}
    ],
  },

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //获取新闻列表
    let list = common.getNewsList()
    //更新列表数据
    this.setData({
      newsList: list
    })
  },
  //其它生命周期函数
  onReady: function() {},
  onShow: function() {},
  onHide: function() {},
  onUnload: function() {},
  onPullDownRefresh: function() {},
  onReachBottom: function() {},
  onShareAppMessage: function() {}
})

4、个人中心页设计

在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>
<!-- 用户收藏列表区域 -->
<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>

在my.wxss中设计登录面板的样式，且收藏的新闻列表与index.wxss中相同，将index.wxss中的相关代码挪到app.wxss中公用

my.wxss:

/* pages/my/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%;
 }
  /*1-2 微信昵称*/
  #nickName{
  color: white;
  }
  /*我的收藏*/
  #myFavorites{
  padding: 20rpx;
  }

app.wxss:

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

在my.js中写入代码，完成个人中心的逻辑实现，实现登录与读取本地缓存获得收藏的新闻

// pages/my/my.js
// 引入公共工具模块
var common = require('../../utils/common')

// 创建页面实例
Page({
  data: {
    // 收藏数量初始为0
    num: 0
  },
  // 获取用户信息并更新登录状态
  getMyInfo: function(e) {
    // 获取用户信息对象
    let info = e.detail.userInfo;
    // 更新页面数据，包括登录状态、用户头像和昵称
    this.setData({
      isLogin: true,
      src: info.avatarUrl,
      nickName: info.nickName
    })
    // 获取并更新用户收藏列表
    this.getMyFavorites();
  },

  // 获取用户收藏的新闻列表
  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
    });
  },

  // 跳转到新闻详情页面
  goToDetail: function(e) {
    // 获取点击的新闻ID
    let id = e.currentTarget.dataset.id;
    // 跳转到新闻详情页面，并传递ID参数
    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
  },

  onShow: function() {
    // 页面显示时执行的操作，如果用户已登录，则获取收藏列表
    if (this.data.isLogin) {
      this.getMyFavorites()
    }
  },
  //其它生命周期函数  
  onLoad: function(options) {},
  onReady: function() {},  
  onHide: function() {},
  onUnload: function() {},
  onPullDownRefresh: function() {},
  onReachBottom: function() {},
  onShareAppMessage: function() {}
})

5、新闻详细页设计

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

button{
  width: 20rpx;
  height: 100rpx;
  margin: 20rpx auto;
}

在detail.js中写入代码，实现从上个页面获取新闻的标题、图片、正文、时间，判断有无收藏，点击收藏会写入本地缓存的功能

// pages/detail/detail.js
var common = require('../../utils/common')
Page({
  data: {

  },
  onLoad(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
        })
      }
    }
  },
  //添加收藏
  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 });
  },
  //其它生命周期函数  
  onReady() {},
  onShow() {},
  onHide() {},
  onUnload() {},
  onPullDownRefresh() {},
  onReachBottom() {},
  onShareAppMessage() {}
})

三、程序运行结果

列出程序的最终运行结果及截图。

在这里插入图片描述

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

问题：在使用<button wx:else open-type="getUserInfo"bindgetuserinfo="getMyInfo">未登录，点此登录</button>登录的时候，无法获取用户的昵称和头像

解决方法：在详细–>本地设置–>调试基础库中将版本修改成2.20.3，即可获取用户头像和昵称

收获和体会：在这次的实验中，我体会到用户收藏的一种存储到本地缓存的方式，而不是数据库，当然用数据库也能够双重保险；学会了当多个界面使用同一种逻辑实现的时候，可以调用utils文件夹中的方法，减少代码重复编写；更加深入体会调用外界Url呈现在小程序中的功能；了解如何通过onLoad（）函数获取上一个页面的某一个新闻信息以便详细呈现，以及页面跳转时候的传参方式；此外对于样式的编写中，也学会幻灯片以及底部栏的设计，更加美观和实用。