2024年夏季《移动软件开发》实验报告 - 实验5：高校新闻网

已于 2024-09-02 16:23:28 修改
阅读量654 收藏 8
点赞数 4
文章标签： 小程序
于 2024-09-02 16:14:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/reydelCampNou/article/details/141822485
版权

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

实验课程中国海洋大学24夏《移动软件开发》
实验名称实验5：高校新闻网
Github仓库地址https://github.com/ReyDelCampNou/wechatdev/tree/master/exp5

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

  1. 创建所需目录
    在这里插入图片描述

  2. 完成index.wxml

<!--pages/index/index.wxml-->
<!--幻灯片滚动-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{{swiperImg}}" wx:key='swiper{{index}}'>
    <swiper-item>
      <image src="{{item.src}}"></image>
    </swiper-item>
  </block>
</swiper>
<!--新闻列表-->
<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>
  1. 完成index.wxss
/*swiper区域样式*/
swiper{
  height: 400rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}
/*新闻列表区域样式*/
/*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;
}
  1. 完成index.js（略去了部分自动生成函数）
// pages/index/index.js
var common = require('../../utils/common.js') //引用公共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'}
    ],
  },

  /**
   * 自定义函数--跳转新页面浏览新闻内容
   */
  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
    })
  },
})
  1. 完成my.wxml
<!--pages/my/my.wxml-->
<!--登录面板-->
<view id='myLogin'>
  <block wx:if='{{isLogin}}'>
    <image id='myIcon' src='{{src}}'></image>
    <text id='nickName'>{{nickName}}</text> 
  </block>
  <button wx:else open-type="getUserInfo" bindgetuserinfo="getMyInfo">未登录，点此登录</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>
  1. 完成my.wxss
/* pages/my/my.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;
}
  1. 完成my.js（略去部分自动生成的函数）
// pages/my/my.js
var common = require('../../utils/common.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    nickName: '',
    src: '',
    num: 0,
    newsList:[]
  },

  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]);
      myList.push(obj);
    }
    this.setData({
      newsList: myList,
      num: num
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if(this.data.isLogin){
      this.getMyFavorites()
    }
  },

  getMyInfo: function(e){
    let info = e.detail.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
    })
  }

})
  1. 完成detail.wxml
<!--pages/detail/detail.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>
  <button wx:if='{{isAdd}}' plain bindtap='cancelFavorites'>已收藏</button>
  <button wx:else plain bindtap='addFavorites'>点击收藏</button>
</view>
  1. 完成detail.wxss
/* pages/detail/detail.wxss */
.container{
  padding: 15rpx;
  text-align: center;
}
.title{
  font-size: 14pt;
  line-height: 80rpx;
}
.poster image{
  width: 100%;
}
.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;
}
button{
  width: 250rpx;
  height: 100rpx;
  margin: 20rpx auto;
}
  1. 完成detail.js
// pages/detail/detail.js
var common = require('../../utils/common.js')

Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  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
        })
      }
    }
  },

  addFavorites: function(options){
    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});
  }
})
  1. 完成common.js （由于不可抗力删去新闻列表）
//模拟新闻数据
const news = [ ];

//获取新闻列表
function getNewsList() {
  let list = [];
  for (var i = 0; i < news.length; i++) {
    let obj = {};
    obj.id = news[i].id;
    obj.poster = news[i].poster;
    obj.add_date = news[i].add_date;
    obj.title = news[i].title;
    list.push(obj);
  }
  return list; //返回新闻列表
}

//获取新闻内容
function getNewsDetail(newsID) {
  let msg = {
    code: '404', //没有对应的新闻
    news: {}
  };
  for (var i = 0; i < news.length; i++) {
    if (newsID == news[i].id) { //匹配新闻id编号
      msg.code = '200'; //成功
      msg.news = news[i]; //更新当前新闻内容
      break;
    }
  }
  return msg; //返回查找结果
}

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

三、程序运行结果

主页
在这里插入图片描述

新闻详情页
在这里插入图片描述

收藏
在这里插入图片描述

个人界面
在这里插入图片描述

登录
在这里插入图片描述

四、问题总结与体会

  1. 发现收藏列表中总有一个空数据，推测为返回时自带的空数据，于是修改my.js中的函数getMyFavorites:

    let num = keys.length-1;

    在返回时去除了空数据。

  2. 登录问题采用实验一中的方法解决，修改基础库至2.16.1。

