中国海洋大学2023年夏季《移动软件开发》实验报告5

中国海洋大学2023年夏季《移动软件开发》实验报告5

Info: 韩翔 21020007023

Date: 2023-08-21

项目创建

生成js模板，并进行如下操作：

• 删除utils文件夹及其内部所有内容

• 删除pages文件夹下的logs目录及其内部所有内容

• 删除index.wxml和index.wxss中的全部代码

• 删除index.js中的全部代码，并且输入关键词page生成模板

• 删除app.wxss中的全部代码

• 删除app.js中的全部代码，并且输入关键词app生成模板

此外，还需要创建images和utils文件夹，分别用于存储静态图片素材和common.js，common.js用于后续存储虚拟信息。

视图设计

首先调整导航栏的属性，将其更改为蓝色底色、白色字体，并更改导航栏中的文字为“高校新闻网”：

对于底部的tabBar，在app.json中追加如下代码：

"tabBar": {
    "color": "#000",
    "selectedColor": "#328KKB",
    "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": "我的"
	}
}

对于首页的设计，需要添加幻灯片滚动和新闻列表，使用<swiper>和<view>组件。

导入的swiperImg可参考如下代码：

  /**
   * 页面的初始数据
   */
  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'}
    ],
  },

为了进行布局和样式效果的预览，还需要在js文件的data中临时录入几个测试数据。

对于个人中心页，需要设计登录面板和我的收藏。

此外，由于新闻列表的样式与首页完全相同，可以将index.wxss中新闻列表样式的相关代码挪到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%;
  line-height: 60rpx;
  font-size: 10pt;
}

还要对新闻页进行设计，需要包含标题、图片、正文、日期四个部分。可以借助添加编译模式来临时预览新闻业的效果。

• container: 整体容器；
• title: 新闻标题区域；
• poster: 新闻图片区域；
• content: 新闻正文区域；
• add_date: 新闻日期区域。

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>
</view>

逻辑实现

common.js使用老师提供的文件即可。

通过为标签绑定事件，实现用户点击新闻标题即可实现跳转。

bindtap=‘goToDetail’ data-id=‘{{news.id}}’

通过修改onLoad函数，实现显示对应新闻的功能。

onLoad: function(options) {
    let id = options.id
    let result = common.getNewsDetail(id)
    if (result.code == '200') {
        this.setData({article:result.news})
    }
}

实现添加/取消新闻收藏，需要追加两个button按钮，并使用wx:if和wx:else属性决定显示的按钮样式。

个人中心页，需要实现获取用户信息和加载收藏列表的功能。

WXML:

<!-- 登录面板 -->
<view id="myLogin">
  <block wx:if="{{isLogin}}">
    <image id="myIcon" src="{{src}}"></image>
    <text id="nickName">{{nickName}}</text>
  </block>
  <button wx:else bindtap="getUserInfo">未登录，点此登录</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>

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

JS:

// pages/my/my.js
var common = require("../../utils/common")
Page({
  //获取授权信息
  getUserInfo: function(){
    wx.getUserProfile({
      desc: '获取授权信息',
      success: (res) => {
        let info = res.userInfo
        this.setData({
          isLogin: true,
          src: info.avatarUrl,
          nickName: info.nickName
        })
        this.getMyFavorites()
      }
    })
  },

  //跳转到详情页
  goToDetail: function(e){
    let id = e.currentTarget.dataset.id;

    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
  },

  getMyFavorites: function(){
    //读取所有本地信息
    let info = wx.getStorageInfoSync()
    
    if (!info){
      console.log("未获取到信息")
    } else {
      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
      })
    }
  },

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log(this.data.isLogin)
    console.log("调用onShow事件")
    if (this.data.isLogin){
      //更新收藏列表
      this.getMyFavorites()
      console.log("更新数据")
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

此时就能够完成登录和加载收藏页的功能。

在完成上述操作后，应当清除临时数据，以免影响整体逻辑效果。

要清理的数据如下：

• 首页
• 新闻页
• 个人中心页

效果