先去改一下页面的背景颜色 .. 我打算用一个浅灰色 .. 打开 app.wxss .. 设置一下 page 的样式 .. 添加一个 background ，值是 #f8f8f8 ..

再打开首页的视图文件 .. pages/index/index.wxml ..

视图页面的样式大部分都是来自 weui 这个样式框架 ..

先用一个 navigator 组件， 上面加上一个 media-box 里面用一下 wx:for 去循环处理一下页面上的 entities 这个数据，在页面上我们已经请求了后端服务接口，把得到的内容列表数据放在了页面的 entities 里面了 ..

再添加一个 wx:key ，列表项目的这个 wx:key 的值都应该是不一样的 .. 这里我们可以用一下内容的 id 作为它的值 .. item.id .. item 表示的是每次循环当前的项目 .. id 是项目里面的一个属性的名字 ..

里面包装一个 view ，上面加上 media-box__bd ， 它里面是具体的内容， 内容的标题放在一个 view 里面，上面加上 media-box__title ..

它里面绑定输出的就是文章标题 ..

可以先回到开发者工具，去浏览一下 .. 打开一个数据项目 .. 它的 title 就是内容的标题，具体要显示的内容是在 title 下面的 rendered 这个属性里面 ..

这里我们绑定输出一个 item.title.rendered

标题的下面是一段描述 .. 一个 view，上面加上 media-box__desc ..

再回到开发者工具 ..

项目里面的 excerpt 下面的 rendered 就是文章内容的一小段描述 .. 也就是文章的摘要内容 ..

描述这里，可以绑定输出一个 item.excerpt.rendered ..

预览

现在小程序的首页上就会显示一组内容列表 .. 不过现在有个问题 .. 就是项目的摘要内容里面的 html 标签的名字都显示出来了 . .