我們接下來要實現的是：點選“按鈕”，跳轉到另一個頁面

如下圖，當我們點選“開啟小程式之旅”的時候，就會跳轉到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，小程式識別不了，大家不要再踏入這個雷區啦！