微信小程序入門到實戰（二）

上一文章裏面，咱們實現了第一個小程序頁面，而且瞭解到了一些小程序的知識，接下來繼續開始咱們的學習。

頁面的跳轉

在第一個小程序頁面，預留了一個按鈕，這是爲了跳轉到其餘的頁面，在微信小程序裏面跳轉的方法主要有下面三種：

• wx.navigateTo()
• wx.redirectTo()
• wx.switchTab()

wx.switchTab({
  url: '/index'
})

路徑可得注意寫對，區分絕對路徑和相對路徑：

絕對路徑：通常在前面加上 /，表示從根目錄開始往下尋找
相對路徑：相對於當前頁面來講，每次使用 ../就是往上跳出一層

第一和第二種方法主要的區別是：前者保留當前頁面(父頁面，執行onHide()方法)，跳轉到其餘頁面(子頁面)，最後能夠返回到當前頁面(父頁面)，兩個頁面之間是父子關係；後者關閉當前頁面(執行onUnload()方法)，跳轉到其餘頁面，沒法返回，兩個頁面是平行關係。

第三種比較特別，這種跳轉是專門跳轉到帶有 tabBar 的頁面，並關閉其餘全部非 tabBar 頁面，使用上面兩種跳轉方式是無效的。從 tabBar 的頁面跳轉到非 tabBar 的頁面，可使用上面的兩種方式。

輪播組件swiper

swiper一般是配合着swiper-item來使用的，前者是整個輪播圖的容器，後者是單一輪播子項目容器，僅在前者內部使用，寬高默認爲swiper 的寬高，只是一個容器，沒有其餘做用，可是缺乏又不行。因此對於swiper-item都應該做用在swiper父節點上面。

<swiper catchtap='onSwiperTab' indicator-dots='true' autoplay='true' interval='5000'>
    <swiper-item>
      <image src='/images/post/bl.png' ></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/xiaolong.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/vr.png' ></image>
    </swiper-item>
  </swiper>

咱們不能想固然的認爲在swiper-item裏面只能放圖片，還能夠放入其餘的一些東西，好比文本；實現一些其餘的業務，好比彈幕輪播。

經過設置vertical='true'設置輪播滾動的方向，indicator-dots='true'指示器的顯示

在輪播圖裏面，實際控制圖片的大小是依靠image標籤，默認有寬高。

事件的綁定

事件通常分兩種：

冒泡事件：點擊了子節點，父節點上面的事件也會執行；可是點擊父節點上面的事件，子節點上面的事件不會執行 bind開頭：表示冒泡，後面接事件名

非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。通常在子節點上面添加。catch開頭：表示非冒泡，後面接事件名

<view bindtap='onbind'>
我是事件2
<view bindtap='onBind'>我是事件1</view>
</view>

 onBind: function (event) {
    console.log("事件1執行了")
  },
  onbind: function (event) {
    console.log("事件2執行了")
  }

在我點擊了事件1沒有點擊事件2的時候，事件2也會被觸發，這就是冒泡；可是把方法改成catchtap，點擊事件1的時候，只是事件1的函數觸發，事件2函數不會被執行。還有一種catch:tap的聲明事件的方法。

tabBar頁面配置

前面說到在app.json是配置一些小程序項目的全局配置，能夠在某個頁面下面的json文件來單獨配置該頁面所須要的配置。

tabBar是在全局app.json裏面配置，跟項目頁面都須要在全局app.json裏面註冊同樣，tabBar也是裏面的一個屬性，其中的list數組最上至少配置2個，最多5個，按照其在數組裏面的順序排布。

"tabBar": {
    "position":"top", // 按鈕的位置，默認爲bottom，設置爲top的時候，icon設置無效
    "borderStyle": "white",   // tabBar的顏色
    "list": [
      {
        "pagePath": "pages/posts/post",  // 頁面路徑，必須先在pages屬性中定義
        "text": "閱讀",
        "iconPath": "images/tab/yuedu.png",    // 未選中的圖片
        "selectedIconPath": "images/tab/yuedu_hl.png"     // 選中的圖片
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "電影",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  }

在全局的app.json裏面配置好了，那麼項目啓動的時候就默認在最底部出現欄位的切換；
固然也能夠改變其位置，使其出如今頂部，出如今頂部的時候，按鈕的圖片失效：

數據的綁定

小程序裏面沒有dom節點的概念，不可以像使用jQuery同樣，經過操做DOM節點來給頁面添加數據。相反的小程序經過數據綁定，來達到數據優先。這樣的好處在於不用操做DOM，減小頁面加載的時間。

<view>
  <view  src='{{author_img}}' catch:tap='onBind'>{{date}}</view>
</view>

Page({
 // 頁面的初始數據
  data: {
    date:"我是事件1"
  }
}

上面這種就是數據綁定的方式，在對應頁面JS文件中的page()的data屬性裏面，填寫頁面須要的數據，以鍵值對的形式，而後在頁面對應的位置使用{{key}}，綁定數據。固然能夠在一個位置綁定多個數據，只須要這樣{{key1}}{{key2}}。在標籤的屬性上面綁定數據的時候，須要使用"{{key}}"

<view>
  <view catch:tap='onBind'>{{date}}{{title}}</view>
</view>

Page({
   data: { 
     date:'stp 17',
     title:' hi icessun'
   },
  onLoad: function (options) {
     var dates={
       date:'stp 18',
       title:'icessun'
     }
     this.setData(dates)
  }
}

固然不可能直接在data裏面寫數據，這些數據都是從服務器上面獲取的，在頁面初始化的時候，就會向服務器發送請求，對數據進行一番處理後，經過this.setData()的方法把數據綁定在頁面上面，this.setData()方法裏面接收到的參數，至關於把這寫參數，先放在data屬性裏面，而後在經過data屬性中的鍵值，綁定在頁面上。固然會把相同的屬性名(key值)的覆蓋掉