从零开始学微信小程序开发－－－5、小程序页面跳转

我们接下来要实现的是：点击“按钮”，跳转到另一个页面

如下图，当我们点击“开启小程序之旅”的时候，就会跳转到news页面

首先我们将启动页放回pages配置项的第一项，这样我们点击编译就可以看到index页面

//app.json

{
  "pages": [
    "pages/index/index",
    "pages/news/news"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f5f4a7"
  }
}

要实现点击“开启小程序之旅”进行页面跳转，在WEB编程中使用onclickDOM事件实现的，如下：

但是小程序并不支持DOM事件，有没有类似鼠标点击事件的方法呢？在wxml中，有一个tap事件，手指触摸后马上离开，这与鼠标点击相似，

事件绑定的写法同组件的属性，以 key、value 的形式。

key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

在事件前面加bind或catch表示事件绑定，catch和bind有何区别呢？

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

我们通过一个例子来说明这种区别：

我们为<text>“开启小程序之旅”绑定subTap事件，为其父容器组件<view>绑定onTap事件

//index.wxml
<view class='container'>
  <image src='/images/tx.jpg' class='user_avatar'></image>
  <text class='say_hello'>Hello, <text class='user_name'>Mini Program</text></text>
  <view class='encourage_container' bindtap="onTap">
    <!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
    <text class='encourage' bindtap="subTap">开启小程序之旅</text>
  </view>
</view>

//index.js
Page({

  onTap: function() {
    console.log("父节点")
  },
  subTap: function() {
    console.log("子节点")
  }

})

当我点击“开启小程序之旅”的时候，结果是这样的，当我再点击按钮（我们姑且叫它按钮吧），你点击n下，就会在“父节点”的前面多一个数字，值为n+1；而如果我一开始就只点击按钮（不点文字），结果却是这样的：，并且点击多少次，前面的数字就是多少。

也就是说：对于冒泡事件，如果我们点击子节点触发一个事件，如果其父节点也绑定了对应的事件，那么父节点的事件也会被触发（向上冒泡）；但如果只点击父节点，子节点的事件则不会被触发。（详情见API文档）

如果我不想冒泡事件的父节点绑定的事件随着子节点触发咋办呢？把bind换成catch即可！

好了，我们回到正题，为<view>组件绑定tap事件：

//index.wxml
<view class='container'>
  <image src='/images/tx.jpg' class='user_avatar'></image>
  <text class='say_hello'>Hello, <text class='user_name'>Mini Program</text></text>
  <view class='encourage_container' bindtap="onTap">
    <!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
    <text class='encourage'>开启小程序之旅</text>
  </view>
</view>

然后再JS中实现页面跳转：在小程序中的页面跳转用wx.navigateTo(Object object) （保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面）或 wx.redirectTo(Object object)（关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面）接口实现；前者理解为跳转到当前页面的子页面，点击返回按钮可以回到上一个页面；后者理解为跳转到一个平行页面，无返回按钮。

//index.js
Page({

  onTap: function() {

    wx.navigateTo({
      url: '../news/news'
    });

  }

})

效果如图：

用wx.redirectTo的代码和效果如下：

//index.js
Page({

  onTap: function() {

    wx.redirectTo({
      url: '../news/news'
    });
  }

})

由于启动页面和新闻列表页之间应该是不存在父子关系，是平行页面跳转才对，多以我们采用后面这种写法！

Note：功能页不能使用 wx.navigateTo 来进行跳转，而是需要一个名为 <functional-page-navigator> 的组件。

顺便提一下，在实验过程中，我碰到了一个问题，耗了挺多事件：

原来是因为我把 bindtap 打成bindTap，小程序识别不了，大家不要再踏入这个雷区啦！

从零开始学微信小程序开发－－－5、小程序页面跳转

猜你喜欢