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

icessun發表於2018-02-03
微信小程式

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

頁面的跳轉

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

  • 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裡面配置好了，那麼專案啟動的時候就預設在最底部出現欄位的切換；

tabBar頁面，預設出現在底部
當然也可以改變其位置，使其出現在頂部，出現在頂部的時候，按鈕的圖片失效：

tabBar頁面，出現在頂部

資料的繫結

小程式裡面沒有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值)的覆蓋掉

相關文章