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

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

一、实验目标

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

二、实验步骤

1.创建项目

2.删除和修改模板文件

3.创建其他文件

4.根据个人喜好设置导航栏样式（app.json）

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTitleText": "校园新闻网",
    "navigationBarTextStyle": "white"
  },

5.底部导航栏设计

在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": "我的"
      }
    ]
  }

6.公共样式设计

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

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

7.首页设计

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

8.个人主页设计

<!--pages/my/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="getUserProfile"bindtap = 'getMyInfo' type = 'primary'>
    未登录，点击登录
  </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>

9.新闻详情页设计

<!--pages/detail/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>

10.逻辑实现

（1）首页逻辑实现

首页要完成的逻辑功能主要是更新新闻列表和跳转新闻详情页

// 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
    })
  }
})

(2)详情页逻辑

首页要完成的逻辑功能主要是添加收藏夹、取消收藏

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

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(options)
  {
    let article = this.data.article;
    wx.removeStorageSync(article.id);
    this.setData({isAdd:false});
  }
})

（3）个人主页逻辑

个人主页要完成的逻辑功能主要是获取用户信息、获取收藏列表、跳转新闻详情页

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

// pages/my/my.js
Page({

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

  // 获取用户信息
  getMyInfo: function(e) {
    wx.getUserProfile({
      desc: '展示用户信息',
      success: (res) => {
        console.log(res)
        this.getMyfavorites();
        this.setData({
          isLogin: true,
          src: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        })
      }
    })
  },

  //获取收藏列表
  getMyfavorites:function(){
    let info = wx.getStorageInfoSync();
    let keys = info.keys;
    let num = keys.length-1;
    
    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){
    //获取携带的data-id数据
    let id = e.currentTarget.dataset.id;
    //携带新闻的ID进行页面的跳转
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  }
})

三、程序运行结果

1.首页

2.个人主页

3.登录

4.登录后的个人主页

5.新闻详情页

6.收藏

7.显示收藏列表

8.从收藏列表进入新闻详情页

9.取消收藏

10.取消收藏后，收藏列表随之发生变化

四、问题总结与体会

这次试验我学会了更多编写小程序的知识，可以帮助我更好的、更漂亮的写个人项目。