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

姓名？	王建享
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验5：高效新闻网
博客地址？	2024年夏季《移动软件开发》实验5报告-CSDN博客
Gitee仓库地址？	miniNewsApp:

一、实验目标

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

二、实验步骤

实现的额外功能

• 使用了云开发，利用数据库获取对应的数据

• 摒弃了文档中已经被弃用的用户数据获取，修改为了新版本的用户信息获取方式

创建一个微信小程序

创建一个数据库的数据集合，并为其添加数据

添加页面组件

<!--pages/user/user.wxml-->
<view id='myLogin'>
  <block >
    <button open-type="chooseAvatar" bindchooseavatar="changeHead" class="avatarButton">
          <image class="myIcon" src="{{headImg}}" mode="widthFix"/>
      </button>
    <input type="nickname" placeholder="微信昵称"/>
  </block>
</view>
<view id='myFavorites'>
  <text>我的收藏{{num}}</text>
  <view id='news-list'>
    <view class='list-item' wx:for='{{newsList}}' wx:key='{{item.id}}'>
      <image src='{{item.poster}}'></image>
      <text bind:tap="goToDetail" data-id="{{item.id}}">{{item.title}}--{{item.add_date}}</text>
    </view>
  </view>
</view>
​
<!--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>
​
<!--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 bind:tap='cancelFavorite'>已收藏</button>
  <button wx:else plain bind:tap='addFavorite'>点击收藏</button>
</view>
​

编写对应样式

/**index.wxss**/
#news-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;
}
swiper{
  height:400rpx;
}
swiper image{
  height: 100%;
  width: 100%;
}
​
/**user.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%;
}
#nickName{
  color: white;
}
#myFavorites{
  padding: 20rpx;
}
.avatarButton{
  padding: 0;
  border-radius: 50%;
  width: 200rpx !important;
  height: 200rpx;
  align-items: center;
  justify-content: center;
}
​
/**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: 250rpx;
  height: 100rpx;
  margin:20rpx auto;
}
​
/**app.wxss**/
#news-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%;
  display: block;
  line-height: 60rpx;
  font-size: 10pt;
}

编写页面逻辑

下面对页面逻辑的关键部分进行分析，详细代码见上方gitee链接

获取云开发数据库中数据部分

const db = wx.cloud.database();
db.collection('news').where({}).get().then(res =>{
  this.setData({
    newsList:res.data
  })
})

获取缓存中数据部分

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

添加以及清除缓存

addFavorite:function(options){
    let article = this.data.article;
    wx.setStorageSync(article.id, article);//添加缓存
    this.setData({
      isAdd:true
    })
  },
  cancelFavorite:function(){
    let article = this.data.article;
    wx.removeStorageSync(article.id);//清除缓存
    this.setData({
      isAdd:false
    })
  },

获取用户头像（需用户选择使用微信头像作为头像,配合wxml中的button使用）

<block >
    <button open-type="chooseAvatar" bindchooseavatar="changeHead" class="avatarButton">
          <image class="myIcon" src="{{headImg}}" mode="widthFix"/>
      </button>
    <input type="nickname" placeholder="微信昵称"/>
  </block>
​
changeHead(event){
    this.setData({
      headImg:event.detail.avatarUrl
    })
  },

实验中遇到的问题及解决办法

问题：收藏后个人页面无法正常更新

原因及解决办法：更新收藏界面应该放在onShow的生命周期函数而不是onLoad当中

三、程序运行结果

四、实验总结与体会

本次实验编写了一个新闻类微信小程序，有了前面4次编写的经验，这次的编写过程相比之前顺利了许多，但本次的实验也不是一无所获的，本次实验过程中也遇到了收藏后页面无法正常更新的问题，之前数据的更新都是在同一个页面之中的，所以在本页面更新完数据就可以出发onload，但是这一次数据的更新是在另一个页面当中的，因此应该在onshow中就直接更新页面，而不是在onload中对页面进行更新。