移动软件开发实验四

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

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目。

2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1、项目创建

本项目一共需要3个页面，即首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。

1.1 首页功能需求

首页功能需求如下：（1）首页需要包含幻灯片播放效果和新闻列表；（2）幻灯片至少要有3幅图片自动播放；（3）点击新闻列表可以打开新闻全文。

1.2 新闻页功能需求

新闻页功能需求如下：（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；（3）已经收藏过的新闻也可以点击按钮取消收藏。

1.3 个人中心页功能需求

个人中心页功能需求如下：（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。（3）收藏夹中的新闻可以直接点击查看内容。（4）未登录状态下收藏夹显示为空。

2、视图设计

2.1导航栏及tabBar设计

app.json文件代码：

{
  "pages": [
    "pages/my/my",
    "pages/index/index",
    "pages/detail/detail"
    
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTitleText": "高校新闻网",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#328EEB",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/index.png",
        "selectedIconPath": "images/index_blue.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my_blue.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

上述代码可以更改导航栏背景为蓝色，字体为白色，且可以切换首页和个人中心页。

3、页面设计

3.1首页设计

首页主要包含两部分内容，及幻灯片滚动和新闻列表。

使用如下组件：

• 幻灯片：组件
• 新闻列表：容器，内部使用数组循环。

index.wxml代码如下：

<!--pages/index/index.wxml-->
<!--幻灯片滚动-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <view wx:for="{{swiperImg}}" wx:key='swiper{{index}}'>
    <swiper-item>
      <image src="{{item.src}}"></image>
    </swiper-item>
  </view>
</swiper>
<!--新闻列表-->
<view class='news-list'>
  <view class='news-item' wx:for="{{newsList}}" wx:key="{{items.id}}">
      <image src='{{item.poster}}'></image>
      <text bindtap ='goToDetail' data-id="{{item.id}}">{{item.title}}————{{item.add_date}}</text>
    </view>
    <button plain="true">加载更多</button>
</view>

index.wxss代码如下：

/*幻灯片部分*/
swiper{
  height: 400rpx;
  width: 100%;
}
swiper image{
  height: 100%;
  width: 100%;
}

app.wxss代码如下：

/*新闻列表*/
.news-list{
  min-height: 600rpx;
  padding: 15rpx;
}

.news-item{
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid black;
}
.news-item image{
  height: 150rpx;
  width: 230rpx;
  margin: 10rpx;
}
.news-item text{
  width: 100%;
  line-height: 60rpx;
  font-size: 40rpx;
}

3.2个人中心页设计

个人中心页主要包含两个版块，及登陆页面和我的收藏。登陆面板用于显示用户的微信头像和昵称，我的收藏用于显示收藏在本地的新闻列表。

my.wxml代码如下：

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

my.wxss代码如下：

/* 登陆页面 */
.myLogin{
  height: 400rpx;
  background-color: #328EEB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.myLogin image{
  height: 200rpx;
  width: 200rpx;
  border-radius: 50%;
}
.myLogin text{
  color: white;
}
/*收藏列表*/
.myFavorite{
  padding: 20rpx;
}

3.3新闻页设计

新闻页是用于给用户浏览新闻全文的，需要用户点击首页的新闻列表，然后在新窗口中打开该页面。新闻页包括新闻标题、新闻图片、新闻正文和新闻日期。

detail.wxml代码如下：

<view class="container">
  <view class="title">{{article.title}}</view>
  <view class="poster">
    <image src="{{article.poster}}"></image>
  </view>
  <view class="content">
    <text>{{article.content}}</text>
  </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代码如下：

.container{
  padding: 15rpx;
  

}
.title{
  font-size: 35rpx;
  line-height: 35rpx;
  text-align: center;
}
.poster image{
  width: 100%;
}
.content text{
  text-align: left;
  font-size: 30rpx;
  line-height: 35rpx;
}
.add_date{
  font-size: 30rpx;
  text-align: right;
  line-height: 30rpx;
  margin-left: 25rpx;
  margin-top: 20rpx;
}
button{
  width: 250rpx;
  height: 100rpx;
  margin: 20rpx auto;
}

4、逻辑实现

4.1首页逻辑

首页主要有两个功能需要实现，一是展示新闻列表，二是点击新闻标题可以跳转对应的内容页面进行浏览

index.js代码如下

// pages/index/index.js
var common = require('../../utils/common.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
    })
  }

})

4.2新闻页逻辑

新闻页主要有两个功能需要实现，一是显示对应新闻，二是可以添加/取消新闻收藏。

detail.js代码如下：

// pages/detail/detail.js
var common = require('../../utils/common.js')
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
    let id = options.id
    //检查当前新闻是否在收藏夹中
    var newarticle = wx.getStorageSync(id)
    //已存在
    if(newarticle !=''){
      this.setData({
        isAdd: true,
        article:newarticle
      })
    }
    //不存在
    else{
      let result = common.getNewsDetail(id)
      //获取新闻内容
      if(result.code == '200'){
        this.setData({
          article:result.news,
          isAdd:false
        })
      }
    }
  },
  /*页面的初始数据*/
  data: {},
  addFavorites:function(){
    let article = this.data.article
    wx.setStorageSync(article.id,article)
    this.setData({
      isAdd:true
    })
  },
cancelFavorites:function(){
  let article = this.data.article
  wx.removeStorageSync(article.id)
  this.setData({
    isAdd:false
  })
},
})

4.3个人中心页逻辑

个人中心页主要有3个功能需要实现，一是获取微信用户信息；二是获取收藏列表；三是浏览收藏的新闻。

my.js代码如下：

// pages/my/my.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    number:0,
    nickName:"未登录",
    src:"/images/index.png",
    newsList:[]
      },
  //获取个人信息
  getMyInfo:function(e){
    wx.getUserProfile({ desc: '用于展示用户信息', // 用于展示用户信息
    success: (res) =>{
      this.setData({
        isLogin:true,
        src:res.userInfo.avatarUrl,
        nickName:res.userInfo.nickName
      })
      wx.setStorageSync('isLogin', true)
    }
  })
    //获取新闻列表
    this.getMyFavorites()
  },
  //更新number
  getMyFavorites:function(){
    let info = wx.getStorageInfoSync()  //读取本地缓存
    let keys = info.keys  //获取全部key信息
    let num = keys.length - 1  //获取收藏新闻数量
    let myList = [];
    for(var i = 0;i<num; i++){
      let obj = wx.getStorageSync(keys[i])
      myList.push(obj)
    }
    //更新收藏列表
    this.setData({
      newsList:myList,
      number:num
    })
  },
  goToDetail: function(e) {
    //获取携带的data-id数据
    let id = e.currentTarget.dataset.id;
    //携带新闻id进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },
  
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if(this.data.isLogin){
      this.getMyFavorites()
    }
  }
})

三、程序运行结果

1、个人页面

2、首页

3、新闻

四、问题总结与体会

• 获取用户微信头像跟昵称，用到了第一个小程序的知识点。
• 掌握了组件的用法。
• 点击新闻，实现新闻页面跳转，
• 获取携带的data-id数据 let id = e.currentTarget.dataset.id，携带新闻id进行页面跳转。