2024移动软件开发——实验五

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

一、实验目标

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

二、实验步骤

1. 准备阶段，导入素材

• 创建文件夹images，存放图片素材
• 创建detail页，用于查看新闻详情
• 创建my页，查看个人主页
• 创建util文件夹，准备放入common.js文件

下载https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo4_file.zip，将素材文件导入项目相应位置。

项目结构可参考上图

修改app.json，调整导航栏和设置下边栏。

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/my/my"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "高校新闻网",
    "navigationBarBackgroundColor": "#1E90FF"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "tabBar": {
    "color": "#000",
    "selectedColor": "#328KKB",
    "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": "我的"
      }
    ]
  }
}

common.js:

//模拟新闻数据
const news = [
  {id: '264698',
  title: '省退役**事务厅来校交流对接工作',
  poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
  content: '……',
  add_date: '2022-08-19'},
  {id: '304083',
  title: '《光明日报》刊发我校研究员王顺理论文章《不断提高理论素养》',
  poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg',
  content: ' ……',
  add_date: '2022-08-09'},
  {id: '305670',
  title: '我校在第八届安徽省“互联网+”大学生创新创业大赛再创佳绩',
  poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg',
  content: '……',
  add_date: '2022-08-11'}
];

//获取新闻列表
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
}

2. 修改index页

首页的主要功能是显示所有新闻，用幻灯片展示新闻图片。后续要实现点击新闻查看详情。

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

样式：

/*新闻列表区域样式*/
/*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;
}
/*新闻列表区域样式*/
/*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;
}

3. 详情页

详情页功能要实现显示静态存在common.js中新闻标题，图片和文本。实现收藏和发送评论功能。

<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 class='comment-section'>
        <input type='text' placeholder='发表评论' value='{{commentInput}}' bindinput='handleCommentInput' />
        <button bindtap='submitComment'>提交评论</button>
    </view>

    <view class='comments'>
        <block wx:for="{{comments}}" wx:key="index">
            <view class='comment-item'>
              <text>{{item.userID}}: {{item.text}}</text>
            </view>
        </block>
    </view>
</view>

样式：

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

.comment-section {
  display: flex;
  margin-top: 30rpx;
  text-align: left;
}

.comment-section input {
  width: 70%;
  padding: 10rpx;
  border: 1px solid #ddd;
  font-size: 12pt;
  line-height: 30rpx;
  border-radius: 10rpx;
  
}

.comment-section button {
  width: 25%;
  margin-left: 5%;
  padding: 10rpx;
  background-color: #007aff;
  color: white;
  font-size: 12pt;
  border-radius: 10rpx;
}

.comments {
  margin-top: 30rpx;
  text-align: left;
}

.comment-item {
  padding: 20rpx 10rpx;
  border-bottom: 1px solid #ddd;
  font-size: 12pt;
  line-height: 60rpx;
}

4. 个人主页

个人主页要实现用户登录和收藏查看。

<!-- 登录面板 -->
<view id="myLogin">
  <block wx:if="{{isLogin}}">
    <image id="myIcon" src="{{src}}"></image>
    <text id="nickName">{{nickName}}</text>
  </block>
  <button wx:else bindtap="getUserInfo">未登录，点此登录</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>

样式：

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

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

5. 实现首页向详情页的跳转

为每个新闻文本绑定goToDetail函数，修改index.js文件

index.js文件的内容：

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

  /**
   * 页面的初始数据
   */
  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'}
    ],
  },

  /**
   * 自定义函数--跳转新页面浏览新闻内容
   */
  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
    })
  },
})

6. 实现收藏功能和个人主页收藏显示

为收藏按钮绑定addFavorites和cancelFavorites函数

 addFavorites:function(options) {

  let article = this.data.article;

  wx.setStorageSync(article.id, article);

  this.setData({isAdd:true});

 },

  cancelFavorites: function(options) {

   let article = this.data.article;

  // console.log(article);

   wx.removeStorageSync(article.id);

   this.setData({isAdd:false})

  },

my.js:

// pages/my/my.js
var common = require("../../utils/common")
Page({
  //获取授权信息
  getUserInfo: function(){
    wx.getUserProfile({
      desc: '获取授权信息',
      success: (res) => {
        let info = res.userInfo
        this.setData({
          isLogin: true,
          src: info.avatarUrl,
          nickName: info.nickName
        })
        this.getMyFavorites()
      }
    })
  },

  //跳转到详情页
  goToDetail: function(e){
    let id = e.currentTarget.dataset.id;

    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
  },

  getMyFavorites: function(){
    //读取所有本地信息
    let info = wx.getStorageInfoSync()
    
    if (!info){
      console.log("未获取到信息")
    } else {
      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
      })
    }
  },


  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log(this.data.isLogin)
    console.log("调用onShow事件")
    if (this.data.isLogin){
      //更新收藏列表
      this.getMyFavorites()
      console.log("更新数据")
    }
  },

})

7. 额外功能：新闻评论

类似于上一个实验的发送弹幕功能，定义函数，读取文本框的文本，并用按钮将文本发送。每个评论会生成一个随机的用户ID，实现匿名发送

detail.js:

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    article: {
      id: '264698',
      title: '省退役**事务厅来校交流对接工作',
      poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
      content: ' ……',
      add_date: '2022-08-19'
    },
    commentInput: '',
    comments: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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
        })
      }
    }

    // 从本地存储中获取评论
    let comments = wx.getStorageSync('comments_' + id) || [];
    this.setData({ comments });
  },

  addFavorites:function(options) {
    let article = this.data.article;
    wx.setStorageSync(article.id, article);
    this.setData({isAdd:true});
  },

   cancelFavorites: function(options) {
     let article = this.data.article;
    //  console.log(article);
     wx.removeStorageSync(article.id);
     this.setData({isAdd:false})
   },

   handleCommentInput: function(e) {
    this.setData({ commentInput: e.detail.value });
  },

  generateRandomUserID: function() {
    return 'user_' + Math.floor(Math.random() * 10000);
  },
  // 提交评论
  submitComment: function() {
    let { commentInput, comments, article } = this.data;
    if (commentInput.trim()) {
      let userID = this.generateRandomUserID();
      comments.push({ userID, text: commentInput });
      this.setData({ comments, commentInput: '' });
      wx.setStorageSync('comments_' + article.id, comments); // 将评论存储在本地
    }
  },

})

三、程序运行结果

1. 查看首页新闻

2. 点击新闻后跳转到新闻详细页

3. 登录账号，获取头像和昵称

4. 收藏新闻和发送评论

5. 回到个人主页查看收藏

四、问题总结与体会

问题总结： 在处理新闻数据和评论功能时，初期对本地存储的使用不够熟悉，导致数据存储和读取有些不稳定。通过调试和优化代码，解决了这些问题。

体会： 加深了对前端开发流程的理解，不断修正和调整代码是开发过程中不可或缺的一部分。