移动软件开发-高校新闻网

实验4

一、实验目标

二、实验步骤

1. 搭建小程序页面，美化样式

💡 配置Tabbar

"tabBar": {
        "color": "#000000",
        "selectedColor": "#328EEB",
        "list": [{
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "./images/index.png",
                "selectedIconPath": "./images/index_blue.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "./images/my.png",
                "selectedIconPath": "./images/my_blue.png"
            }
        ]
    },

💡 index 首页设计

编写 wxml 和 wxss 文件，具体代码如下：

<!--index.wxml-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
    <block wx:for="{{swiperImg}}" wx:key="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:key="{{ item.id }}">
        <image src="{{ item.poster }}"></image>
        <view class="right">
            <text>🔷{{ item.title }}</text>
            <text> -- {{item.add_date}}</text>
        </view>
    </view>
</view>

/**index.wxss**/
/* 轮播图 */
swiper {
    height: 400rpx;
}
swiper image {
    width: 100%;
    height: 100%;
}

/* 新闻列表  */
#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 .right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.list-item text {
    width: 100%;
    line-height: 60rpx;
    font-size: 10pt;
}

具体效果如下：

💡 个人中心页设计

代码如下：

<!--pages/my/my.wxml-->
<view id="myLogin">
    <block>
        <image id="myIcon" src="{{ src }}">
            <text id="nickName">{{ nickName }}</text>
        </image>
    </block>
</view>

<!-- 我的收藏 -->
<view id="myFavorites">
    <text>我的收藏</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>
            <view class="right">
                <text>🔷{{ news.title }}</text>
                <text> -- {{news.add_date}}</text>
            </view>
        </view>
    </view>
</view>

/* pages/my/my.wxss */
/* 登录面板 */
#myLogin {
    background-color: #328EEB;
    height: 400rpx;
    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;
}

核心js代码：

// pages/my/my.js
data: {
        // 临时微信用户昵称和头像
        nickName: '未登录',
        src: '../../images/index.png',
        // 临时新闻数据
        newsList: [{
            id: '264698',
            title: '省退役军人事务厅来校交流对接工作',
            poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
            content: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',
            add_date: '2022-08-19'
        }]
    },

实际效果如下：

💡 新闻页设计

先用 wxml 和 wxss 搭建页面的框架，后用 js 文件添加临时测试数据，

<!--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>
</view>

/* pages/detail/detail.wxss */
.container {
    padding: 15rpx;
    text-align: center;
}
/* 新闻标题 */
.title {
    font-size: 14pt;
    line-height: 80rpx;
}
/* 新闻图片 */
.poster image {
    width: 100%;
    /* width: 700rpx; */
}
/* 新闻正文 */
.content {
    text-align: center;
    font-size: 12pt;
    line-height: 60rpx;
}
/* 新闻日期 */
.add_date {
    font-size: 12pt;
    text-align: right;
    line-height: 30rpx;
    margin-right: 25rpx;
    margin-top: 20rpx;
}

// pages/detail/detail.js
data: {
        article: {

            id: '264698',
            title: '省退役军人事务厅来校交流对接工作',
            poster: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg',
            content: ' 8月19日，省退役军人事务厅二级巡视员蔡元和、办公室主任刘恒贵、就业创业处副处长钟俊武一行来校就联合共建安徽退役军人学院事宜进行交流对接。校党委常委、副校长陆林，芜湖市退役军人事务局党组成员、副局长张桂芬，学校办公室、人事处、教务处、招就处、学生处、研究生院、体育学院负责同志参加会议。',
            add_date: '2022-08-19'
        }

    },

具体效果如下：

逻辑部分

💡 首页逻辑

1. 在 onLoad() 生命周期函数中，请求首页的新闻数据，并赋值给首页的 data
2. 点击 新闻item，跳转到对应新闻的详情页（具体是在导航的时候传递参数，参数是新闻对应的 id ）

核心代码如下：

<!--index.wxml-->
<view class="list-item" wx:for="{{newsList}}" wx:key="index" bindtap="goToDetail" data-id="{{item.id}}">
        <image src="{{ item.poster }}" mode="widthFix"></image>
        <view class="right">
            <text>🔷{{ item.title }}</text>
            <text> -- {{item.add_date}}</text>
        </view>
    </view>

