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

最新推荐文章于 2024-08-04 19:29:42 发布
最新推荐文章于 2024-08-04 19:29:42 发布
阅读量238 收藏
点赞数
分类专栏： 小程序 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51703554/article/details/126444381
版权
姓名和学号？
本实验属于哪门课程？中国海洋大学22夏《移动软件开发》
实验名称？实验4：高校新闻网
博客地址？https://blog.csdn.net/weixin_51703554
Github仓库地址？

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

二、实验步骤

1、新建项目

在这里插入图片描述

2、页面配置

在这里插入图片描述
在这里插入图片描述

创建其他文件

在这里插入图片描述

3、视图设计
1、导航栏设计

​ 在app.json对导航栏进行重新配置

  "window":{
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTitleText": "我的新闻网",
    "navigationBarTextStyle":"white"
  },

在这里插入图片描述

2、tabBar设计

​ 在app.json中追加相关属性代码

"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、页面设计
(1)主页设计
<!--幻灯片滚动-->
<swiper indicator-dots autoplay interval="5000" duration="500"></swiper>
<!--新闻列表-->
<view id='news-list'>这是新闻列表</view>

/*新闻列表区域样式*/
/*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;
}

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 : [
      {id: '264698',
      title: '省退役军人事务厅来校交流对接工作',
      poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
      add_date: '2022-08-19'}
    ]
  },

（2）个人中心页设计
<!--登陆面板-->
<view id='myLogin'>
  <block>
    <image id="myIcon" src='{{src}}'></image>
    <text id='nickName'>{{nickNmae}}</text>
  </block>
</view>
<!--我的收藏-->
<view id='myFavorites'>
  <text>我的收藏（1）</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>{{news.title}}——{{news.add_date}}</text>
    </view>
  </view>
</view>


data: {
    nickName:'未登录',
    src:'/images/index.png',
    newsList:[{
      id: '264698',
      title: '省退役军人事务厅来校交流对接工作',
      poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
      add_date: '2022-08-19'
    }]
  },

在这里插入图片描述

（3）新闻页设计
<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>


/* pages/detail/detail.wxss */
/*整体容器*/
.container{
  padding: 15rpx;
  text-align: center;
}
/*新闻标题*/
.title{
  font-size: 14pt;
  line-height: 80rpx;
}
/*新闻图片*/
.poster image{
  width: 700rpx;
}
/*新闻正文*/
.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;
}

article:{
    id: '264698',
    title: '省退役军人事务厅来校交流对接工作',
    poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
    content: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',
    add_date: '2022-08-19'
    }

在这里插入图片描述

4、逻辑实现
1、公共逻辑

将数据放在公共common.js文件中。

在common.js中添加自定义函数getNewList和getNewsDetail，用于获取新闻列表信息和指定ID的新闻正文内容。

//获取新闻列表
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; //返回查找结果
}

最后在common.js中使用moudle.exports语句暴露函数出口

// 对外暴露接口
module.exports = {
  getNewsList: getNewsList,
  getNewsDetail: getNewsDetail
}
2、首页逻辑
新闻列表展示

​ 新闻列需要在页面js文件的onload函数获取新闻列表，并更新到data属性的newList参数中

  onLoad: function (options) {
    let list=common.getNewsList()
    this.setData({newsList:list})
  },

​ 点击跳转新闻内容

<text bindtap="gotoDetail" data-id="{{news.id}}">{{news.title}}——{{news.add_date}}</text>

函数在index.js和detail.js中创建

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

同时还需要在detail.js创建onload的函数，显示对应新闻

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

在这里插入图片描述
在这里插入图片描述

3、新闻页逻辑

添加/取消新闻收藏

修改detail.wxml代码，追加两个button组件为收藏新闻的按键

<button wx:if="{{isAdd}}" plain bindtap="cancelFavorites">❤已收藏</button>
  <button wx:else plain bindtap='addFavorites'>🤍点击收藏</button>

onLoad: function (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(){
      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、个人中心页逻辑
1、获取微信用户信息
<view id='myLogin'>
  <block wx:if="{{isLogin}}">
    <image id="myIcon" src='{{src}}'></image>
    <text id='nickName'>{{nickName}}</text>
  </block>
  <button wx:else>未登录，点此登录</button>
</view>

  // 获取用户信息
  getMyInfo: function(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          isLogin:true,
          src: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        });
        // this.getMyFavourites();
      }
    })
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },

在这里插入图片描述

2、获取收藏列表
getMyFavorites:function(){
      let info=wx.getStorageInfoSync();
      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);
      }
      whis.setData({
        newsList:myList,
        num:num
      });
    },

在这里插入图片描述

3、浏览收藏的新闻
    //自定义函数
    goToDetail:function(e){
      let id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: '../detail/detail?id='+id
      })
    },

在这里插入图片描述

三、程序运行结果

在这里插入图片描述

四、问题总结与体会

问题：

1、版本问题导致登录与教程不同，最终参考实验一的方法完成此部分内容

2、缓冲区中会存有以前的日志，会影响收藏数目，需要对其进行清空

3、在my.js中忘记加入num变量，导致程序出错，找了好长时间

收获：

播放幻灯片，使其自动播放，可以使主页更加美观

学习到了如果页面之间的逻辑还没有写完，想要调试一个页面，可以添加编译模式，来对特定页面进行编译和显示

同时也了解到了一些缓冲区的知识，了解了setStorageSync、getStorageSync、removeStorageSync等函数

使用wx:for进行循环，wx:if或else实现条件判断

再此用到登录获取用户信息，对于登录函数进行一个复习

综合所学知识创建完整的前端新闻小程序项目，为今后的学习打下坚实的基础

