微信小程序事件和页面跳转

一、页面跳转

1.非TabBar页面

一个小程序拥有多个页面，我们通过wx.navigateTo进入一个新的页面

我们通过下边点击事件实现页面跳转进行代码实现及参考

wx.navigateBack（）回退到上一个页面

wx.redirectTo（url）删除当前页面跳转到指定页面

2.TabBar页面：

wx.switchTab只能打开TabBar

3.其他方法

二、事件绑定

1.常见的事件类型

 文章来源地址https://uudwc.com/A/9E9W

在前边加bind或catch就可以绑定事件处理函数了，他们不同的是，catch没有事件冒泡，bind有事件冒泡，还有capture-bind与bind不同的是他是事件捕获（从外到内）

2.在对应的js文件进行定义事件处理函数

在data下边定义事件处理函数

   onclick(){
     console.log("nihao");
   },

3.事件处理函数的调用

我们通过bindtap（根据上边的表可以看到tap是手指触碰马上离开）

我们通过bindtap绑定事件处理函数onclick

<view style="color :blue;">你好帅</view>
<button bindtap="onclick">click</button>

4.实现页面跳转的方法wx.navigateTo

其中url是我们要跳转到的页面

success是我们成功的时候执行的函数

fail是我们失败的时候执行的函数

complete是无论成功失败都执行的函数

 wx.navigateTo({
      url: 'url',
      success:(result)=>{

      },
      fail:()=>{

      },
      complete:()=>{

      }
    });

5.实现页面跳转

我们在url中写入我们想要跳转的页面即可

 onclick(){
    wx.navigateTo({
      url: '../index/index',
      success:(result)=>{

      },
      fail:()=>{

      },
      complete:()=>{

      }
    });
   },

6.实现多页面跳转的简化

当我们实现多页面的跳转的时候可以设置多个处理函数，也可以通过一个处理函数绑定不同的url进行实现多页面的跳转

第一种（普通实现）：

首先在js文件定义多个处理方法

  onclick(){
    wx.navigateTo({
      url: '../index/index',
   })},
   onclick2(){
    wx.navigateTo({
      url: '../index/index2',
   })},

然后在页面布局绑定事件即可

<view style="color :blue;">你好帅</view>
<button bindtap="onclick">click</button>
<button bindtap="onclick2">click2</button>

第二种（简化实现）：

在js文件中data中定义url1和url2，然后接受到dataset中的参数赋值给url属性进行跳转

其中dataset位于事件的target属性下

  data: {
    url1:"../index/index"
    ,
    url2:"../index/index2"
,
    tnt:{
      name:"lihua",
      index:0,
      
      },
   cor: 'blue',
   ifs:1,
   list:[1.2,2.3,3.4,4.5],
   list2:[{name:"lifang",id:1},{name:"lili",id:2},{name:"xiaoi",id:3}]
  },
   onclick(event){
    wx.navigateTo({
      url: event.target.dataset.url,
   })},

然后在按钮中自定义属性通过dataset方法传入事件处理函数

<view style="color :blue;">你好帅</view>
<button data-url='{{url1}}' bindtap="onclick">click</button>
<button data-url='{{url2}}' bindtap="onclick">click2</button>

事件中的属性如下