ouc2022 移动软件开发 实验四：高校新闻网

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

​一、实验目标

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

二、实验步骤

1、项目创建与配置

按照之前实验介绍的步骤进行项目的创建和配置。本项目一共需要3个页面，即首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。

1.1 首页功能需求

（1）首页需要包含幻灯片播放效果和新闻列表；（2）幻灯片至少要有3幅图片自动播放；（3）点击新闻列表可以打开新闻全文。

1.2 新闻页功能需求

（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；（3）已经收藏过的新闻也可以点击按钮取消收藏。

1.3 个人中心页功能需求

（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。（3）收藏夹中的新闻可以直接点击查看内容。（4）未登录状态下收藏夹显示为空。

2、视图设计

在进行实验时，进行了自己的一些小改动，整体没有变动多少。

2.1 导航栏及 tabBar 设计

app.json 文件代码如下：

{
 "pages":[
  "pages/index/index",
  "pages/detail/detail",
  "pages/my/my"
 ],
 "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": "我的"
     }
   ]
 },
 "style": "v2",
 "sitemapLocation": "sitemap.json"
}

上述代码可以更改导航栏背景色为蓝色、字体色为白色，并可以切换首页和个人中心页，运行效果如下：

2.2 首页设计

首页主要包含两部分内容，即幻灯片滚动和新闻列表。

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 代码如下：

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

2.3 个人中心页设计

个人中心页主要包含两个板块，即登录面板和“我的收藏”，登录面板用于显示用户的微信头像和昵称，“我的收藏”用于显示收藏在本地的新闻列表。

my.wxml 代码如下

<!--pages/my/my.wxml-->
<view class="myLogin">
    <block wx:if="{{isLogin}}">
        <image class="myIcon" src="{{src}}"></image>
        <text class="nickName">{{nickName}}</text>
    </block>
    <button wx:else open-type="getUserInfo" bindtap="getMyInfo">
        未登录，点击登录
    </button>
    <button wx:if="{{isLogin}}" bindtap="goLogout">退出登录</button>
</view>
<view class="myFavorites" wx:if="{{isLogin}}">
    <view class="shoucang">我的收藏--{{num}}</view>
    <view class="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>
</view>

my.wxss 代码如下：

/* pages/my/my.wxss */
.myLogin {
    background-color: #328BBE;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
​
.myIcon {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
}
​
.nickName {
    color: white;
}
​
.myFavorites {
    padding: 20rpx;
}
​
.myFavorites .shoucang {
    width: 100%;
    text-align: center;
    color: black;
    font-size: large;
}
​
.news-list {
    min-height: 600rpx;
    padding: 15rpx;
}
​
.list-item {
    display: flex;
    flex-direction: row;
    border-bottom: 1rpx solid gray;
}
​
.list-item image {
    width: 230rpx;
    height: 150rpx;
    margin: 10rpx;
}
​
.list-item text {
    width: 100%;
    line-height: 60rpx;
    font-size: 10pt;
}

2.4 新闻页设计

新闻页是用于给用户浏览新闻全文的，需要用户点击首页的新闻列表，然后在新窗口中打开该页面。新闻页包括新闻标题、新闻图片、新闻正文和新闻日期。

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="cancelFavorites">♥已收藏</button>
    <button wx:else plain bindtap='addFavorites'>♥点击收藏</button>
</view>

wxss代码如下：

/* pages/detail/detail.wxss */
.container {
    padding: 15rpx;
    text-align: center;
}
​
.title {
    font-weight: 800;
    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;
    margin-bottom: 20rpx;
}
​
button {
    width: 250rpx;
    height: 100rpx;
    margin: 20rpx auto;
}

3、逻辑实现

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) {
        //获取携带的data-id数据
        let id = e.currentTarget.dataset.id;
        //携带新闻id进行页面跳转
        var islogin = wx.getStorageSync('islogin')
        if (islogin) {
            wx.navigateTo({
                url: '../detail/detail?id=' + id
            })
        } else {
            wx.showModal({
                title: '提示',
                content: '你还没有登陆，将跳转至登录界面',
                success: (res) => {
                    if (res.confirm) { //这里是点击了确定以后
                        wx.switchTab({
                            url: '../my/my',
                        })
                    } else { //这里是点击了取消以后
                        console.log('用户点击取消')
                    }
                }
            })
        }
    },
​
    onLoad: function (options) {
        //获取新闻列表
        let list = common.getNewsList()
        //更新列表数据
        this.setData({
            newsList: list,
        })
    },
​
​
})

3.2 新闻页逻辑

新闻页有两个功能：一是显示对应新闻，二是可以添加/取消新闻收藏

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,
                idAdd: 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
        });
    },
​
    cancelFavorites: function () {
        let article = this.data.article;
        wx.removeStorageSync(article.id);
        this.setData({
            isAdd: false
        });
    },
})

3.4 个人中心页面逻辑

