注意，以上代码只标注出了相关修改和增加代码，并非全部代码。首先修改constructor构造函数，增加一个构造参数postId，并将postId保存到this变量中。
接着增加一个方法getPostItemById用于获取指定id号的文章数据。
DBPost修改完毕后，我们尝试在post-detail.js中获取指定id号的文章数据，并使用this.setData绑定该数据。
代码清单 6-9 获取指定ID号的文章数据 post-detail.js
import { DBPost } from '../../../db/DBPost.js';
Page({
data:{},
onLoad:function(options){//获取指定ID的文章数据
var postId = options.id;//不能用逗号
this.dbPost = new DBPost(postId);
this.postData = this.dbPost.getPostItemById().data;
this.setData({
post:this.postData
} )
},
}
)
注意上述代码中，在使用new实例化DBPost后，将dbPost这个对象保存在了变量this中，这样以后如果要再次使用DBPost，则不需要再重新实例化这个对象，只需要使用this.dbPost即可引用这个对象。
.6 文章id号的数据流向图
6.6 文章id号的数据流向图
我们来疏理一下，post-detail.js是如何从初始化数据中拿到文章id号，并最终通过id号来获取到文章详情数据的，参见图6-5所示。
图6-5 文章id号流向图
文章id号最初是存在于data.js中的，通过一系列的事件操作，它最终会被传递到post-detail.js中。一旦post-detail.js拿到文章的id号，该页面就可以根据id号来获取文章详情数据了。
6.7 编写文章详情页面
6.7 编写文章详情页面
在代码清单6-9中，我们获取了文章的postId，并通过DBPost查询到了该文章的相关数据，随后我们用this.setData函数做了文章数据的数据绑定。下面，我们来编写文章详情页面的骨架和样式。
在post-detail.wxml中加入以下页面骨架代码：
代码清单6-10 编写详情页面骨架 post-detail,wxml
{{post.title}}
{{post.author}}
{{post.dataTime}}
{{post.detail}}
还是要注意代码中{{}}中的数据绑定语法一定要正确，否则无法读取数据。保存并运行代码，post-detail页面将显示这些文章数据。
但整个页面的样式是错乱的，因为还没有编写post-detail页面的wxss文件。
代码清单 6-11 编写详情页面的样式 post-detail.wxss
.container{
flex-direction: column;
display: flex;
}
head-image{
width:750rpx;
height: 460rpx;
}
.title{
font-size: 20px;
margin: 30rpx;
letter-spacing: 2px;
color: #4b556c;
}
.author-date{
margin: 15px 0px 0px 30px;
display:flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size:13px;
}
.author-box{
display: flex;
flex-direction: row;
align-items: center;
}
.avatar{
height: 50rpx;
width:50rpx;
}
.author{
font-weight: 300;
margin-left: 20rpx;
color: #666;
}
.date{
color:#666;
margin-right:38rpx;
}
.detail{
color:#666;
font-size: 14px;
margin:40rpx 22rpx 0;
letter-spacing: 1rpx;
line-height: 44rpx;
}
保存并刷新页面后，文章详情页面将正确地显示出来，如图6-6所示。
图6-6 文章详情页面
6.8 垂直居中问题的经典解决方法
6.8 垂直居中问题的经典解决方法
我们在编写CSS时，很多时候都会面临如何将两个元素垂直居中对齐的问题。比如在代码清单6-11中如何将作者名称（author）和作者头像（avatar）垂直居中对齐。
我们在3.4小节中学习了flex，这里就来看看如何使用flex解决这个问题。
代码清单 文字和图片垂直居中对齐 post-detail.wxss
.author-box{
display: flex;
flex-direction: row;
align-items: center;
}
.avatar{
height: 50rpx;
width:50rpx;
}
.author{
font-weight: 300;
margin-left: 20rpx;
color: #666;
}
以上代码摘自post-detail.wxss。解决思路如下：将avatar和author用一个容器包裹起来(author-box)，使用display:flex将该容器设置为flex盒子模型，使用flex-direction:row指定flex的方向为row。
关键的代码是align-items:center，这将使flex盒子里的元素在交叉轴方向上居中。在本例中主轴是水平方向（因为设置了flex-direction为row），所以交叉轴是垂直方向，align-items:center将控制垂直方向居中。关于flex及轴的概念已经在3.4小节中详细讲解过，开发者可自行回顾一下关于主轴和交叉轴的概念。
开发者可以对比一下，welcome页面中是如何使头像、文字和按钮这3个元素水平居中的。welcome页面中设置了flex-direction：column，所以主轴是垂直方向，align-items:center将控制水平方向上的居中。
小程序对于flex的支持相当完善，建议多使用flex进行元素布局。
6.9 动态设置导航栏标题
6.9 动态设置导航栏标题
本小节，我们来学习如何在页面导航栏中设置标题。导航栏是页面最顶部的一块区域，如图6-7所示。
图6-7 导航栏的位置位于页面最顶部
它现在光秃秃的，没有任何文字。这里，我们使用两种方法分别设置post页面和post-detail页面的导航栏文字。
6.9.1 使用配置文件配置导航栏标题
第一种方法是使用app.json或者页面的json文件来配置导航栏标题。如果是在app.json中进行配置，则它是全局行为，项目所有的页面将显示同一个标题；而如果是在页面的json文件中配置标题，则只会影响当前配置页面。
我们之前在app.json的window属性中通过设置navigationBarBackgroundColor实现了指定导航栏的颜色。window还有以下2个属性用于配置导航栏文本：
navigationBarTextStyle 指定导航栏标题文字的颜色，只支持black/white，默认值为black。
navigationBarTitleText 指定导航栏标题文字。
在app.json中对window属性增加以上两个配置项，代码如下：
代码清单 6-13 配置导航栏文字 app.json
"window": {
"navigationBarBackgroundColor": "#4A6141",
"navigationBarTextStyle":"white",
"navigationBarTitleText":"文 字"
}
保存运行后可以看到，所有页面的导航栏都增加了“文字”这两个字，它的颜色为白色。这并不是我们想要的，我们希望不同页面显示不同的导航栏标题。下面来解决这个问题。
我们之前讲过，window这个配置项既可以在app.json中配置，也可以在window中配置（其他配置项只能在app.json中配置）。
删除代码清单6-13中的navigationBarTextStyle和navigationBarTitleText，在post.json文件中加入以下代码：
代码清单 6-14 在页面配置导航栏文字 post.json
{
"navigationBarTextStyle": "white",
"navigationBarTitleText": "文 字"
}
这样，导航栏文字就只会在post页面中出现了。
6.9.2 使用wx.setNavigationBarTitle(OBJECT)设置导航条
在某些情况下，我们希望导航栏的文字可以根据页面内容的不同而有所变化。比如在文章详情页面中，我们希望导航栏可以实时显示当前文章的标题，不同的文章显示不同的标题文字。来看看如何实现这个功能。
小程序提供了wx.setNavigationBarTitle(OBJECT)来动态设置导航栏标题。小程序官方文档中指出，页面的导航栏标题必须在页面生命周期的onReady之后来设置，否则无效。原文如下：
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
我们遵照官方文档的说明，在post-detail.js中加入以下代码：
代买清单 6-15 设置动态导航栏文字 post-detail.js
onReady:function(){
wx.setNavigationBarTitle({
title: this.postData.title,
})
},
按照文档的描述，我们在页面生命周期函数onReady中调用了wx.setNavigation-BarTitle(object)方法。它接收一个object参数，其中title属性被设置为当前文章的标题。
保存运行代码，发现页面的导航栏文字变成了文章的标题。
这里需要指出，在122100版本之前，setNavigationBarTitle(object)方法确实只能在页面的onReady函数里设置。如果尝试在页面的onLoad、onShow函数里调用setNavigationBarTitle(object)方法，文章的标题将出现一闪而过的情况。这种情况是符合官方文档说明的：“对界面的设置如wx.setNavigationBarTitle请在onReady之后设置”。因为onReady在onShow发生之后才触发，onShow将标题设置完毕后，onReady会重新渲染页面，并覆盖导航栏的标题，这就是我们说的“一闪而过”的情况。
但在最新的130400版本里，无论是在页面的onLoad或者onShow函数中调用setNavigationBarTitle(object)方法，都可以成功地设置导航栏标题，并不会出现一闪而过的情况。
但无论如何，还是建议开发者按照官方文档所描述的，在onReady函数里进行界面的设置操作，以免官方在未来再次改动底层的运行机制时造成代码无法运行。
京公网安备 11010802041100号