6-4 使用数据填充新闻详情页面

知识点1、传递参数

在post.js里面定义的点击函数，获得了点击postId，这个postId决定了网页显示具体哪个新闻详情页面的内容。所以需要把它传给新闻详情页。

?是第一个参数

&是后面的参数

比如：http://xxxxx/abc?name=admin

如果是再有一个参数，就再后面加&，第一个参数不能使用&

http://xxxxx/abc?name=admin&password=admin

post.js中点击函数：

onPostTap:function(event){

varpostId = event.currentTarget.dataset.postid;

wx.navigateTo({

url:'post-detail/post-detail?id='+postId, //注意这里的写法，通过这个方法进行传递参数

})

},

下面是post-detail.js接受传递过来的参数。

知识点2、详情页面：首先从posts-data.js文件导入数据，定义为postsData，然后接收从post.js传递来的postId。根据postId，选择导入的数据的数组元素的某一项。注意，数组应该是postsData.postList[postId]。然后进行数据绑定。

知识点3、在post-detail里面把需要动态绑定数据的地方，标签换成绑定内容。固定不变的地方，不需要绑定。

知识点4、AppData记录数据绑定的内容，可以用来调试。

知识点5、post-detail详细页面，第一，从post-data.js里面获取数据，第二从post.js里面获取postId。好让详细页面根据postId对应post-data.js不同内容。

过程总结：

1、存放数据的posts-data.js中，对数组对象每个单独对象自定义postId。

2、在新闻列表post.wxml中引入posts-data.js，然后在容器元素view上通过data-postId给view自定义一个属性，通过data-postId=“{{item.postId}}” 赋值为数组对象每个单独对象自定义postId。

3、在post.js中定义的点击事件postTap中，通过event.currentTarget.dataset.postid获得对应的data-postId得值。

4、同样在postTap事件中，通过url后面加"...?id="+event.currentTarget.dataset.postid传递获取的event.currentTarget.dataset.postid。

5、上一步跳转的url页面为post-detail，在post-detail.wxml中通过options.id 接受传递来的参数。

6、在post-detail.wxml 导入posts-data.js中的数据，通过var postData = require(posts-data.js的地址)

7、上一步获取的postData就是一个数组对象，postData.postsList[postId]就是点击事件对应的详细页面的数据。

那么下面就是之前数据绑定的过程了。

8、在详情页面的onload函数中，设置数据，也就是通过this.setData函数。通过参数detail键名传递数据。

9、post-detail.wxml中接受参数，把所有的数据绑定前面加上前缀 detail. 就可以了。

10、替换成对应的数据绑定的{{ }}