微信小程序新手教程开发示例体验( 二 ) _睿知

列表里会有很多的条目，数量是不确定的，所以我们不能在页面里写死了布局，这时候就要用到模板(template)了，我们可以在模板中定义代码片段，然后在不同的地方调用
我们来定义一个模板，打开pages/templates/item.wxml ，添加代码
{{item.date}}
{{item.title}}
注: 模板的使用细节请参考官方文档模板一节
接下来打开pages/index/index.wxml删掉里面的内容，我们要在这里编写列表页，这里会使用到我们上面定义的模板
没有更多内容了
内容加载中...
Loading...
可以注意到第一行使用了import将模板引入到页面中，然后再使用is属性，声明需要使用的模板，用data属性传入数据供模板使用
注: 模板拥有自己的作用域，只能使用data传入的数据
为了测试和查看布局效果，我们打开pages/index/index.js删除里面的代码，然后添加以下代码手动创建数据传入给页面渲染
Page({
data: {
hidden: true,
events: [
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天"
},
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天"
},
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天"
},
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天"
},
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天"
},
{
date: "2016-10-14",
title: "TodayOnHistory, 历史上的今天"
}
]
}
})
保存后点击开发工具左侧的编译，即可查看到效果

文章插图
首页布局效果
注: 布局会用到图标字体，导入到res/下，样式则写在app.wxss全局样式表中，图标字体文件和样式请从源码中获取，这篇教程不作样式的说明
详细页面
首页的布局已经完成了，暂时放下首页列表，接下来开始编写详细内容的页面
打开pages/detail/detail.wxml ，添加内容如下
{{detail.title}}
{{detail.content}}

文章插图
{{item.pic_title}}
Loading...
搞定，这个页面就这么简单就OK了，现在我们打开pages/detail/detail.js手动添加数据到这个页面中查看效果
Page({
data:{
hidden: true,
detail: {
title: "历史上的今天",
content: "历史上的今天历史上的今天历史上的今天历史上的今天历史",
picUrl: [
{
url: "http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/
ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg",
pic_title: "这是图片标题"
}
]
}
}
})

文章插图
详细页面效果
填充数据
现在页面布局都已经完成了，是时候调用API编写逻辑层的代码来填充数据到页面上了，在开始之前我们先清理一下无用的代码
打开app.js删掉无用的函数和属性
App({
})
})
以上这步是额外步骤，并不影响我们接下来要做的事情
打开utils/util.js并清空里面的代码，添加如下内容
// 查询事件列表的Base URL
const API_URL_L = "http://v.juhe.cn/todayOnhistory/queryEvent.php"
// 查询详细信息的Base URL
const API_URL_D = "http://v.juhe.cn/todayOnhistory/queryDetail.php"
// 申请API获得的KEY
const API_KEY = "YOUR API KEY"
// 获取事件列表
function fetchEvents(today) {
var promise = new Promise(function(resolve, reject){