小程序（六）template模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

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

我们要在根目录下创建一个data本地数据库文件夹，在data文件夹下创建 newslist-data.js ,然后将newslist.js中onLoad 函数下的 var 复制过来
newslist-data.js

var local_database = [{
    date: "Sep 18 2016",
    title: "正是虾肥蟹壮时",
    imgSrc: "/images/post/crab.png",
    avatar: "/images/avatar/avatar.jpg",
    content: "菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为",
    reading: "92",
    collection: "65"
  },
  {
    date: "Nov 25 2016",
    title: "比利·林恩的中场故事",
    imgSrc: "/images/post/bl.png",
    avatar: "/images/avatar/2.png",
    content: "一“李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的”",
    reading: "112",
    collection: "96",
  },
  {
    date: "Nov 12 2016",
    title: "当我们在谈论经济学时，我们在谈论什么？",
    imgSrc: "/images/post/sls.png",
    avatar: "/images/avatar/3.png",
    content: "引言在我跟学生课后交流时，以及我在知乎上阅读有关“经济”问题的论题时，经常会遇到这样的情况",
    reading: "62",
    collection: "92",
  }
]
module.exports = {//给数据定义一个出口
  postList: local_database
}

2 使用require方法加载js模块儿文件

newslist.js

var postsData = require("../../data/newslist-data.js") //获取数据库中的数据，只能用相对路径
Page({
  data: {
    //小程序总是会读取data对象来做数据绑定，这个动作我们成为动作A
    //而这个动作A的执行，是在onLoad事件执行之后发生的
  },
  onLoad: function (options) {// 页面初始化 options 为页面跳转所带来的参数
    //this.data.postList = postsData.postList  //wxml调用时 wx:for={{postList}}
    this.setData({
      posts_key:postsData.postList
    }); 
  },
})

3 template模块的使用

创建一个模板文件夹newslist-item，在该文件夹下创建newslist-item-template.wxml和newslist-item-template.wxss文件
newslist-item-template.wxml

引入template模板
newslist.wxml