reydelCampNou
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2024年夏季《移动软件开发》实验报告一
08-19
2024年夏季《移动软件开发》实验报告一
此仓库用于记录本人在2024年夏季学期的移动软件开发课程学习过程及实验~
08-29
此仓库用于记录本人在2024年夏季学期的移动软件开发课程学习过程及实验~
《移动软件开发》实验-高校新闻网
2301_77303935的博客
09-02 683
《移动软件开发》实验-高校新闻网
2024年夏季《移动软件开发》实验报告五
lingard_wxck的博客
09-02 368
未登录，点此登录
中国海洋大学 移动软件开发 实验五 高校新闻网
ZRCMLXKR的博客
09-02 630
中国海洋大学移动软件开发课程实验课作业 高校新闻网
实验5：高校新闻网小程序
m0_73768807的博客
09-02 572
【问题总结】对实验文档中 image 显示问题的思考由于在本地编写时尝试设置 width: 100% 后未出现描述情况，故猜测可能原因为父容器（ poster ）宽度未设置问题，设置百分比宽度需要父容器有固定的宽度才能正常展示详情页添加如下代码时未成功展示文章标题</首先在 detail.js 的 onLoad函数中添加如下代码查看 get 到的数据是否正确// console.log("得到的id是：",id);...})
移动软件开发——高校新闻网
最新发布
plumageee的博客
09-02 502
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。解决办法：清理缓存，重新编译后num初值变为0收获：通过本次实验，我对如何开发一个较为完善可用的前端小程序，有了更加深刻的认识，提高了我的小程序开发的综合能力。
移动软件开发_高校新闻网
2302_76951580的博客
09-02 380
通过本次实验，我掌握了微信小程序的开发流程，熟悉了常用的API使用方法，并进一步加深了对前端开发的理解。同时，通过功能的扩展和界面的美化，我认识到用户体验在小程序开发中的重要性。实验中也遇到了一些挑战，例如如何在保持界面美观的同时，保证功能的完整性，通过不断调试与优化，最终达到了理想的效果。
中国海洋大学《移动软件开发》实验五
bxcff的博客
09-02 123
本次实验中我成功完成了第五个小程序，即高校新闻网。这个过程中主要遇到的问题是开始无法获取头像与昵称，通过降低调试库版本后成功解决。
ouc移动软件开发实验五
qq_73816456的博客
09-02 565
在本次微信小程序开发高校新闻网的实验中，我深刻体验到了微信小程序的开发流程和其独特的开发环境。通过实际操作，我学习到了许多编程知识和技能，同时也认识到了实际开发中的各种挑战和乐趣。小程序框架理解： 学习小程序的框架和生命周期，理解了如何在不同页面间传递数据，以及如何使用应用的逻辑层和视图层。前端技术开发： 实验中主要涉及到WXML和WXSS，对CSS和HTML进行了扩展以适应微信小程序特有的样式和布局。
微信小程序开发—高校新闻网页制作
Sslyda的博客
09-02 810
在本次实验中按照实验方案进行微信小程序新闻网的制作，在实验过程中遇见的主要问题在于还是微信更新后getuserInfo接口无法再次使用，这里我调整了工具的版本为2.20.3.才能够调用接口通过本次实验能够让我在开发过程中熟练掌握真机预览、调试等操作，同时掌握了本地缓存的使用方法，为我后期的项目数据存储提供了技术指导，收获颇丰。
香农代码的matlab-ecotheory-jc-summer-2012:威茨实验室期刊俱乐部2012年夏季
05-26
＃想法这是Weitz实验室期刊俱乐部在2012年夏天的一个回购协议。我们正在阅读古典论文。 当我们阅读完论文后，便会去做一些事情。 ＃论文 本文的开头部分包含了与指数族模型相关的熵的概述。 我建议快速阅读原始文章...
2024年露营与户外旅游住宿报告-英文版-KOA.pdf
06-12
根据给定文件的信息，我们可以提炼...通过以上分析，我们可以看到，《2024年露营与户外旅游住宿报告》不仅涵盖了广泛的数据收集与分析技术的应用，还深入探讨了多个专题领域，旨在为行业内外人士提供全面而深入的见解。
software-product-sprint-mvp:2021 年夏季软件产品 Sprint 团队 32 的项目 MVP
08-04
在2021年夏季，软件产品开发领域的一个团队，Sprint团队32，专注于一个名为"software-product-sprint-mvp"的项目。这个项目的重点是实现最小可行产品（Minimum Viable Product，简称MVP），这是敏捷开发方法论中一个...
小程序wx:if 和hidden的区别？
weixin_56187723的博客
08-28 386
选择wx:if：当你需要根据条件完全决定一个组件是否存在时（即条件不满足时，该组件不应该被渲染到页面上），应该使用wx:if。选择hidden：当你只是需要简单地控制组件的显示与隐藏，而不需要完全从DOM中移除该组件时（比如，根据用户的交互行为来显示或隐藏某些信息），应该使用hidden。在实际开发中，可以根据具体场景和需求来选择使用wx:if还是hidden。
vue,小程序,uni-app的生命周期
hexadecimal_001的博客
08-29 874
在Vue、小程序（以微信小程序为例）和Uni-app中，生命周期的概念非常关键，它们帮助开发者理解组件或页面从创建到销毁的整个过程，并在适当的时候执行特定的代码。
小程序的页面跳转方式
weixin_62980497的博客
09-02 239
102. 小程序的页面跳转方式小程序是一种快速发展的应用形式，为用户提供了便捷的功能和交互体验。其中，页面跳转是小程序中常用的功能之一，本文将介绍小程序的页面跳转方式，并提供代码示例，帮助读者更好地理解和实现页面跳转。一、小程序页面跳转方式：1. 通过按钮点击跳转：实现方法：在页面中添加按钮，并在按钮的点击事件处理函数中调用相应的跳转 API 实现页面跳转。
springboot党员之家服务系统小程序论文源码调试讲解
u014445459的博客
09-02 754
随着软件系统的不断改进和升级，B/S结构产品更为方便的特征体现地十分明显。对于一个中等偏大的公司来说，如果系统管理员每天要在很多台电脑之间来回查看，不断奔走，那么效率和工作量就会变得很低，但是如果使用了B/S结构，那么管理员只要对服务器进行管理就够了。B/S结构最大的优点它不需要安装任何的软件，它所有的客户端就只是浏览器，所以只要有一台电脑并且可以上网就可以解决所有问题，客户端可以完全地不用管理员维护。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值