微信小程序事件绑定、路由以及路由传参

微信小程序开发过程中，根据事件是否冒泡，有两种事件绑定形式。

事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

1）事件绑定

对于冒泡事件而言：利用bind(事件)进行绑定，非冒泡事件利用catch(事件进行绑定)

<view class="container">
  <!-- 父级也绑定有事件 -->
  <view bindtap='addNum'>
    <!-- 子代绑定事件 -->
    <view bindtap='addType'>触发事件，也会触发父级事件</view>
  </view>
</view>

<view class="container">
  <!-- 父级也绑定有事件 -->
  <view bindtap='addNum'>
    <!-- 子代绑定事件 -->
    <view catchtap='addType'>触发事件，不会触发父级事件</view>
  </view>
</view>

2）路由

在微信小程序中，根据当前页面是否需要被出栈再重新加载新页面，主要有navigateTo、redirectTo两种形式，当然也还有switchTab（只能打开 tabBar 页面）和reLaunch这两种形式。

navigateTo：当前路由页面onHide，新的路由页面onLoad、onShow，即当前路由页面是隐藏的，而不是出栈
redirectTo：当前路由页面onUnload，新的路由页面onLoad、onShow，即当前路由页面出栈

<view class="container">
  <!-- 父级也绑定有事件 -->
  <view>
    <!-- 子代绑定事件 -->
    <view bindtap='linkNews'>跳转到详情页</view>
  </view>
</view>

// 方法
  linkNews: function () {
    wx.navigateTo({
      url: '../detail/detail'
    })
    // 跳转的同时  销毁当前页  无返回键
    wx.redirectTo({
      url: '../detail/detail'
    })
  },

路由使用相对路由。

3）路由传参

利用data-(参数字段)，进行参数传递

<view class="container">
  <view class='mainbox'>
    <view class='newslist' wx:for="{{newslist}}" wx:key="*this" wx:for-item="dayItem">
      <view class='time'>{{dayItem.time}}</view>
      <view class='list' wx:for="{{dayItem.list}}" wx:key="*this" data-id="{{item.id}}" bindtap='linkNews' wx:for-item="item">
        {{item.title}}
      </view>
    </view>
  </view>
</view>

路由中：

// 方法
  linkNews: function (event) {
    // 获取携带的新闻id
    var id = event.target.dataset.id
    console.log(id)
    wx.navigateTo({
      url: '../detail/detail?id=' + id+'&key=123'
    })
    // 跳转的同时  销毁当前页  无返回键
    // wx.redirectTo({
    //   url: '../detail/detail?id=' + id
    // })
  },

路由页面在onLoad中获取参数

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)  
    // 赋值
    this.setData({
      newsid: options.id
    })
    console.log('onload')
  },