移动软件开发 实验4

一、 实验目标

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

• 实验步骤

1. 创建项目

·创建页面文件

·删除和修改文件

·创建其他文件

2.视图设计

2.1导航栏设计:添加app.json代码，更改导航栏背景色为蓝色、字体色为白色，并可以切换首页和个人中心页。代码实现如下：

·app.json

{

    "pages": [

        "pages/index/index",

        "pages/detail/detail",

        "pages/my/my"

    ],

    "window": {

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

            }

        ]

    },

    "sitemapLocation": "sitemap.json"

}

公共页面代码：

·app.wxss

/**app.wxss**/

/*新闻列表区域样式*/

/*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%;

    display:block;

    line-height:60rpx;

    font-size:10pt;

}

2.2页面设计

1. 首页（index）

需求分析：首页需要包含幻灯片播放效果和新闻列表；幻灯片至少要有3幅图片自动播放；点击新闻列表可以打开新闻全文。首页设计代码如下：

·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>

·index.wxss

/*pages/index/index.wxss*/

/*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. 新闻页（detail）

需求分析：阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；已经收藏过的新闻也可以点击按钮取消收藏。新闻页代码如下：

·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='cancleFavorites'>♥已收藏</button>

    <button wx:else plain bindtap='addFavorites'>♥点击收藏</button>

</view>

·detail.wxss

/* pages/detail/detail.wxss */

.container{

    padding:15rpx;

    text-align:center;

}

/*新闻标题*/

.title{

    font-weight:800;

    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:300rpx;

    height:100rpx;

    margin:20rpx auto;

}

1. 个人中心页（my）

需求分析：未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。登录后读取当前用户的收藏夹，展示收藏的新闻列表。收藏夹中的新闻可以直接点击查看内容。未登录状态下收藏夹显示为空。个人中心页设计代码如下：

 

·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" bindtap="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>◇{{news.title}}{{news.add_date}}</text>

        </view>

    </view>

</view>

·my.wxss

/* pages/my/my.wxss */

#myLogin{

    background-color:#328EEB;

    height:500rpx;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:space-around;

}

/*1-1 头像图片*/

#myIcon{

    width:200rpx;

    height:200rpx;

    border-radius:50%;

}

/*1-1 微信昵称*/

#nickName{

    color:white;

}

/*1-1 我的收藏*/

#myFavorites{

    padding:20rpx;

}

3.逻辑实现

（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) {

    let id = e.currentTarget.dataset.id;

    wx.navigateto({

        url: '../detail/detail?id=' + id,

    })

},

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function(options) {

    //获取新闻列表

    let list = common.getNewsList()

    //更新列表数据

    this.setData({newsList: list})

  },

})

1. 新闻页逻辑

功能分析：显示对应新闻；可以添加新闻收藏。代码实现如下：

·detail.js

// pages/detail/detail.js

var common = require('../../utils/common')

Page({

    /**

     * 页面的初始数据

     */

    data: {

        

    },

    /**

     * 生命周期函数--监听页面加载

     */

    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,

                })

            }

        }

},

    addFavorites:function(options){

        let article=this.data.article;

        wx.setStorageSync(article.id,article);

        this.setData({isAdd:true});

    },

    cancalFavorites:function(){

        let article=this.data.article;

        wx.removeStorageSync(article.id);

        this.setData({isAdd:false});

},

})

1. 个人中心页逻辑

功能分析：获取微信用户信息；获取收藏列表；浏览收藏的新闻。代码实现如下：

 

·my.js

// pages/my/my.js

Page({

    /**

     * 页面的初始数据

     */

    data:{

        num:0

    },

    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

            })

            wx.setStorageSync('islogin', true)

          }

        })

        this.getMyFavorites();

    },

    goToDetail:function(e){

      let id=e.currentTarget.dataset.id;

      wx.navigateto({

        url:'../detail/detail?id='+id,

      })

    },

    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:function() {

        if(this.data.isLogin){

          this.getMyFavorites()

        }

      },  

    /**

     * 生命周期函数--监听页面加载

     */

    onLoad() {

        if (wx.getUserProfile) {

            this.setData({

                canIUseGetUserProfile: true

            })

        }

},

}）