慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第5章小程序的模板化和模块化-将业务中的数据分离到单独的数据文件中

将业务中的数据分离到单独的数据文件中

1.进入目录 pages/posts，修改文件 posts.js，清除垃圾代码

// pages/posts/posts.js
Page({
  //产生事件 捕捉事件 回调函数 处理事件
  /**
   * 页面的初始数据
   */
  data: {
    date:'Nov 18 2019',
    title:'正是虾肥蟹壮时'
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var posts_content = [{
      date:'Nov 18 2019',
      title:'正是虾肥蟹壮时',
      post_img: '/images/post/crab.png',
      author_img: '/images/avatar/1.png',
      content:'菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，',
      view_num:'112',
      collect_num:'96'
    }, {
      date: "Sep 20 2016",
      title: "比利·林恩的中场故事",
      post_img: "/images/post/bl.png",
      author_img: '/images/avatar/1.png',
      content: "一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。",
      view_num: 96,
      collect_num: 92,

    }]

    this.setData({
      posts_key:posts_content
    });
  }
})

2.进入目录  pages/welcome，修改文件 welcome.js，清除垃圾代码

Page({
  onTap:function() {
    // wx.navigateTo({
    //   url:'../posts/posts'
    // });

    wx.redirectTo({
     url: '../posts/posts',
    })
  },
})

3.进入目录 pages/posts，修改文件 posts.wxml，清除垃圾代码

<view>
  <swiper vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <block wx:key="1" wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
    <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.author_img}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.post_img}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="../../images/icon/chat.png"></image>
        <text class="post-like-font">{{item.collect_num}}</text>
        <image class="post-like-image" src="../../images/icon/view.png"></image>
        <text class="post-like-font">{{item.view_num}}</text>
      </view>
    </view> 
  </block>  
</view>

4.进入目录 pages/posts，修改文件 posts.js，修改 posts_content 里的数据名

// pages/posts/posts.js
Page({
  //产生事件 捕捉事件 回调函数 处理事件
  /**
   * 页面的初始数据
   */
  data: {
    date:'Nov 18 2019',
    title:'正是虾肥蟹壮时'
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var posts_content = [
      {
        date:'Sep 18 2019',
        title:'正是虾肥蟹壮时',
        imgSrc: '/images/post/crab.png',
        avatar: '/images/avatar/1.png',
        content:'菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，',
        reading:'112',
        collection:'96'
      }, 
      {
        date: "Nov 25 2016",
        title: "比利·林恩的中场故事",
        imgSrc: "/images/post/bl.png",
        avatar: '/images/avatar/1.png',
        content: "一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。",
        reading:"112",
        collection:"96",
      }
    ]

    this.setData({
      posts_key:posts_content
    });
  }
})

5.进入目录  pages/welcome，修改文件 welcome.js，修改读取数据名

<view>
  <swiper vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <block wx:key="1" wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
    <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="../../images/icon/chat.png"></image>
        <text class="post-like-font">{{item.collection}}</text>
        <image class="post-like-image" src="../../images/icon/view.png"></image>
        <text class="post-like-font">{{item.reading}}</text>
      </view>
    </view> 
  </block>  
</view>

6.新建目录 data

7.进入目录 data，新建文件 posts-data.js，可使用 Alt + Shift + p 调整格式化代码样式

var local_database = [{
    date: 'Sep 18 2019',
    title: '正是虾肥蟹壮时',
    imgSrc: '/images/post/crab.png',
    avatar: '/images/avatar/1.png',
    content: '菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，',
    reading: '112',
    collection: '96'
  },
  {
    date: "Nov 25 2016",
    title: "比利·林恩的中场故事",
    imgSrc: "/images/post/bl.png",
    avatar: '/images/avatar/1.png',
    content: "一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。",
    reading: "112",
    collection: "96",
  },
  {
    //按住alt + shift + F 可以格式化代码样式
    date: "Nov 12 2016",
    title: "当我们在谈论经济学时，我们在谈论什么?",
    imgSrc: "/images/post/sls.jpg",
    avatar: "/images/avatar/3.png",
    content: "引言在我跟学生课后交流时，以及我在知乎上阅读有关“经济”问题的论题时，经常会遇到这样的情况：...",
    reading: 62,
    collection: 92,
  },
  {
    date: "Nov 20 2016",
    title: "微信·小程序开发工具安装指南",
    imgSrc: "/images/post/xiaolong.jpg",
    avatar: "/images/avatar/5.png",
    content: "这两天闲来无事，也安装了 “微信折叠”的开发工具来玩一下。以下是一些小道消息及使用体验，过两天我会写一篇文章以开发者的角度来详细评价微信小程序",
    reading: 102,
    collection: 92,
  },
  {
    date: "Nov 20 2016",
    title: "从视觉到触觉 这款VR手套能给你真实触感",
    imgSrc: "/images/post/vr.png",
    avatar: "../../../images/avatar/3.png",
    content: "8月29日消息，据国外媒体VentureBeat报道，一家名为Dexta Robotics的公司最近发布了一款有望变革虚拟现实手部追踪与交互方式的新产品",
    reading: 102,
    collection: 26,
  },
]