// index.js
// 跳转到详情页
    goToDetail(e) {
        // console.log("跳转id", e.currentTarget.dataset.id);
        wx.navigateTo({
          url: '../detail/detail?id=' + e.currentTarget.dataset.id,
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({
            newsList: common.getNewsList()
        })
    },

// detail.js
onLoad(options) {
        this.setData({
            query: options
        })
        // 根据 id 获取新闻数据
        let msg = common.getNewsDetail(this.data.query.id);
        console.log(msg);
        if(msg.code == 200) {
            this.setData({
                article: msg.news
            })
        }else {
            this.wx.showToast({
              title: '无您查找的文章',
              duration: 1000,
            })
        }
    },

💡 收藏功能的逻辑

实现思路如下：

1. 在 LocalStorage 中存入一个数组，当作收藏夹。
2. 点击收藏按钮，则先从 LocalStorage 中读取收藏夹，将当前新闻 push 到收藏夹中，再将收藏夹存入 LocalStorage 中。
3. 点击取消收藏，先从 LocalStorage 中读取收藏夹，将当前新闻从收藏夹中删除，再将收藏夹存入 LocalStorage 中。

核心代码如下：

// 添加收藏
    addFavor() {
        // 将当前新闻 push 入收藏夹，既放入 localStorage
        let FavorList = [];
        FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]');
        FavorList.push(this.data.article)
        this.setData({
            isAdd: true
        })
        wx.setStorageSync('FavorList', JSON.stringify(FavorList))
    },

    // 取消收藏
    cancelFavor() {
        // 需要取消收藏的新闻下标
        let index = 0
        let FavorList = [];
        FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]');
        // 找下标
        FavorList = FavorList.filter(each => {
            return each.id != this.data.query.id
        })
        // 删除元素
        wx.setStorageSync('FavorList', JSON.stringify(FavorList))

        this.setData({
            isAdd: false
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            query: options
        })
        // 根据 id 获取新闻数据
        let msg = common.getNewsDetail(this.data.query.id);
        if (msg.code == 200) {
            this.setData({
                article: msg.news
            })
            // 查找是否被收藏
            let FavorList = [];
            FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]');
            FavorList.forEach(each => {
                if (each.id == this.data.query.id) {
                    this.setData({
                        isAdd: true
                    })
                }
            })
        } else {
            this.wx.showToast({
                title: '无您查找的文章',
                duration: 1000,
            })
        }
    },

💡 个人页的逻辑

个人也需要实现的逻辑有以下两个：

1. 实现登录功能。这个在实验1中用到过，即调用微信最新的 getUserProfile 接口。
2. 用户登录后，获取在 LocalStorage 收藏夹中的新闻，并动态渲染在页面上。有了前面的铺垫，此处信手拈来。

// 用户登录函数
    getUserProfile() {
        wx.getUserProfile({
            desc: '获取用户头像、昵称',
            success: (res) => {
                // 获取个人信息
                this.setData({
                    src: res.userInfo.avatarUrl,
                    nickName: res.userInfo.nickName,
                    isLogin: true
                })
                // 获取收藏新闻
                this.getFavorList();
            }
        })
    },

    // 获取收藏新闻
    getFavorList(){
        let FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]')
        this.setData({
            newsList: FavorList,
            FavorCount: FavorList.length
        })
    },
/**
     * 生命周期函数--监听页面显示
     */
		// 作用是，如果用户已登录，每次进入个人页，都会动态刷新收藏列表。// 取消收藏
    cancelFavor() {
        // 需要取消收藏的新闻下标
        let index = 0
        let FavorList = [];
        FavorList = JSON.parse(wx.getStorageSync('FavorList') || '[]');
        // 找下标
        FavorList = FavorList.filter(each => {
            return each.id != this.data.query.id
        })
        // 删除元素
        wx.setStorageSync('FavorList', JSON.stringify(FavorList))

        this.setData({
            isAdd: false
        })
    },
    onShow() {
        if(this.data.isLogin) {
            this.getFavorList()
        }
    },

三、程序运行结果

四、问题总结与体会

这次的小程序收尾项目体量和之前的小程序比起来明显大了很多，增加了诸如页面跳转、导航传参、本次存储等功能。总体写起来感觉比较轻松。

碰到过一次问题就是用 localStorage 时候的语法。还有就是如何从数组中删除一个元素，在网上查找相关博客，用 js 中的 filter 函数便可以实现功能。

这4节小程序，对于没有了解过小程序的同学们，可以让他们对小程序有一个初步的了解，为以后做项目打下了良好的基础。