微信小程序入门与实战

文章列表页的实现

    • 构建静态列表数据
    • 读取数据将数据存储在内存中
    • 构建工具类获取内存数据
    • 在对应页面调取缓存数据
    • 定义模板的item组件item.wxml
    • 使用item.wxml模板
    • 定义模板的item样式item.wxss
    • 使用item.wxss样式

微信小程序入门与实战_第1张图片

构建静态列表数据

  1. 新建data.js文件
  2. 模拟数据
  3. 导出模块数据
属性 解析
module.exports 将数据导出
var postList = [{
  date: "Jan 28 2017",
  title: "小时候的冰棍儿与雪糕",
  postImg: "/images/post/post-4.jpg",
  avatar: "/images/avatar/avatar-5.png",
  content: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯,而5分1毛的 冰棍儿就像现在的老冰棒。时过境迁,...",
  readingNum: 23,
  collectionNum: 3,
  commentNum: 0,
  author: "林白衣",
  dateTime: "24小时前",
  detail: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯,而5分1毛的 冰棍儿就像现在的老冰棒。时过境迁,当年的老冰棍也随着童年的记忆消失不见踪影。记得小时候,每当傍晚时分,总有一个老人推着一辆小车,小车的后架上放着一个大大的白色泡沫盒子。老人一边推着车,一边叫喊着:雪糕、冰棍...",
  postId: 1,
  music: {
    url: "http://ws.stream.qqmusic.qq.com/C100001Dc80Z3qPj2Z.m4a?fromtag=38",
    title: "罗大佑 恋曲1980",
    coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003cWU1M2qNwxZ.jpg?max_age=2592000",
  },
  collectionStatus: true,
  upStatus: false,
  upNum: 11,
  comments: []
},
{
  date: "Jan 9 2017",
  title: "从童年呼啸而过的火车",
  postImg: "/images/post/post-5.jpg",
  avatar: "/images/avatar/avatar-1.png",
  content: "小时候,家的后面有一条铁路。听说从南方北上的火车都必须经过这条铁路。火车大多在晚上经过,但也不定是只有在夜深人静的时候,火车的声音才能从远方传来...",
  readingNum: 96,
  collectionNum: 7,
  commentNum: 4,
  author: "林白衣",
  dateTime: "24小时前",
  detail: "小时候,家的后面有一条铁路。听说从南方北上的火车都必须经过这条铁路。火车大多在晚上经过,可呜呜的汽笛声,往往却被淹没在傍晚小院儿里散步的人群声中。只有在夜深人静的时候,火车的声音才能清晰的从远处飘过来。虽然日日听见火车的汽笛声,可说也奇怪,我竟从来不知道铁路在哪里。在每个夏日午后,我都会有一种去找寻找铁路的冲动,去看看这条铁路究竟是从哪里来,又将通向哪里去",
  postId: 2,
  music: {
    url: "http://ws.stream.qqmusic.qq.com/C100004VybKS2SpZVL.m4a?fromtag=38",
    title: "齐秦 原来的我",
    coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003ZvAeK2PgA4Y.jpg?max_age=2592000"
  },
  collectionStatus: true,
  upStatus: true,
  upNum: 22,
  comments: [
    {
      username: '青石',
      avatar: '/images/avatar/avatar-3.png',
      create_time: '1484723344',
      content: {
        txt: ' 那一年的毕业季,我们挥挥手,来不及说再见,就踏上了远行的火车。

你可能感兴趣的:(微信小程序入门与实战)