个人中心页主要有三个功能：一是获取微信用户信息；二是获取收藏列表；三是浏览收藏的新闻。

my.js 代码如下：

// pages/my/my.js
Page({
    data: {
        num: 0
    },
​
    getMyInfo: function (e) {
        wx.getUserProfile({
            desc: '用于获取信息',
            success: (res) => {
                this.setData({
                    isLogin: true,
                    src: res.userInfo.avatarUrl,
                    nickName: res.userInfo.nickName
                })
                wx.setStorageSync('islogin', true)
            }
        })
        this.getMyFavorites();
    },
​
    goLogout() {
        wx.showModal({
            title: '提示',
            content: '您确定要退出登录吗',
            success: (res) => {
                if (res.confirm) { //这里是点击了确定以后
                    console.log('用户点击确定')
                    wx.setStorageSync('islogin', false)
                    this.setData({
                        src: '',
                        nickName: '',
                        isLogin: false
                    })
                } else { //这里是点击了取消以后
                    console.log('用户点击取消')
                }
            }
        })
    },
​
    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
        });
    },
​
    goToDetail: function (e) {
        let id = e.currentTarget.dataset.id;
        wx.navigateTo({
            url: '../detail/detail?id=' + id,
        })
    },
​
    onLoad(options) {
​
    },
​
​
    onShow: function () {
        if (this.data.isLogin) {
            this.getMyFavorites()
        }
    },
})

三、程序运行结果

1、个人页面

 

 

2、首页

3、新闻详情

四、问题总结与体会

下面介绍我做的一些小改动（改动后代码即之前所附代码）：

1、新增登出功能。

这一步是和登录功能相适配，实验文档给出的是，当 用户选择登录后，会一直保持登录状态（以在微信开发者平台为例），除非重新编译，我这里添加一个登出功能，当用户保持登录状态时，重新编译也不会登出，除非用户选择”退出登录“，相关代码如下：

my.wxml 中，对于登录按钮，适配登出按钮

<button wx:else open-type="getUserInfo" bindtap="getMyInfo">
        未登录，点击登录
</button>
<button wx:if="{{isLogin}}" bindtap="goLogout">退出登录</button>

my.js 中新增登出函数，代码如下：

goLogout() {
        wx.showModal({
            title: '提示',
            content: '您确定要退出登录吗',
            success: (res) => {
                if (res.confirm) { //这里是点击了确定以后
                    console.log('用户点击确定')
                    wx.setStorageSync('islogin', false)
                    this.setData({
                        src: '',
                        nickName: '',
                        isLogin: false
                    })
                } else { //这里是点击了取消以后
                    console.log('用户点击取消')
                }
            }
        })
    },

实现的是，当用户点击退出登录的按钮时，出现提示窗进行挽留，当用户再次点击确定退出后才登出，然后将存在 Storage 中的 islogin 改为false（islogin 用来表明用户是否处于登录状态）。

2、修改还未确定登录就显示个人收藏

原文档中，对用户收藏数据的判断是简单的对本地数据进行计数，在测试时，出现用户还未选择登录，个人收藏的数目就发生改变，不符合正常逻辑，因此我将个人收藏及收藏新闻列表设置为登录后可看，同时对 “收藏--” 的样式进行了修改。

my.wxml 部分代码修改如下：

<view class="myFavorites" wx:if="{{isLogin}}">
    <view class="shoucang">我的收藏--{{num}}</view>
    <view class="news-list">
        新闻收藏列表
    </view>
</view>

3、限制新闻的浏览须在登录状态下使用

在原文档中， 新闻详情页面以及新闻的收藏功能无论是否登录都能使用，不符合设定，因此我在跳转至详情界面时对是否登录进行了判断，如果没有登录，则进行提示用户当前未登录，将跳转至登录界面，用户点击确定则跳转登录，取消则相安无事。

 goToDetail: function (e) {
        //获取携带的data-id数据
        let id = e.currentTarget.dataset.id;
        //携带新闻id进行页面跳转
        var islogin = wx.getStorageSync('islogin')
        if (islogin) {
            wx.navigateTo({
                url: '../detail/detail?id=' + id
            })
        } else {
            wx.showModal({
                title: '提示',
                content: '你还没有登陆，将跳转至登录界面',
                success: (res) => {
                    if (res.confirm) { //这里是点击了确定以后
                        wx.switchTab({
                            url: '../my/my',
                        })
                    } else { //这里是点击了取消以后
                        console.log('用户点击取消')
                    }
                }
            })
        }
    },

4、根据个人口味修改了一些样式

对一些我不太习惯的样式进行了调整，比如标题加粗，格式转换，加大空白等等，不再赘述。

5、总结

这个实验同样给出了源代码，但是其中的一些细节处理的比较粗糙，在跟着完成实验的过程中就能感受出来，因此我做出了一些调整，期待下一个实验🌹🌹🌹