2024年《移动软件开发》实验五：高校新闻网

一、实现功能

（一）基本功能

（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；

（2）允许点击按钮将当前阅读的新闻添加到本地收藏夹中；

（3）已经收藏过的新闻也可以点击按钮取消收藏。

（二）额外功能

（1）开启云服务器，实现幻灯片、收藏、新闻云存储，表单如下；

表单名称	存储内容
collect	存储我收藏的新闻
news	存储所有新闻
imageUrl	幻灯片的url

（2）小程序首先通过本地缓存查看收藏的新闻，然后通过云存储获取收藏的新闻。并且将更新的内容存到本地缓存；

（3）点击幻灯片后，跳转到对应新闻的详细页面。

二、效果展示

（1）云数据库：

（2）主页：

（3）点击幻灯片，跳转详细页面:

（4）点击新闻条目，跳转详细页面：

（5）点击收藏：

（6）”我的“页面：

（7）登陆后

（8）点击收藏的新闻

（9）取消收藏

（10）返回页面

三、实现步骤

1.配置云环境：

（1）打开工程文件：

输入代码：

"cloudfunctionRoot": "cloud/",

（2）打开app.js文件:

输入代码：

App({
  onLaunch() {
    wx.cloud.init({
      env:"yulia2233-2g4nu70o1acaa6c0",
      traceUser:true
      })
  },
})

2.整体UI设计:

（1）导航栏设计：

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

（2）toolBar设计：

 "tabBar": {
    "color": "#000",
    "selectedColor": "#328eeb",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/首页.png",
        "selectedIconPath": "images/首页(选中).png",
        "text": "首页"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "images/我的.png",
        "selectedIconPath": "images/我的(选中).png",
        "text": "我的"
      }
    ]
  }

3.公共文件（增加了云开发，使用数据库存储news）

（1）导入数据库接口：

const db = wx.cloud.database().collection('news');

（2）编写获取新闻列表的函数（从云端获取）

//获取新闻列表
function getNewsList() {
  return new Promise((resolve, reject) => {
    // 获取数据库实例
    const db = wx.cloud.database();
    
    // 查询数据库中的新闻数据
    db.collection('news').get({
      success: function(res) {
        // 初始化一个空列表用于存储处理后的新闻数据
        let list = [];
        // 遍历从数据库中获取的数据
        for (let i = 0; i < res.data.length; i++) {
          let obj = {};
          obj.id = res.data[i].id;
          obj.poster = res.data[i].poster;
          obj.add_date = res.data[i].add_date;
          obj.title = res.data[i].title;
          list.push(obj);
        }
        console.log(list)
        // 返回处理后的新闻列表
        resolve(list)
      },
      fail: function(err) {
        console.error(err);
        reject(err);
      }
    });
  });
}

（2）获取新闻内容函数（云端获取）：

function getNewsDetail(newsID) {
  return new Promise((resolve, reject) => {
    const db = wx.cloud.database();

    // 查询数据库中的新闻数据，匹配新闻ID
    db.collection('news').where({
      id: newsID
    }).get({
      success: function(res) {
        if (res.data.length > 0) {
          // 如果找到了匹配的新闻
          let msg = {
            code: '200', // 成功
            news: res.data[0] // 获取到的新闻内容
          };
          resolve(msg);
        } else {
          // 如果没有找到匹配的新闻
          let msg = {
            code: '404', // 没有对应的新闻
            news: {}
          };
          resolve(msg);
        }
      },
      fail: function(err) {
        // 如果数据库查询失败
        console.error('数据库查询失败', err);
        reject(err);
      }
    });
  });
}

（3）提供接口:

// 对外暴露接口
module.exports = {
  getNewsList: getNewsList,
  getNewsDetail: getNewsDetail
}

4.index"首页"逻辑修改（页面代码同原文件不变）：

onLoad函数修改：因为读取数据库是异步处理，所以对函数进行修改：

  onLoad: function(options) {
    //获取新闻列表
    common.getNewsList().then(list => {
      console.log('主页的', list);
      //更新列表数据
      this.setData({
        newsList: list
      });
    }).catch(err => {
      console.error('获取新闻列表失败', err);
    });
  }

5."我的" 页面设计和逻辑

（1）页面设计：

<!--登录面板-->
<view class="myLogin">
  <block wx:if="{{isLogin}}">
    <image class="myIcon" src="{{src}}"></image>
    <text class="nickName">{{nickName}}</text>
  </block>
  <button wx:else open-type="getUserInfo" bindtap="getMyInfo">未登录，点此登录</button>
