02.微信小程序入門-[Swiper組件(輪播圖)、(App.json裏關於導航欄、標題配置)、數據綁定(核心知識)、事件與事件對象、路由]

[TOC]

一、Swiper組件(輪播圖)

indicatorDots：是否顯示面板指示點 vertical：滑動方向是否爲縱向 autoplay：是否自動切換 interval：自動切換時間間隔 duration：滑動動畫時長

• swiper: 父標籤。其中只可放置<swiper-item/>組件，不然會致使未定義的行爲。默認width:100%；height：150px；
• swiper-item: 子標籤。 僅可放置在<swiper/>組件中，寬高自動設置爲100%。

二、App.json裏關於導航欄、標題配置

{   //導航欄背景顏色
   "navigationBarBackgroundColor": "#405f80",
    //導航欄標題文字內容
   "navigationBarTitleText":"文與字",
    //導航欄標題顏色，僅支持 black / white
   "navigationBarTextStyle":"white"
}

每個小程序頁面也可使用 .json 文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容爲一個 JSON 對象，有如下屬性：

配置項

屬性	類型	默認值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如 #000000
navigationBarTextStyle	string	white	導航欄標題顏色，僅支持 black / white
navigationBarTitleText	string		導航欄標題文字內容
navigationStyle	string	default	導航欄樣式，僅支持如下值： default 默認樣式 custom 自定義導航欄，只保留右上角膠囊按鈕	微信客戶端 7.0.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	string	#ffffff	頂部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
enablePullDownRefresh	boolean	false	是否開啓當前頁面下拉刷新。 詳見 Page.onPullDownRefresh
onReachBottomDistance	number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px。 詳見 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋轉設置，支持 auto / portrait / landscape 詳見 響應顯示區域變化	2.4.0 (auto) / 2.5.0 (landscape)
disableScroll	boolean	false	設置爲 true 則頁面總體不能上下滾動。 只在頁面配置中有效，沒法在 app.json 中設置
usingComponents	Object	否	頁面自定義組件配置	1.6.3

頁面配置中只能設置 app.json 中 window 對應的配置項，以決定本頁面的窗口表現，因此無需寫 window 這個屬性。

三、數據綁定(核心知識)

WXML 中的動態數據均來自對應 Page 的 data。

• 簡單綁定

  數據綁定使用{{}}將變量包起來，能夠做用於：

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

• 組件屬性(須要在雙引號以內)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

• 控制屬性(須要在雙引號以內)-

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

• 關鍵字(須要在雙引號以內)

  true：boolean 類型的 true，表明真值。

  false`： boolean 類型的 false，表明假值。

<checkbox checked="{{false}}"> </checkbox>

特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型後表明真值。

四、事件與事件對象

4.一、什麼是事件

• 事件是視圖層到邏輯層的通信方式。
• 事件能夠將用戶的行爲反饋到邏輯層進行處理。
• 事件能夠綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
• 事件對象能夠攜帶額外信息，如 id, dataset, touches

4.二、事件分類

事件分爲冒泡事件和非冒泡事件：

1. 冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
2. 非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。

WXML的冒泡事件列表：

類型	觸發條件	最低版本
touchstart	手指觸摸動做開始
touchmove	手指觸摸後移動
touchcancel	手指觸摸動做被打斷，如來電提醒，彈窗
touchend	手指觸摸動做結束
tap	手指觸摸後立刻離開
longpress	手指觸摸後，超過350ms再離開，若是指定了事件回調函數並觸發了這個事件，tap事件將不被觸發	1.5.0
longtap	手指觸摸後，超過350ms再離開（推薦使用longpress事件代替）
transitionend	會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發
animationstart	會在一個 WXSS animation 動畫開始時觸發
animationiteration	會在一個 WXSS animation 一次迭代結束時觸發
animationend	會在一個 WXSS animation 動畫完成時觸發
touchforcechange	在支持 3D Touch 的 iPhone 設備，重按時會觸發	1.9.90

五、路由

5.一、wx.switchTab

跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首頁"
    },{
      "pagePath": "other",
      "text": "其餘"
    }]
  }
}

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

參數

屬性	類型	默認值	必填	說明
url	string		是	須要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑後不能帶參數。
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

5.二、wx.reLaunch

關閉全部頁面，打開到應用內的某個頁面

wx.reLaunch({
  url: 'test?id=1'
})

// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

參數

屬性	類型	默認值	必填	說明
url	string		是	須要跳轉的應用內頁面路徑，路徑後能夠帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不一樣參數用&分隔；如 'path?key=value&key2=value2'
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

5.三、wx.redirectTo

關閉當前頁面，跳轉到應用內的某個頁面。可是不容許跳轉到tabbar頁面

wx.redirectTo({
  url: 'test?id=1'
})

參數

屬性	類型	默認值	必填	說明
url	string		是	須要跳轉的應用內非 tabBar 的頁面的路徑, 路徑後能夠帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不一樣參數用 & 分隔；如 'path?key=value&key2=value2'
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行

5.四、wx.navigateTo

保留當前頁面，跳轉到應用內的某個頁面。可是不能跳到 tabbar 頁面。使用 wx.navigateBack 能夠返回到原頁面。小程序中頁面棧最多十層。

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 爲指定事件添加一個監聽器，獲取被打開頁面傳送到當前頁面的數據
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 經過eventChannel向被打開頁面傳送數據
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 監聽acceptDataFromOpenerPage事件，獲取上一頁面經過eventChannel傳送到當前頁面的數據
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

參數

屬性	類型	默認值	必填	說明
url	string		是	須要跳轉的應用內非 tabBar 的頁面的路徑, 路徑後能夠帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不一樣參數用 & 分隔；如 'path?key=value&key2=value2'
events	Object		否	頁面間通訊接口，用於監聽被打開頁面發送到當前頁面的數據。基礎庫 2.7.3 開始支持。
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

object.success 回調函數

Object res

屬性	類型	說明
eventChannel	EventChannel	和被打開頁面進行通訊

5.五、wx.navigateBack

關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages 獲取當前的頁面棧，決定須要返回幾層。

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
wx.navigateTo({
  url: 'B?id=1'
})

// 此處是B頁面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C頁面內 navigateBack，將返回A頁面
wx.navigateBack({
  delta: 2
})

參數

屬性	類型	默認值	必填	說明
delta	number	1	否	返回的頁面數，若是 delta 大於現有頁面數，則返回到首頁。
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

---

平常學習的總結，主要是爲了本身之後看，固然你們有什麼好的建議，歡迎評論留言。