微信小程序开发基础（二）

上一次我们已经讲了，小程序的目录结构、配置以及生命周期函数。今天我们来讲一下微信小程序的路由、事件、和跳转以及传值

一、路由、跳转、通过路由界面之间的传值

用这一张图片来显示路由的触发方式以及页面的生命周期函数：

8ABFEF2B-BD48-47F4-A4C1-D63AABC10F94.png

下面几点要注意的是

1、navigateTo, redirectTo 只能打开非 tabBar 页面。
2、switchTab 只能打开 tabBar 页面。
3、reLaunch 可以打开任意页面。

既然讲到了路由，那么我们就看看在微信小程序中页面是怎么跳转的

页面跳转我知道的有两种跳转方式
1.利用微信小程序的导航组件 navigator 进行跳转,可以将页面写在组件里面，那么点击的时候会自动跳转
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
</view>

2.自定义点击事件，在点击事件里面调用navigator 的相关方法
  //点击事件
  cellClick: function (res){
    // console.log(res);
    var index = res.currentTarget.id;
    // console.log(index);
    var that = this;
    wx.navigateTo({
      url: 'detial/detial,
    })
   
  },

3、navigator 界面跳转之间的传值
之前讲了界面的跳转方式，下面讲下如何跳转的时候，将有用的参数传递给下一个界面

 wx.navigateTo({
      url: 'detial/detial?id='+index,
    })

  <navigator url="../../detial/detial?id='+index" open-type="redirect" 
hover-class="other-navigator-hover">在当前页打开</navigator>

或者你想传递的不是具体的某个值，而是一个对象

    var temp = event.currentTarget.dataset.item;
    wx.navigateTo({
      url: './detial/detial?data=' + JSON.stringify(temp),
    })
  将对象转换成JSON 的字符串，然后在获取到的地方转换成对象就可以了
  onLoad: function (options) {

      var temp = options.data;
      console.log(options);
      //对象的json 字符串 转换成 obj 
      var obj = JSON.parse(temp)
      this.setData({
        dataSource:obj,
      })
  },

上面两种是界面跳转的方法，其实微信小程序是通过 url 来传递参数的。
可能你已经发现了url 后面添加了“？”再其后面添加了参数。是不是有点像网页上url的感觉。其实后面的参数就是我们要传的参数
那么我们在第二个界面怎么接收这些参数呢

生命周期函数onLoad 里面有一个options参数
 console.log(options);
    this.setData({
      id: options.id,
    });

这样我们就能获得前面一个界面传过来的参数

二、事件

什么是事件

事件是视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层进行处理
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数
事件对象可以携带额外信息，如id, dataset, touches

事件分类
事件分为冒泡事件和非冒泡事件

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

通过在wxml中设置bindtap(冒泡事件)、catchtap(非冒泡事件) 等，在js中写对应的实现方法
<view id="tapTest" name="WeChat" bindtap="tapName"> Click me! </view>

那么我们怎么给点击的事件传递参数呢

E35E7F03-44EC-40FB-97D6-6C29B857054F.png

注意：通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写

看下点击的方法，打印点击方法的事件参数

A102A762-42D6-4DAD-B114-55CF340006A5.png 1F40AF46-51F5-4C89-9F50-5F1AE425C0CE.png

那么我们就可以在点击的方法里面通过 res.currentTarget.dataset.age/name/sex来获取到传递过来参数了

学会了上面的，我们就可以实现页面之间的传值，点击事件传递参数了