浅谈微信小程序的事件处理

构建页面

在index.wxml

<!--index.wxml-->
<view class="index">
  <view id="view1" class="view-item" bindtap="clickMe" data-name="按钮1" data-age="35"> view1</view>
  <view id="view2" class="view-item" bindtap="clickMe" data-name="按钮2" data-age="44"> view2</view>
  <view class="view-item">{{clickmsg}}</view>
</view>

index.wxss

.view-item {
  text-align: center;
  padding: 10px;
  background-color: burlywood;
  border-radius: 5px;
  margin: 20px;
}

image.png

index.js

  clickMe:function(e) {
    // 通过dataset来将wxml中的数据给传递过来
    console.log(e.currentTarget.dataset)
    count++
    this.data.clickmsg = '点击了' + e.currentTarget.id +  '当前已经点击了' + count + '次'
    // 必须要这样写才能更新数据
    this.setData(this.data)
  }

image.png

注意: 我们可以通过dataset来将wxml中的数据给传递过来,其中的age和name都是在wxml中设置的,命名规范必须是data-xxx,如果我们要取具体的某个值(例如name),可以使用console.log(e.currentTarget.dataset.name):

image.png

页面跳转共有两种方式

clickMe(e) {
    wx.redirectTo({
      url: '../home/home'
    })
  }
  
  
    clickMe(e) {
    wx.navigateTo({
      url: '../home/home'
    })
  }

两者的区别:

• wx.navigateTo的执行:

  • 假使我们从A页面跳转到home页面,再从home页面跳转到user,再从user页面返回,日志打印如下:

    
    image.png

home会依次执行onload---onshow---onready,当页面从home跳转到user时,会先调用home的onhide,然后加载user,执行onload---onshow---onready.当从user返回时,user页面会销毁,执行user的onUnload,然后home的页面出现,执行home的onshow

• wx.redirectTo:
  image.png

与wx.navigateTo的区别在于,当从home跳转到user时,会执行home的onUnload的方法,实际是home在跳转时被销毁了,"替换"成了user的页面,当从user返回时,不再返回的是home页面,而是原来home的上一级页面.

tabbar之间的切换来实现跳转

tabbar的切换与iOS的tabbar十分相似.假使home和user两个page分别为tabbar的两个模块,且默认选中home,当小程序启动后,我们从点击user,再点击home,可以看到如下日志:

image.png

小程序启动后,会执行home的onLoad----onshow---onready函数,当我们点击tabbar切换到user时,会先执行home的onhide,然后再执行user的onLoad----onshow---onready函数;当我们再次点击tabbar切换home时,会执行user的onhide,再执行home的onshow.说明:此时页面中home和user同时存在,点击哪个显示哪个执行onshow(当然是指不是第一次加载的情况),原先显示的将执行onhide来隐藏自己.

在.wxml中实现页面的跳转

<navigator url="../user/user?name=dll" >
            <button type="primary">导航组件跳转到User</button>
    </navigator>

如果是想通过redirect方式跳转,只需要在navigate组件后声明即可:

<navigator url="../user/user?name=dll" redirect >
            <button type="primary">导航组件跳转到User</button>
    </navigator>