中国海洋大学 移动软件开发 实验五 高校新闻网

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

本实验属于哪门课程	中国海洋大学24夏《移动软件开发》
实验名称	实验5：高校新闻网
Github仓库地址	https://github.com/spchara/remote-software-develop-lab.git

一、实验目标

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

二、实验步骤

1 创建项目

创建空白项目

由于这一次我们需要创建多个页面了，所以需要在app.json的pages属性中添加新的页面路径

导入老师提供的 common.js、图片文件、以及 index 页面的代码

2 添加导航栏和底部导航条

修改app.json，代码如下

"window": {
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的新闻网"
  },
  "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":"我的"
      }
    ]
  },

这里其实遇到了一些问题，解决之后就成功显示老师给的页面了。具体问题和解决过程在第四部分说明

3 完成页面设计

3.1 主页设计

主页设计使用老师提供的代码

3.2 个人中心页设计

个人中心页包含两个板块：

• 登录面板：

  在未登录时显示默认头像和登录键，登陆后显示微信头像与名称

• 我的收藏：

  在未登录时显示为空，登陆后显示用户收藏的文章列表

暂时先不完成登录与否的显示，先完成页面设计，并添加相应的css，在报告末尾展示

具体代码：

<view id="myLogin">
  <block>
    <image id="myIcon" src='{{src}}'></image>
    <text id="nickName">{{nickName}}</text>
  </block>
</view>

<view id="myFavourite">
  <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>

3.3 新闻页设计

新闻页需要包含：标题、新闻图片、新闻日期、收藏\取消收藏按钮

代码如下，并添加相应css

<scroll-view class="scrollarea" scroll-y type="list">
  <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="cancelFavourites">♥取消收藏</button>
    <button wx:else plain bindtap="addFavourites">♡点击收藏</button>

  </view>
</scroll-view>

4 业务逻辑实现

4.1 公共逻辑实现

包含提供模拟数据的模拟接口，由老师提供的代码实现

提供接口，返回预存的新闻列表。以及id对应的单个新闻

4.2 主页逻辑以及页面跳转

主页逻辑包括轮播图、列表显示新闻、以及点击跳转

均由老师提供的代码实现

4.3 新闻页面逻辑实现

在首页逻辑中，实现了页面跳转并携带新闻的id编号，新闻页需要做的则是接受id编号之后，通过id查询对应的新闻内容，并渲染出来。对应代码

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

同时需要实现收藏与取消收藏的功能，故而还需要一个变量isAdd用于保存，并写出相应的绑定函数来改变状态

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

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

4.4 个人中心页逻辑实现

个人中心页有三个主要功能：

• 获取用户信息

  用实验一同款的技术即可实现，不过也会遇到实验一的同款问题，更新的基础库不支持，所以需要调低基础库版本

  对应代码：

  <button wx:else open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击登录</button>
  

   getMyInfo:function(e){
      console.log(e.detail.userInfo);
      let info = e.detail.userInfo;
      this.setData({
        isLogin:true,
        src:info.avatarUrl,
        nickName:info.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]);
        console.log(obj)
        myList.push(obj);
      }
      this.setData({
        newsList:myList,
        num:num
      });
    },
  

  在上面的登录函数中调用这个函数，即可实现登录后读取对应收藏的效果

  考虑到登陆后也会有收藏、取消收藏的需求，修改如下代码

    onShow() {
      if(this.data.isLogin){
        this.getMyFavorites();
      }
    },
  

• 浏览收藏的新闻

  写一个主页同款的跳转即可

    goToDetail:function(e){
      let id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: '../detail/detail?id='+id
      })
    },
  

5 最后一步

从学校官网上搜集新闻，保存为本地的模拟数据即可

三、程序运行结果

首页

新闻详情页

点击收藏

用户登录

四、问题总结与体会

问题：

• Q：在导入老师提供的index文件之后，index无法正常显示

  初步检查之后，我发现老师提供的index.json中data没有正确初始化需要使用的数组，即newList

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

• Q:上一步修改之后，虽然图片可以显示了，却又无法正确显示导航栏

  

  产生警告由于 skyline 页面的 navigationStyle 是 custom，app.json 中的 window 配置 navigationStyle、navigationBarTextStyle、navigationBarTitleText、navigationBarBackgroundColor 是不生效的

  研究许久之后，我删除了app.json中的这一行代码

    "renderer": "skyline",
  

  导航栏渲染终于正常

• Q:实验手册所给代码有一处错误：在从本地缓存获取收藏列表的过程中，实验手册中有一布通过info.key的长度来获得收藏的数量，实际上是有问题的，因为本地缓存有一个logs。因此实际上num的值应当为keys.length-1

    getMyFavorites:function(){
      let info = wx.getStorageInfoSync();
      let keys = info.keys;
      let num = keys.length;
      ......
  

  

体会

这次实验中我第一次实现了微信小程序里多个页面之间的跳转、数据传递、以及本地缓存的使用，为个人项目的实现提供了更进一步的技术基础