移动软件开发实验5

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

一、实验目标

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

二、实验步骤

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

1.创建一个小程序，创建index，detail，my三个页面，将所需要的图片以及数据common.js放入images文件夹和utils文件夹中。

目录如图：

2.关键代码

首先页面设计，上方的导航栏，下方的tabBar设计，以及在多个页面都会用到的公共页面样式，可以放在app.wxss里

app.json

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

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%;
  line-height: 60rpx;
  font-size: 10pt;
}

主页index页面，分为上方幻灯片滚动区域，和下方的新闻列表的区域

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

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

以及点进新闻以后得详情页面，包含题目，图片，具体内容，时间以及一个是否选择收藏的按钮

detail.wxml

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

详情页面的页面设计样式

detail.wxss

/* pages/detail/detail.wxss */
/*整体容器*/
.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;
}
/*点击收藏按钮*/
button{
  width: 300rpx;
  height: 100rpx;
  margin: 20rpx auto;
}

"我的"主页，首先未登录的话有点击登录页面，已登录的话，有头像和昵称的内容，下方有对新闻的收藏列表

my.wxml

<!--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 bindtap="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

/* pages/my/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;
}
/*1-3我的收藏*/
#myFavorites{
  padding: 20rpx;
}

以下是逻辑实现：

主页面逻辑实现,重要的就是实现页面的跳转，这里用goToDetail方法实现

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'}
    ],
    newsList:[]
  },

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

详情页面逻辑实现，接收主页面的跳转，以及收藏按钮的实现，新闻数据都在common.js里，即收藏新闻，只需要往本地缓存里加入数据，取消收藏即从本地缓存里移除数据。

detail.js

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

  /**
   * 页面的初始数据
   */
  data: {
    isAdd:false,
    num:0,
    article:""
  },
  /**
   * 
   * 自定义函数--跳转新页面游览新闻内容
   */
  goToDetail:function(e)  
  {
    //获取携带的data-id数据
    let id=e.currentTarget.dataset.id;
    //携带新闻id进行跳转
    wx.navigateTo({
      url: '../detail/detail?id='+id
    })
  },
  //添加到收藏夹
  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});
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
    //获取页面跳转来时获取到的数据
    let id=options.id;
    //检查当前新闻是否在收藏夹中
    var newarticle=wx.getStorageSync(id)
    //已存在
    if(newarticle!="") {
      this.setData({
        article:newarticle,
        isAdd:true
      })
    }
    //不存在
    else{
      let result=common.getNewsDetail(id)
      //获取到新闻内容
      if(result.code=='200')
      {
        this.setData({
          article:result.news,
          isAdd:false
        });
      }
  
    }
    
  }
})

我的页面的逻辑实现，首先是要实现用户登录问题，第二就是，实现收藏列表的更新

my.js

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //临时微信用户头像和昵称
    //nickName:"",
    //src:" ",
    num:0,
    //临时收藏夹中新闻素材
    newsList:[]
  },
  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)
  {
    //获取携带的data-id的数据
    let id=e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id='+id,
    })
  },
  getMyInfo:function()
  {
     let that=this;
     wx.getUserProfile({
        desc:'获取用户信息',
        success(res){
          console.log("获取用户信息成功",res)
          that.setData({
            isLogin:true,
            src:res.userInfo.avatarUrl,
            nickName:res.userInfo.nickName
          })
        }
      })
      this.getMyFavorites();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.clearStorage()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    //如果已经登录
    if(this.data.isLogin)
    {
      //更新收藏列表
      this.getMyFavorites()
    }
  }
})

最后初始页面

三、程序运行结果

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

初始页面

点进新闻详情页

点击收藏以后

“我的”页面

点击登录

登录以后，暂时还没有收藏新闻

收藏部分新闻以后

从收藏页点击新闻进去游览查看

四、问题总结与体会

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

总结：

1.第一个遇到的问题果然还是因为打字手快，以及查看不仔细造成的拼写错误

2.第二个问题，就是获取用户头像和昵称中getUserInfo的弃用，但这次我发现就算是换成getUserProfile也仍然返回匿名用户信息

如果这样的话，很可能是因为调试基础库版本问题，在详情本地设置里面，将版本调到2.27以下，或者为了更准确，上网搜一下接口对应的可行版本

3.最后一个问题，也是困扰了我很久的，就是在登录以后收藏列表里会出现一则新闻，尽管我并没有点击收藏：

上网搜查以后，发现是缓存中又log日志，占用了一个长度空间，所以要在my.js的onLoad函数里面调用wx.clearStorage函数清除缓存即可以解决这个问题。

体会

通过这次实验，巩固了前面所学的知识，也加深了对小程序里数据本地缓存的理解。