微信小程序之书籍详情页
上期我们已经完成了静态分类界面的普通页面，现在是时候来实现跳转进入书籍详细信息页的静态页面了。
设置顶部导航标题栏
如果你想在书籍详情页显示一个顶部导航标题栏，可以在json文件中设置相应的数据。这样当用户点进去书籍详情页时，顶部导航栏就会自动显示出书本的详细信息。
例如，我们可以在json文件中添加如下代码：
```json{
"bookList": [
{
"id":1,
"title": "《红楼梦》",
"author": "曹雪芹",
"price":20.99,
"description": "《红楼梦》是中国古典四大名著之一，讲述了一个叫做林黛玉的女子和她的爱情故事。"
},
{
"id":2,
"title": "《西游记》",
"author": "吴承恩",
"price":15.99,
"description": "《西游记》是中国古典四大名著之一，讲述了孙悟空和他的朋友们的冒险故事。"
}
]
}
```
在上面的json文件中，我们定义了一个叫做`bookList`的数组，其中包含两个书籍的详细信息。
跳转进入书籍详情页
现在我们需要实现跳转进入书籍详情页的功能。当用户点击某个书籍时，会跳转到对应的书籍详情页。
我们可以在小程序中使用`wx.navigateTo`函数来实现跳转。例如：
```javascriptPage({
data: {
bookList: []
},
onLoad: function(options) {
wx.request({
url: ' success: function(res) {
this.setData({
bookList: res.data.bookList });
}.bind(this)
});
},
bindTap: function(event) {
var id = event.currentTarget.dataset.id;
wx.navigateTo({
url: '../bookdetail/bookdetail?id=' + id });
}
});
```
在上面的代码中，我们定义了一个`bindTap`函数，当用户点击某个书籍时会被调用。这个函数会获取当前点击的书籍的id，并使用`wx.navigateTo`函数跳转到对应的书籍详情页。
书籍详情页
现在我们需要实现书籍详情页的静态页面。当用户点进去书籍详情页时，会显示出书本的详细信息。
例如，我们可以在json文件中添加如下代码：
```json{
"bookDetail": {
"id":1,
"title": "《红楼梦》",
"author": "曹雪芹",
"price":20.99,
"description": "《红楼梦》是中国古典四大名著之一，讲述了一个叫做林黛玉的女子和她的爱情故事。"
}
}
```
在上面的json文件中，我们定义了一个叫做`bookDetail`的对象，其中包含书本的详细信息。
我们可以使用小程序中的`wx.request`函数来获取json数据，并显示出书本的详细信息。
例如：
```javascriptPage({
data: {
bookDetail: {}
},
onLoad: function(options) {
var id = options.id;
wx.request({
url: ' success: function(res) {
this.setData({
bookDetail: res.data.bookDetail });
}.bind(this)
});
}
});
```
在上面的代码中，我们定义了一个`onLoad`函数，当用户点进去书籍详情页时会被调用。这个函数会获取当前点击的书本的id，并使用`wx.request`函数获取json数据。
顶部导航标题栏
如果你想设置顶部导航标题栏，可以在json文件中设置相应的数据。
例如，我们可以在json文件中添加如下代码：
```json{
"bookDetail": {
"id":1,
"title": "《红楼梦》",
"author": "曹雪芹",
"price":20.99,
"description": "《红楼梦》是中国古典四大名著之一，讲述了一个叫做林黛玉的女子和她的爱情故事。",
"titleBar": {
"title": "《红楼梦》",
"subtitle": "曹雪芹"
}
}
}
```
在上面的json文件中，我们定义了一个叫做`bookDetail`的对象，其中包含书本的详细信息和顶部导航标题栏的数据。
我们可以使用小程序中的`wx.request`函数来获取json数据，并显示出顶部导航标题栏。
例如：
```javascriptPage({
data: {
bookDetail: {}
},
onLoad: function(options) {
var id = options.id;
wx.request({
url: ' success: function(res) {
this.setData({
bookDetail: res.data.bookDetail });
}.bind(this)
});
}
});
```
在上面的代码中，我们定义了一个`onLoad`函数，当用户点进去书籍详情页时会被调用。这个函数会获取当前点击的书本的id，并使用`wx.request`函数获取json数据。
总结
在本文中，我们实现了跳转进入书籍详细信息页的静态页面。当用户点进去书籍详情页时，会显示出书本的详细信息和顶部导航标题栏。我们使用小程序中的`wx.navigateTo`函数来实现跳转，并使用`wx.request`函数来获取json数据。
参考
* 微信小程序官方文档： 小程序开发指南： json文件格式：
