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

最新推荐文章于 2024-08-06 10:22:43 发布
最新推荐文章于 2024-08-06 10:22:43 发布
阅读量175 收藏
点赞数
文章标签： servlet java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lier_bujian/article/details/126449764
版权

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

步骤一 基础设计

先是顶部信息与底部导航栏的设计，这些设计都在app.json中实现。

顶部小程序信息与配色

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

下面的信息显示，结合html和css的设计，主要就是新闻列表，这个新闻列表在首页和我的页都要使用，所以写在app.wxss中最方便，可以用于index和my两页的html。

wxss部分

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

步骤二 首页设计

首页的UI设计主要包括两部分内容，即幻灯片滚动和新闻列表。

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

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="{{item.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如下

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
​
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
​
.usermotto {
  margin-top: 200px;
}
​
/* 幻灯片部分 */
swiper{
  height: 400rpx;
  width:100%;
}
swiper image{
  height: 100%;
  width:100%;
}

index.js如下

// pages/detail/detail.js
var common = require('../../utils/util.js')
​
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    swiperImg: [
      { src: "/image/newsimage1.jpg" },
      { src: "/image/newsimage2.jpg" },
      { src: "/image/newsimage3.jpg" }
    ],
    newsList:[]
  },
  goToDetail:function(e){
    //获取携带data-id的数据
    let id = e.currentTarget.dataset.id
    //console.log(e)
    //携带新闻ID进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
​
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let list = common.getNewList()
    this.setData({
      newsList:list
    })
  },
​
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
​
  },
​
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
​
  },
​
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
​
  },
​
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
​
  },
​
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
​
  },
​
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
​
  },
​
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
​
  }
})

步骤三 个人主页设计

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

<!-- 登陆页面 -->
<view class="myLogin">
  <block wx:if="{{is_Login}}">
    <image src="{{src}}"></image>
    <text>{{nickName}}</text>
  </block>
  <button wx:else="" open-type="getUserInfo" bindtap="getMyInfo">点击获取头像和昵称</button>
</view>
<!-- 收藏列表 -->
<view class="myFavorite"> 
  <text>我的收藏（{{number - 1}}）</text>
  <view class="news-list">
    <view class="news-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
      <image src="{{item.poster}}"></image>
      <text bindtap = 'goToDetail' data-id="{{item.id}}">{{item.title}}————{{item.add_date}}</text>
    </view>
  </view>
</view>
/* 登陆页面 */
.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;
}
​
// pages/my/my.js
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    number:  1,
    nickName: "未登录",
    src: "/images/index1.png",
    newsList: [],
    is_Login : false,
  },
​
  getMyInfo: function (e) {
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName,
          is_Login : true
        })
      }
    })
    this.getMyFavorites()
  },
​
  //更新number
  getMyFavorites: function () {
    let info = wx.getStorageInfoSync() //读取本地缓存信息
    console.log(info)
    let keys = info.keys //获取全部key信息 
    let num = keys.length //获取收藏新闻数量
​
    let myList = [];
    for (var i = 0; i < num - 1; 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
    //console.log(e)
    //携带新闻ID进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
​
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
​
  onLoad() {
 
  },
​
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
​
  },
​
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (this.data.is_Login) {
      this.getMyFavorites()
    }
  },
​
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
​
  },
​
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
​
  },
​
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
​
  },
​
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
​
  },
​
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
​
  },  
})

步骤四 文章详细页

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

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

计划使用view组件进行整体布局，对自定义的class名称解释如下。 container:整体容器； title:新闻标题区域； poster:新闻图片区域； content:新闻正文区域： add_date:新闻日期区域。

.container{
  padding:15rpx;
  /* text-align: center; */
}
.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-right: 25rpx;
  margin-top:20rpx;
}
button{
  width: 250rpx;
  height:100rpx;
  margin:20rpx auto;
}

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

// pages/detail/detail.js
var common = require('../../utils/util.js')
​
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    article: {
      id: '',
      title: '666',
      poster: '',
      add_date: '',
      content: ''
    },
    isAdd:false
  },
  //添加收藏
  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,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  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
        })
      }
    }
    
    },
​
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
​
  },
​
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
​
  },
​
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
​
  },
​
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
​
  },
​
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
​
  },
​
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
​
  },
​
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
​
  }
})

步骤五 细节补充

修改my.wxml代码，将“我的收藏”后面的数字更改为动态数据效果。

<view class="myFavorite"> 
  <text>我的收藏（{{number - 1}}）</text>
  <view class="news-list">
    <view class="news-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
      <image src="{{item.poster}}"></image>
      <text bindtap = 'goToDetail' data-id="{{item.id}}">{{item.title}}————{{item.add_date}}</text>
    </view>
  </view>
</view>

继续在my.js文件中追加getMyFavorites函数，用于展示真正的新闻收藏列表。

getMyFavorites: function () {
    let info = wx.getStorageInfoSync() //读取本地缓存信息
    console.log(info)
    let keys = info.keys //获取全部key信息 
    let num = keys.length //获取收藏新闻数量
​
    let myList = [];
    for (var i = 0; i < num - 1; i++) {
      let obj = wx.getStorageSync(keys[i])
      myList.push(obj)
    }
    //更新收藏列表
    this.setData({
      newsList: myList,
      number: num
    })
  },

