移动软件开发——实验四

一、实验目标

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

二、实验步骤

2.1创建项目以及页面配置

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

 

2.2视图设计

2.2.1导航栏设计

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

 

2.2.2tabBar设计

"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.3页面设计

1.首页页面设计

<!--幻灯片滚动-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
    <block wx:for="{{swiperImg}}" wx:key='swiper{{index}}'>
        <swiper-item>
            <image src="{{item.src}}" class="slide-image"></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>{{news.title}}--{{news.add_date}}</text>
    </view>
</view>

2.个人中心页面设计

<!--登陆面板-->
<view id="myLogin">
    <block>
        <image id="myIcon" src="{{src}}"></image>
        <text id="nickName">{{nickName}}</text>
    </block>
</view>
<!--我的收藏-->
<view id="maFavorites">
    <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>
​

3.新闻页面设计

 

wxml文件

<view class="container">
    <view class="title">{{article.title}}</view>
    <view>
        <image src="{{article.poster}}" mode="widthFix"></image>
    </view>
    <view class="content">{{article.content}}</view>
    <view class="add_date">时间：{{article.add_date}}</view>
</view>

 

/*整体容器*/
.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;
}

2.3逻辑实现

2.3.1公共逻辑

//获取新闻列表
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
}

2.3.2首页逻辑

<!--新闻列表-->
<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>

 

2.3.3新闻页逻辑

<!--pages/detail/detail.wxml-->
<view class="container">
    <view class="title">{{article.title}}</view>
    <view>
        <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>

2.3.4个人中心页逻辑 

<!--登陆面板-->
<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" bindtap="getMyInfo">未登录，点此登录</button>
</view>
<!--我的收藏-->
<view id="maFavorites">
    <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>
​

 

 

2.3.5清楚临时数据

三、程序运行结果