移动软件开发四——高校新闻网

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

一、实验目标

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

二、实验步骤

1. 项目结构

2.视图设计

2.1底部栏设

底部栏使用微信小程序自带的tabBar实现

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

2.2首页设计

2.2.1幻灯片设计

利用swiper实现幻灯片并使用wx:for实现幻灯片的图片替换

<!--幻灯片滚动-->
<swiper indicator-dots autoplay interval="5000" duration="500">
<block wx:for ="{
    {swiperImg}}" wx:key ='swiper{
    {index}}'>
<swiper-item>
<image src="{
    {item.src}}" class="slide-image"></image>
</swiper-item>

2.2.2 新闻列表设计

使用wx:for设计每一条新闻的view，再使用data中的数据进行加载，由于在这个项目中要通过点击新闻跳转到新闻详细界面，因此需要添加跳转方法

<view id ='news-list'>
<view class='list-item' wx:for="{
    {newsList}}" wx:for-item ="news"<