高校新闻网

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

<center>姓名：李昕翰  学号：20020007038</center>

| -------------------- | -------------------------------- |

| 本实验属于课程 | 中国海洋大学22夏《移动软件开发》 |

| 实验名称           | 实验4：高校新闻网          |

| 博客地址           | https://blog.csdn.net/lixinhan0305?spm=1000.2115.3001.5343  |

| Github仓库地址     | https://gitee.com/lxh0305/codes/new（gitee）|

## **一、实验目标**

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

## 二、实验步骤

1. 项目创建与页面配置
2. 进行底部导航栏设计，tabBar设计，页面设计等操作，相关代码如下

"window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#328EEB",

    "navigationBarTitleText": "我的新闻网",

    "navigationBarTextStyle":"white"

  }

"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":"我的"

      }

    ]

  }

<!--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. 进行公共逻辑、首页逻辑、新闻业逻辑和个人中心页逻辑的实现，页面预览效果如下：

4、清楚临时数据，最后需要清除或注释掉一开始未来测试样式录入的临时数据，以免影响整体逻辑效果

## 三、程序运行结果

列出程序的最终运行结果及截图。

界面主页运行截图：

个人登录界面以及浏览已收藏新闻的效果：

## 四、问题总结与体会

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

这次实验我遇到的问题主要是在个人登录界面始终无法登录并录入个人信息，最后查询原因发现是调试基础库的版本比较低，无法运行读入个人信息的函数getMyInfo，后来修改调试基础库版本后成功登录。通过这次实验我也学会了如何制作一个实现一个基于模拟数据的简易高校新闻小程序，也了解到了更多关于前端开发的知识，提升了自己的开发能力。