</view>
<!--我的收藏-->
<view class="myFavorites">
  <text>我的收藏（{{num}}）</text>
  <!--收藏的新闻列表-->
  <view class="news-list">
    <view class="list-item" wx:for="{{newsList}}" wx:key="{{item.id}}" data-id="item.id">
      <image src="{{item.poster}}"></image>
      <text bindtap="goToDetail" data-id="{{item.id}}">{{item.title}} ———— {{item.add_date}}</text>
    </view>
  </view>
</view>

/*登录面板*/
.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;
}
 
/*我的收藏*/
.myFavorites{
  padding: 20rpx;
}
/*新闻列表区域样式*/
/*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）逻辑设计：

获取用户信息：

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

获得我的收藏新闻：

  getMyfavorites: function() {
    const db = wx.cloud.database();
  
    // 查询数据库中的 collect 表单，获取所有收藏的新闻
    db.collection('collect').get({
      success: res => {
        let myList = res.data; // res.data 是包含所有收藏新闻记录的数组
        let num = myList.length;
  
        console.log('收藏列表', myList);
  
        // 更新收藏列表
        this.setData({
          newsList: myList,
          num: num
        });
      },
      fail: err => {
        console.error('获取收藏列表失败', err);
      }
    });
  },

跳转到新闻详细页面：

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

每次加载该页面的时候，刷新我的收藏：

  onShow:function() {
    //如果已经登录
    if(this.data.isLogin === true){
      console.log("更新列表")
    //更新收藏列表
      this.getMyfavorites()
    }
  },

6."详细"detail页面设计和逻辑：

（1）页面设计

<!--pages/detail/detail.wxml-->
<view class ="container">
  <view class = "title">{{artical.title}}</view>
  <view class = "poster">
    <image src="{{artical.poster}}" mode="widthFix"></image>
  </view>
  <view class="content">{{artical.content}}</view>
  <view class =" add_date">时间：{{artical.add_date}}</view>

  <button wx:if ='{{isAdd}}'plain bindtap= 'cancelFavorites'>❤已收藏</button>
  <button wx:else plain bindtap='addFavorites'>❤点击收藏</button>
</view>

/* pages/detail/detail.wxss */
/* pages/detail/detail.wxss */
/*整体容器*/
.container{
  padding: 15rpx;
  text-align: center;
}
/*新闻标题*/
.title{
  font-size: 14pt;
  line-height: 80rpx;
}

/*新闻图片*/
.poster image{
  width: 300px;
}

/*新闻正文*/
.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;
  margin-bottom: 50rpx;
}

（2）逻辑

添加收藏函数(存储到云端)：

  /*添加收藏*/
  addFavorites:function () {
    let artical = this.data.artical
    wx.setStorageSync(artical.id, artical)    //将文章放入缓存区
    console.log("加入缓存",artical)
      // 将文章保存到数据库的 collect 表单中
    const db = wx.cloud.database();
  
    db.collection('collect').add({
      data: artical, // 直接将文章对象存入数据库
      success: res => {
        console.log('收藏成功，数据库记录ID:', res.id);
        this.setData({
          isAdd: true
        });
      },
      fail: err => {
        console.error('收藏失败', err);
      }
    });
    this.setData({
      isAdd:true
    })
  },

取消收藏函数(存储到云端)：

/* 取消收藏 */
cancelFavorites: function() {
  let artical = this.data.artical;
  
  // 从本地缓存中移除
  wx.removeStorageSync(artical.id);
  
  // 从数据库的 collect 表单中删除
  const db = wx.cloud.database();
  
  // 使用文章 ID 删除记录
  db.collection('collect').where({
    id: artical.id
  }).remove({
    success: res => {
      console.log('取消收藏成功', res);
      this.setData({
        isAdd: false
      });
    },
    fail: err => {
      console.error('取消收藏失败', err);
    }
  });
}

加载页面：

如果是收藏的内容，则直接从缓存中读取；否则要在数据库云端读取。

  onLoad(options) {
    let id = options.id
    //检查当前新闻是否在收藏夹中
    var newartical = wx.getStorageSync(id)
    //存在
    if(newartical != '')
    {
      this.setData({
        isAdd:true,
        artical:newartical
      })
    }
    //不存在
    else{
      common.getNewsDetail(id).then(result => {
        console.log(result);
        if (result.code == '200') {
          this.setData({
            artical: result.news,
            isAdd: false
          });
        }
      }).catch(err => {
        console.error('获取新闻详情失败', err);
      });
    }
  },

四、遇到问题

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

问题：在index中调用该getNewsList函数，获取云数据库中的数据时，报错error-50110

解决方案：获取数据库中的数据时异步操作，需要等待Promise,完成后返回list并接收：

收获和体会：学会了使用微信云开发，学会了页面设计