Lieb_Mark
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022年夏季《移动软件开发》实验六报告
欢迎一起来学习
08-23 511
2022年夏季《移动软件开发》实验六报告
2022年夏季《移动软件开发》实验三报告
欢迎一起来学习
08-20 356
2022年夏季《移动软件开发》实验三报告
2022年夏季《移动软件开发》实验报告
weixin_51262200的博客
08-24 206
2022年夏季《移动软件开发》实验报告 实验4：高校新闻网
2022年夏季《移动软件开发》实验报告1
weixin_51262200的博客
08-17 246
移动软件开发实验一第一个小程序
2022年夏季《移动软件开发》实验四报告
欢迎一起来学习
08-21 175
2022年夏季《移动软件开发》实验四报告
2022年夏季《移动软件开发》实验报告二
weixin_51703554的博客
08-18 151
问题：按照教程中的步骤来发现请求的数据返回错误代码400，请求location出现了错误。后来经大佬点拨，发现了可以查询城市数字ID的接口，用这个ID可以获得详细信息。收获：通过这次实验不但巩固了上次实验中的导航栏的调色、HTML组件的使用和一些逻辑实现，并且可以使用动态数据。最主要的是使用wx.request请求获取信息。提高了我对于小程序设计的理解和熟练程度，为以后的学习打下坚实的基础。...
2022年夏季《移动软件开发》实验五报告
欢迎一起来学习
08-23 508
2022年夏季《移动软件开发》实验五报告
2022年夏季《移动软件开发》实验报告三
weixin_51703554的博客
08-20 374
问题：function getRandomColor()要放到page的外面，在page内调用收获：学习使用video组件实现视频列表的切换方法；掌握了视频自动播放方法，同时也学习了弹幕的发送，以及利用随机函数实现颜色的随机选择，添加了随机颜色弹幕效果。为今后的学习打下坚实的基础。
2022年夏季《移动软件开发》实验二报告
欢迎一起来学习
08-17 196
2022年夏季《移动软件开发》实验二报告
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1524
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 382
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 165
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 940
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
文章相关接口
qq_74474809的博客
08-03 152
跟着黑马程序员学习SpringBoot3+Vue3
【Web】TFCCTF 2024 部分题解
最新发布
uuzeray的博客
08-04 462
但是因为strtok代码本身存在错误，当传入的string末尾为:时，会传入none进token，继而让internal server error，从而重启服务，这样就可以将事先写入app/templates下的模板文件注册。这时候再审计代码，可以发现当/login路由查表成功，会调strtok去分割数据，再写入User返回。提示打SSRF，但限制死了前缀要是http://google.com/修改后，再以admin/123:登录，此时服务会报错，刷新即可重启服务。多了一个/，便不能用@绕过。
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 540
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
vuex知识
qq_16570607的博客
08-04 278
将getMoviesRankingInDouban的action用promise包装一下, 在此次请求结束后, 根据此次请求返回的电影的id, 根据id再次请求电影的信息。数据请求,在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。例子：在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。状态更改,在mutation中,将查询的结果(传入的参数), 赋值给state中声明的变量。
【网页设计】基于HTML+CSS上海旅游网站网页作业制作
爱敲代码的卡拉米的博客
08-02 652
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
2022年凯立德导航夏季3p21j30下载
06-28
### 回答1： 对于凯立德导航公司而言，2022年夏季3p21j30下载是非常重要的。随着汽车普及率的不断提高，导航设备已成为车内必备的装置之一。凯立德导航公司作为行业领军企业，已经成为了全球导航设备的知名品牌之一。 在2022年夏季，凯立德导航公司将推出3p21j30下载。这款导航设备具有更高的精度和更完善的功能，比如可以提供实时交通信息、路线规划、语音提示等等。同时，它还拥有更加稳定和快速的定位系统，确保用户能够随时随地准确导航。 此外，为了满足用户的个性化需求，凯立德导航公司还设计了多种样式的导航地图，方便用户选择自己喜欢的地图样式，从而增强使用体验。凯立德导航公司还会不断更新和升级导航设备的软件，为用户提供更多的功能和服务。 总之，2022年凯立德导航夏季3p21j30下载代表了导航设备的最新技术和功能，无疑将成为消费者们的首选。它将为人们提供更为便利的出行体验，并且深受广大车主的喜爱和认可。 ### 回答2： 2022年凯立德导航夏季3p21j30版本的下载，需要先确认您使用的设备是属于凯立德导航支持的设备型号，以便您可以正常的下载和使用该版本软件。在下载前，您可以到凯立德官网或应用商店中搜索“凯立德导航”关键词，找到适合您设备型号的软件版本进行下载安装。 在使用凯立德导航时，需要注意以下几点： 1. 软件版本：凯立德导航提供了多个版本，包括免费版和付费版，根据您的实际需求选择相应的版本进行下载使用。 2. 地图更新：为了保证准确的导航，建议您定期更新导航地图，以便获得最新的路况信息和地图数据。 3. 使用标准：在使用凯立德导航时，请遵守交通规则，注意交通安全，不要在驾驶过程中看手机或操作软件，以免发生危险事故。 总之，下载2022年凯立德导航夏季3p21j30版本需要符合设备型号要求，并注意软件的版本和地图更新，遵守交通规则等。相信凯立德导航将会为您提供方便快捷的导航服务，帮助您安全出行。 ### 回答3： 抱歉，作为AI语言模型，我无法提供关于未来产品的下载信息。当时间到了2022年，您可以通过相关官方渠道获取凯立德导航夏季3p21j30版本的下载信息。同时，我们也希望在此提醒您，下载软件时一定要遵循官方正规渠道，并且保持警惕，避免下载和使用未知来源的软件，以免造成损失。谢谢！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值