小程序|页面传参的三种方式

要正确展示文章详情页面的内容，首先需要将文章的id号由post页面传递到post-detail页面，这样，post-detail页面才能知晓它要显示哪篇文章。这涉及页面间的参数传递与通信。目前，在MNA框架中有以下几种参数传递方式：

1. 使用全局变量（关于全局变量，本书后面的章节中会讲到）；
2. 使用缓存；
3. 通过页面导航url的query参数传递。

基本上参数的传递只有以上3种方式，其他的比如像事件信号的传参方式（一个页面emit
发送信号，一个页面on监听信号，这种在AngularJS里很常见的传参方式，小程序是不能天
然支持的)，其实都是这些基本思路的变种。
开发者在学习完缓存后应该很容易想到。其实，使用缓存数据库存储data,js初始化数据，又在post.js中读取缓存数据，这其实就是页面间的参数传递。仔细想想，是不是这样？
1、2两种都涉及全局变量，笔者个人不推荐这种污染全局的传参方式，而且我们的需求仅仅是两个页面间传递参数，完全不需要干扰全局。所以，选用方法3来做页面间的参数传递。
要想在post,js中获取到postId,就必须知道当前点击的文章是哪一篇文章。我们首先将postld绑定到每一篇文章的wxml中，使postId成为文章wxml的一个属性。注意，postId已经定义在了data.js中了。

1、绑定postId

  <block wx:for="{{ postList }}" wx:for-item="item" wx:for-index="idx">
  <!-- 不要再block标签或tempale标签上绑定事件！！ -->
    <view catchtap="onTapToDetail" data-post-id="{{ item.postId }}">
      <template is="postItemTpl" data="{{ ...item }}" />
    </view>
  </block>

2、在post.js中添加如下代码： 

  onTapToDetail:function(event){
    // 下面这行代码获取postId:
    var postId=event.currentTarget.dataset.postId;
    console.log(postId);
    wx.navigateTo({
      url: './post-detail/post-detail?id=' + postId,
    });
  },

控制台显示postId，说明id确实已经传过来了。 

每篇文章的id都被绑定在了该文章的view容器上，剩下的工作就是，如何获取当前文章的id了。

上述代码中，我们通过event.currentTarget.dataset.postId,这段代码成功地拿到了当前文章
的postId。
event事件对象是由MNA框架在调用onTapToDetail函数时传递的参数。在event事件对
象中，有一个currentTarget代表事件绑定的当前组件。
重点是dataset对象，dataset对象里包含当前组件中所有属性名以data-开头的自定义属性
值。我们在代码清单6-5中的view上绑定了data-post-id,所以通过dataset.postId将可以拿到
当前组件的postId。.
组件自定义属性名有以下规则：

1. 必须以data-开头。
2. 多个单词由连字符“”链接。
3. 单词中最好不要有大写字母，如果有大写字母，除单词第一个字母外，其余大写字母
   将被转化成小写。
4. 在js中获取自定义属性值时，多个单词将被转化驼峰命名。

举例子：

 我们只需要以这种格式传给页面（url的query参数）就好了：

      url: './post-detail/post-detail?id=' + postId,