微信小程序之实现文章列表

一、添加页面

在 app.json的 pages中添加 "pages/post/post"并放在第一个，那么会被小程序作为初始页面。
此时会自动生成 post.js，post.json，post.wxml，post.wxss四个文件。

二、准备图片素材

新建 images，底下再创建三个文件夹，分别是 avatar、icon、post。

• avatar存放头像
• icon存放收藏、阅读和评论数量的图标
• post存放文章图片

三、编写 post.js

// pages/post/post.js

/**
 * @author: yunhu
 * @date: 2023/7/12
 */

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 一个页面的生命周期只会执行一次
    console.log("onLoad: 页面被加载")
    // localPostList 是一个数组，数组中的每一个元素都是对象。
    var localPostList = [{
        object: {
          date: "Jan 25 2023"
        },
        title: "小时候的冰棍和雪糕",
        postImg: "/images/post/post-1.jpg",
        avatar: "/images/avatar/avatar-1.jpg",
        content: "test冰棍与雪糕不是一个东西，冰棒是指由水、果汁、糖、牛乳等混合搅拌冷冻而成的一种长条形，中有细棍的冰品，时过境迁，",
        readingNum: 92, 
        collectionNum: {
          array: [108]
        },
        commentNum: 7
      },
      {
        object: {
          date: "Jan 25 2023"
        },
        title: "从童年呼啸而过的火车",
        postImg: "/images/post/post-2.jpg",
        avatar: "/images/avatar/avatar-2.jpg",
        content: "火车，是指在铁路轨道上行驶的车辆，通常由多节车厢所组成，可以载运乘客或是货物。",
        readingNum: 44, 
        collectionNum: {
          array: [555]
        },
        commentNum: 444  
      },
      {
        object: {
          date: "Jan 25 2023"
        },
        title: "记忆中的春节",
        postImg: "/images/post/post-3.jpg",
        avatar: "/images/avatar/avatar-3.jpg",
        content: "春节，是以农历计算的中国传统新年，亦称新春、正旦、正月朔日，其庆祝活动又俗称过年、度岁等，是汉族四大传统节日之一。从明代开始，华夏新年节庆一般要到正月十五日元宵节之后才正式结束活动，有些地方的新年庆祝活动甚至到整个正月完结为止。辛亥革命后，官方纪年标准由农历改为格里历。华夏新年与朝鲜新年、越南新年、琉球新年和明治维新前的日本新年多数为同一日，而与藏历新年、蒙古新年同日或差一天或一月。",
        readingNum: 44, 
        collectionNum: {
          array: [22]
        },
        commentNum: 566  
    }]

    this.setData({
        postList: localPostList
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 一个页面的生命周期只会执行一次
    console.log("onReady: 页面初次渲染")
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("onShow: 页面显示")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("onShow: 页面隐藏")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log("onUnload: 页面被卸载")
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

四、编写 post.wxml

有了数据，那么就把数据显示到界面上，这边使用 wx:for 列表渲染。

<view>
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
    <view class="post-container">
      <view class="post-author-date">
        <image src="{{item.avatar}}">image>
        <text>{{item.object.date}}text>
      view>
      <text class="post-title">{{item.title}}text>
      <image class="post-image" src="{{item.postImg}}">image>
      <text class="post-content">{{item.content}}text>
      <view class="post-like">
        <image src="/images/icon/wx_app_collect.png">image>
        <text>{{item.collectionNum.array[0]}}text>
        <image src="/images/icon/wx_app_view.png">image>
        <text>{{item.readingNum}}text>
        <image src="/images/icon/wx_app_message.png">image>
        <text>{{item.commentNum}}text>
      view>
    view>
block>
view>

五、wxss 美化

/* pages/post/post.wxss */

swiper {
  width: 100%;
  height: 600rpx;
}

swiper image{
  width: 100%;
  height: 600rpx;
}

.post-container {
  flex-direction: column;
  display: flex;
  margin: 20rpx 0 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}

.post-author-date {
  margin: 10rpx 0 20rpx 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.post-author-date image {
  width: 60rpx;
  height: 60rpx;
}

.post-author-date text {
  margin-left: 20px;
}

.post-image {
  width: 100%;
  height: 340rpx;
  margin-bottom: 15px;
}

.post-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}

.post-content {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx; /* 字符间距 */
  line-height: 40rpx;   /* 行高 */
}

.post-like {
  display: flex;
  flex-direction: row;
  font-size: 13px;
  line-height: 16px;
  margin-left: 10px;
  align-items: center;
}

.post-like {
  display: flex;
  flex-direction: row;
  font-size: 13px;
  line-height: 16px;
  margin-left: 10px;
  align-items: center;
}

.post-like image {
  height: 16px;
  width: 16px;
  margin-right: 8px;
}

.post-like text {
  margin-right: 20px;
}

六、效果