三、程序运行结果

首页

 

拖动效果，同时为了体现这个效果，自己加了几篇文章。

 

划动效果

 

个人页

 

 

进入一篇文章

收藏：

收藏列表更新

四、问题总结与体会

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

问题

首先是页面切换，借助微信小程序开发已有的语法，简单修改app.js文件即可实现，这个过程中突然发现了整个开发程序的简洁性。

第二个问题是获取登录信息不成功，检查了多次语法之后，都没有找到问题所在。最后发现居然是因为网络原因。切换网络之后就好了。

最后是收藏不能及时更新，其实本来是可以正常自动更新的，在my.js中的函数使用的变量名是isLogin，但是在data中定义的是is_Login，可是又没有报错，一直卡了好久，最后终于发现了这个变量名字的问题。

now i see
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
2022年夏季高考文化成绩一分一段表
06-28
2022年夏季高考文化成绩一分一段表
2022年拖鞋市场行业调研报告.pdf
04-21
【2022年拖鞋市场行业调研报告】 拖鞋市场在2022年的表现呈现出多样化的趋势，尤其在居家凉鞋/拖鞋、流行男鞋/拖鞋以及女鞋/拖鞋三大子领域中各有特点。本报告将详细探讨这些领域的市场状况、品牌分析以及消费者...
移动软件开发实验四
qq_51538929的博客
08-24 242
移动软件开发
2022年夏季《移动软件开发》实验报告
weixin_51262200的博客
08-24 207
2022年夏季《移动软件开发》实验报告 实验4：高校新闻网
2022年夏季《移动软件开发》实验报告1
weixin_51262200的博客
08-17 249
移动软件开发实验一第一个小程序
2022年夏季消防个人工作总结报告范文.docx
01-24
综上所述，该消防个人工作总结报告强调了消防安全工作的系统性和全面性，涵盖了从组织结构、责任落实、制度建设、教育培训到风险防控的各个环节，体现了消防部门对于夏季消防安全工作的重视和严谨态度。通过“五无”...
2022年夏季旅游调查报告（英）.pdf
11-28
2022年夏季旅游调查报告（英）.pdf
2022个人半年安全述职报告四篇.doc
11-30
2022年的个人半年安全述职报告主要集中在工程部的安全管理工作上，报告详细阐述了该部门在上半年如何执行和强化安全生产的各项措施，确保为客户提供优质服务的同时，保障员工和群众的生命财产安全。报告的核心内容...
J031_使用TCP协议支持与多个客户端同时通信
lzn20161229的博客
08-03 424
使用TCP协议支持与多个客户端同时通信。
C++ - 函数重载
最新发布
jiaowenjie的专栏
08-06 180
/打印的是第二个函数的地址。//打印的是第一个函数的地址。-> 重载函数在本质上是相互独立的不同函数。-> 函数返回值不能作为函数重载的依据。-> 重载函数的函数类型不同。**3.函数默认参数和函数重载****函数重载的注意事项：****4.函数重载的本质**
枚举工具类
qq_43049583的博客
08-04 407
java枚举工具类
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1254
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
等待唤醒机制两种实现方法-阻塞队列
泰勒今天想展开的博客
08-04 495
桌子上有面条-》吃货执行桌子上没面条-》生产者制造执行。
深入理解Java注解
weixin_55745942的博客
08-01 726
Java注解是用来描述程序元素（如类、方法、变量等）的一种机制。它们可以提供关于程序的补充信息，帮助编译器、框架或其他工具更好地理解和处理代码。注解通常以符号开头，后跟注解名称和可能的参数。要创建自定义注解，需要使用@interface关键字定义一个接口，并在接口中声明注解的属性。这个注解名为，可以被用来标记方法。它有一个名为value的属性，具有默认值"default"。
社区养老服务小程序的设计
Karen198的博客
07-31 755
管理员账户功能包括：系统首页，个人中心，用户管理，服务人员管理，服务产品管理，服务预约管理，服务状态管理，服务退订管理，活动管理，视频管理。主要技术：Java,Spring,mybatis,mysql,jquery,html。服务器：SpringBoot自带 apache tomcat。微信端账号功能包括：系统首页，服务产品，活动，视频，我的。JDK版本：Java JDK1.8。数据库可视化工具： navicat。数据库版本： mysql5.7。开发工具：IDEA(推荐)开发系统：Windows。
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 715
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
Servlet(2)
xjdkxnhcoskxbco的博客
08-04 745
这个注解可以用来修饰一个Servlet类，可以简化配置，替代Web.xml中 的servlet配置。
string类的模拟实现(C++)
2302_80190394的博客
08-02 1140
C++ string的功能函数实现
2022年凯立德导航夏季3p21j30下载
06-28
对于凯立德导航公司而言，2022年夏季3p21j30下载是非常重要的。随着汽车普及率的不断提高，导航设备已成为车内必备的装置之一。凯立德导航公司作为行业领军企业，已经成为了全球导航设备的知名品牌之一。 在2022年...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

now i see

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值