文章目錄

• • • • 小程序基礎 第四天
      • • 一、小程序導航 -- 聲明式導航
        • • 001 - 導航到非 `tabBar` 頁面
          • 002 - 導航到 `tabBar` 頁面
          • 003 - 后退導航
        • 二、小程序導航 -- 編程式導航
        • • 001 - 導航到非 `tabBar` 頁面
          • 002 - 導航到 `tabBar` 頁面
          • 003 - 后退導航
        • 三、小程序導航 -- 導航傳參
        • • 001 - 聲明式導航傳參
          • 002 - 編程式導航傳參
          • 003 - 接受傳遞的參數(shù)
          • 004 - 導航欄自定義編譯模式快速傳參
        • 四、網絡數(shù)據(jù)請求
        • • 001 - 小程序后臺配置
          • 002 - 跳過域名校驗
          • 003 - 小程序發(fā)送 get 與 Post 請求
          • 004 - 小程序中沒有跨域限制
        • 五、小程序組件 -- 創(chuàng)建與引用
        • • 001 - 組件的創(chuàng)建
          • 002 - 組件的引用
        • 六、小程序組件 -- 組件的樣式
        • 七、小程序組件 -- 數(shù)據(jù)與方法
        • • 001 - 使用 data 定義組件的私有數(shù)據(jù)
          • 002 - 使用 methods 定義組件的事件處理函數(shù)
        • 八、小程序組件 -- properties
        • • 001 - properties 簡介
          • 002 - properties 語法結構
          • 003 - 向組件傳遞 properties 的值
          • 004 - 案例代碼
          • 005 - 組件內修改 properties
        • 九、小程序組件 -- 數(shù)據(jù)監(jiān)聽器
        • • 001 - 基本使用方法
          • 002 - 監(jiān)聽子數(shù)據(jù)字段語法
        • 十、組件的生命周期
        • 十一、小程序插槽的使用
        • • 001 - 默認插槽
          • 002 - 多個插槽
        • 十二、 組件間的通信
        • • 001 - 組件之間的三種基本通信方式
          • 002 - `this.selectComponent` 使用
          • 003 - 通過事件監(jiān)聽實現(xiàn)子向父傳值

小程序基礎 第四天

---

一、小程序導航 – 聲明式導航

001 - 導航到非 tabBar 頁面

非 tabBar 頁面指的是沒有被當作 tabBar 進行切換的頁面。

• 案例代碼：

<navigator url="/pages/about/about">跳轉到 about 頁面</navigator>

• 注意事項
  • url 屬性設置需要跳轉的路徑
  • 頁面路徑應該以 / 開頭，
  • 路徑必須提前在 app.json 的 pages 節(jié)點下聲明

002 - 導航到 tabBar 頁面

navigator組件單純使用 url 屬性，無法導航到 tabBar 頁面，必須需要結合 open-type 屬性進行導航。

• 案例代碼

<navigator url="/pages/person/person" open-type="switchTab">跳轉到 tabBar 頁面</navigator>

003 - 后退導航

?

小程序如果要后退到上一頁面或多級頁面，需要把 open-type 設置為 navigateBack，同時使用 delta 屬性指定后退的層數(shù)

• 案例代碼

<navigator open-type='navigateBack' delta='1'> 返回上一頁 </navigator>

<navigator open-type='navigateBack' delta='2'> 返回上上一頁 </navigator>

---

二、小程序導航 – 編程式導航

001 - 導航到非 tabBar 頁面

通過 wx.navigateTo(Object object) 方法，可以跳轉到應用內的某個頁面。

但是不能跳到 tabbar 頁面。

• 參數(shù)文檔

  • wx.navigateTo 詳細文檔

• 代碼案例

// 跳轉到非導航頁面
handle: function () {
  wx.navigateTo({
    url: '/pages/about/about',
    success: function () {
      console.log('Hello about')
    }
  })
},

002 - 導航到 tabBar 頁面

通過 wx.switchTab(Object object) 方法，可以跳轉到 tabBar 頁面，

并關閉其他所有非 tabBar 頁面

• 參數(shù)文檔
  • wx.switchTab 詳細文檔
• 案例代碼

// 跳轉到 tabBar 頁面
tabBarHandle: function () {
  wx.switchTab({
    url: '/pages/person/person',
    success: function() {
      console.log('Hello Person')
    }
  })
},

003 - 后退導航

通過 wx.navigateBack(Object object)方法，關閉當前頁面，返回上一頁面或多級頁面。

• 參數(shù)文檔
  • wx.navigateBack 詳細文檔
• 案例代碼

handle: function () {
  wx.navigateBack({
    delta: 1
  })
},

twoHandle: function () {
  wx.navigateBack({
    delta: 2
  })
},

---

三、小程序導航 – 導航傳參

001 - 聲明式導航傳參

navigator 組件的 url 屬性用來指定導航到的頁面路徑，同時路徑后面還可以攜帶參數(shù)，參數(shù)與路徑之間使用 ? 分隔，參數(shù)鍵與參數(shù)值用 = 相連，不同參數(shù)用 & 分隔。

• 案例代碼

<navigator url="/pages/about/about?age=18&name=shuji">跳轉到 about 頁面</navigator>

002 - 編程式導航傳參

wx.navigateTo(Object object) 方法的 object 參數(shù)中，url 屬性用來指定需要跳轉的應用內非 tabBar 的頁面的路徑, 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用 ? 分隔，參數(shù)鍵與參數(shù)值用 = 相連，不同參數(shù)用 & 分隔。

• 案例代碼

// 跳轉到 tabBar 頁面
tabBarHandle: function () {
  wx.switchTab({
    url: '/pages/person/person?age=18&name=shuji',
    success: function() {
      console.log('Hello Person')
    }
  })
},

003 - 接受傳遞的參數(shù)

不論是聲明式導航還是編程式導航，最終導航到的頁面可以在 onLoad 生命周期函數(shù)中接收傳遞過來的參數(shù)。

• 案例代碼

 >: function (options) {
    // 打印傳遞出來的參數(shù)
    console.log(options)
  },

004 - 導航欄自定義編譯模式快速傳參

• 小程序每次修改代碼并編譯后，會默認從首頁進入，但是在開發(fā)階段，我們經常會針對特定的頁面進行開發(fā)，為了方便編譯后直接進入對應的頁面，可以配置自定義編譯模式，步驟如下：
  • 單擊工具欄上的“普通編譯”下拉菜單
  • 單擊下拉菜單中的“添加編譯模式”選項
  • 在彈出的“自定義編譯條件窗口”，按需添加模式名稱、啟用頁面、啟動參數(shù)、進入場景等。

---

四、網絡數(shù)據(jù)請求

001 - 小程序后臺配置

• 每個微信小程序需要事先設置一個通訊域名，小程序只可以跟指定的域名進行網絡通信。
• 服務器域名請在 「小程序后臺-開發(fā)-開發(fā)設置-服務器域名」 中進行配置，配置時需要注意：
  • 域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 協(xié)議
  • 域名不能使用 IP 地址或 localhost
  • 域名必須經過 ICP 備案
  • 服務器域名一個月內可申請5次修改

注意： 網絡配置詳情

002 - 跳過域名校驗

• 在微信開發(fā)者工具中，可以臨時開啟 「開發(fā)環(huán)境不校驗請求域名、TLS 版本及 HTTPS 證書」 選項，跳過服務器域名的校驗。此時，在微信開發(fā)者工具中及手機開啟調試模式時，不會進行服務器域名的校驗。

注意：在服務器域名配置成功后，建議開發(fā)者關閉此選項進行開發(fā)，并在各平臺下進行測試，以確認服務器域名配置正確。

注意： 網絡配置詳情

003 - 小程序發(fā)送 get 與 Post 請求

小程序發(fā)送請求使用 wx.request() 方法，

• Get 案例代碼

getData: function () {
  wx.request({
    url: 'xxxx',
    method: 'get',
    success: function (res) {
      console.log(res)
    }
  })
},

• Post 代碼案例

postData: function () {
  wx.request({
    url: 'https://www.liulongbin.top:8082/api/post',
    method: 'post',
    data: {
      name: 'shuji'
    },
    success: function (res) {
      console.log(res)
    }
  })
},

注意： method 如果不進行配置，默認參數(shù)是 get 請求方式

wx.request 詳細文檔說明

004 - 小程序中沒有跨域限制

• 在普通網站開發(fā)中，由于瀏覽器的同源策略限制，存在數(shù)據(jù)的跨域請求問題，從而衍生出了 JSONP 和 CORS 兩種主流的跨域問題解決方案。
• 注意：小程序的內部運行機制與網頁不同，小程序中的代碼并不運行在瀏覽器中，因此小程序開發(fā)中，不存在數(shù)據(jù)的跨域請求限制問題

---

五、小程序組件 – 創(chuàng)建與引用

組件創(chuàng)建詳細文檔

001 - 組件的創(chuàng)建

• 在項目的根目錄中，鼠標右鍵，創(chuàng)建 components 文件夾 --> test
• 在新建的 components -> test 文件夾上，鼠標右鍵，點擊“新建 Component”
• 為新建的組件命名之后，會自動生成組件對應的 4 個文件，后綴名分別為 .js，.json， .wxml 和 .wxss

注意：應當盡量將不同的組件，存放到單獨的文件夾中，從而保證清晰的目錄結構

002 - 組件的引用

• 在需要引用組件的頁面中，找到頁面的 .json 配置文件，新增 usingComponents 節(jié)點
• 在 usingComponents 中，通過鍵值對的形式，注冊組件；鍵為注冊的組件名稱，值為組件的相對路徑
• 在頁面的 .wxml 文件中，把注冊的組件名稱，以標簽形式在頁面上使用，即可把組件展示到頁面上

{
  "usingComponents": {
    "first-com": "../../component/com01/com01"
  }
}

注冊組件名稱時，建議把組件名稱使用中橫線進行連接，例如 vant-button 或 custom-button

---

六、小程序組件 – 組件的樣式

小程序組件樣式 詳細文檔

• 組件對應 wxss 文件的樣式，只對組件 wxml 內的節(jié)點生效。編寫組件樣式時，需要注意以下幾點：
• 組件和引用組件的頁面不能使用id選擇器(#a)、屬性選擇器([a])和標簽名選擇器，請改用 class 選擇器。
• 組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預期的表現(xiàn)，如遇，請避免使用。
• 子元素選擇器(.a>.b)，只能用于 view 組件與其子節(jié)點之間，用于其他組件可能導致非預期的情況。
• 繼承樣式，如 font 、 color ，會從組件外繼承到組件內。
• 除繼承樣式外， app.wxss 中的樣式、組件所在頁面的樣式對自定義組件無效。

注意：以上語法不推薦死記硬背，建議使用 class 選擇器

---

七、小程序組件 – 數(shù)據(jù)與方法

組件詳細的參數(shù)含義和使用

001 - 使用 data 定義組件的私有數(shù)據(jù)

• 小程序組件中的 data與小程序頁面中的 data 用法一致，區(qū)別是：

  • 頁面的 data 定義在 Page() 函數(shù)中
  • 組件的 data 定義在 Component() 函數(shù)中

• 在組件的 .js 文件中：

  • 如果要訪問 data 中的數(shù)據(jù)，直接使用 this.data.數(shù)據(jù)名稱 即可
  • 如果要為 data 中的數(shù)據(jù)重新賦值，調用 this.setData({ 數(shù)據(jù)名稱: 新值 }) 即可

• 在組件的 .wxml 文件中

  • 如果要渲染 data 中的數(shù)據(jù)，直接使用 {{ 數(shù)據(jù)名稱 }} 即可

002 - 使用 methods 定義組件的事件處理函數(shù)

組件間通信與事件 詳細文檔

• 和頁面不同，組件的事件處理函數(shù)，必須定義在 methods 節(jié)點中

methods: {
  handle: function () {
    console.log('組件的方法要定義在 methods 中')

    this.setData({
      num: this.data.num + 1
    })

    console.log(this.data.num)
  }
}

---

八、小程序組件 – properties

001 - properties 簡介

組件的對外屬性，用來接收外界傳遞到組件中的數(shù)據(jù)。 類似于 Vue 中的 props

• 組件的 properties 和 data 的用法類似，它們都是可讀可寫的，只不過：

  • data 更傾向于存儲組件的私有數(shù)據(jù)
  • properties 更傾向于存儲外界傳遞到組件中的數(shù)據(jù)

002 - properties 語法結構

properties: {
  a: {				// 屬性名
    type: String,	// 屬性的數(shù)據(jù)類型
    value: ''		// 默認值
  }
}

注意：type 的可選值為 Number，String、Boolean、Object、Array、null(表示不限制類型)

003 - 向組件傳遞 properties 的值

使用數(shù)據(jù)綁定的形式，向子組件的屬性傳遞動態(tài)數(shù)據(jù)

<second-com prop-price="{{ priceData }}"></second-com>

注意：

• 在定義 properties 時，屬性名采用駝峰寫法（propertyName）；
• 在 wxml 中，指定屬性值時，則對應使用連字符寫法（property-name=“attr value”），
• 應用于數(shù)據(jù)綁定時，采用駝峰寫法（attr="{{propertyName}}"）。

004 - 案例代碼

// 組件 com02.js

properties: {
  propPrice: {
    type: Number,
    value: 1
  }
},

<!-- 引用組件的頁面 -->

<second-com prop-price="{{ priceData }}"></second-com>

<!-- 組件 com02.html -->

<view>{{ propPrice }}</view>

005 - 組件內修改 properties

properties 的值是可讀可寫的，可以通過 setData 修改 properties 中任何屬性的值，

• 案例代碼

methods: {
  handle: function () {
    this.setData({
      propPrice: this.properties.propPrice + 1
    })

    console.log(this.properties.propPrice)
  }
}

---

九、小程序組件 – 數(shù)據(jù)監(jiān)聽器

001 - 基本使用方法

數(shù)據(jù)監(jiān)聽器可以用于監(jiān)聽和響應任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作

數(shù)據(jù)監(jiān)聽詳細文檔

observers: {
  'propPrice, num': function (newPropPrice, newNum) {
    console.log(newPropPrice)
    console.log(newNum)
  }
},

002 - 監(jiān)聽子數(shù)據(jù)字段語法

• 案例代碼

// 監(jiān)控某個子數(shù)據(jù)的代碼
Component({
  observers: {
    'some.subfield': function (subfield) {
      // 使用 setData 設置 this.data.some.subfield 時觸發(fā)
      // （除此以外，使用 setData 設置 this.data.some 也會觸發(fā)）
    },
    'arr[12]': function (arr12) {
      // 使用 setData 設置 this.data.arr[12] 時觸發(fā)
      // （除此以外，使用 setData 設置 this.data.arr 也會觸發(fā)）
    }
  }
})

// 使用通配符 ** 監(jiān)聽所有子數(shù)據(jù)字段的變化
Component({
  observers: {
    'some.field.**': function (field) {
      // 使用 setData 設置 this.data.some.field 本身或其下任何子數(shù)據(jù)字段時觸發(fā)
      // （除此以外，使用 setData 設置 this.data.some 也會觸發(fā)）
      field === this.data.some.field
    }
  }
})

---

十、組件的生命周期

組件的生命周期，指的是組件自身的一些函數(shù)，這些函數(shù)在特殊的時間點或遇到一些特殊的框架事件時被自動觸發(fā)。

• 最重要的生命周期是 created, attached, detached ，包含一個組件實例生命流程的最主要時間點。
  • 組件實例剛剛被創(chuàng)建好時， created 生命周期被觸發(fā)。此時還不能調用 setData 。 通常情況下，這個生命周期只應該用于給組件 this 添加一些自定義屬性字段。
  • 在組件完全初始化完畢、進入頁面節(jié)點樹后， attached 生命周期被觸發(fā)。此時， this.data 已被初始化完畢。這個生命周期很有用，絕大多數(shù)初始化工作可以在這個時機進行。
  • 在組件離開頁面節(jié)點樹后， detached 生命周期被觸發(fā)。退出一個頁面時，如果組件還在頁面節(jié)點樹中，則 detached 會被觸發(fā)。

其他： 組件生命周期詳解

---

十一、小程序插槽的使用

001 - 默認插槽

在組件的 wxml 中可以包含 slot 節(jié)點，用于承載組件使用者提供的 wxml 結構。

• 默認情況下，一個組件的 wxml 中只能有一個 slot。需要使用多 slot 時，可以在組件 js 中聲明啟用。

• 注意：小程序中目前只有默認插槽和多個插槽，暫不支持作用域插槽。

• 案例代碼

// 組件模板

<view>
  <view>我是組件</view>
  <slot></slot>
</view>

// 引用組件的頁面模板

<second-com>
  <view>你好，我是引用組件</view>
</second-com>

002 - 多個插槽

1. 在組件中，需要使用多 slot 時，可以在組件 js 中聲明啟用。
   • 案例代碼

Component({

  options: {
    multipleSlots: true
  },
    
})

2. 在組件的 wxml 中使用多個 slot 標簽，以不同的 name 來區(qū)分不同的插槽
   • 案例代碼

// 引用組件的頁面模板

<second-com prop-price="{{ priceData }}">
  <view slot="name">你好，這是 name 插槽 </view>
  <view slot="age">你好，這是 age 插槽</view>
</second-com>

3. 使用多個插槽

// 組件插槽

<view>
  <view>我是組件</view>
  <slot name="name"></slot>
  <slot name="age"></slot>
</view>

---

十二、 組件間的通信

001 - 組件之間的三種基本通信方式

• WXML 數(shù)據(jù)綁定：用于父組件向子組件的指定屬性傳遞數(shù)據(jù)，僅能設置 JSON 兼容數(shù)據(jù)
• 事件：用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)。
• 父組件通過 this.selectComponent 方法獲取子組件實例對象，便可以直接訪問組件的任意數(shù)據(jù)和方法。

002 - this.selectComponent 使用

父組件的 .js 文件中，可以調用 this.selectComponent(string) 函數(shù)并指定 id 或 class 選擇器， 獲取子組件對象調用 ，可以返回指定組件的實例對象

• 案例代碼

// 使用組件的頁面模板

<second-com class="second" id="second" prop-price="{{ priceData }}">
  <view slot="name">你好，這是 name 插槽 </view>
  <view slot="age">你好，這是 age 插槽</view>
</second-com>

// 使用組件的 .js 文件，使用方法觸發(fā)

changeData: function () {
  // console.log(this.selectComponent('#second'))
    
  console.log(this.selectComponent('.second'))
},

• 注意事項
  • 不能傳遞標簽選擇器（component-a），不然返回的是 null

003 - 通過事件監(jiān)聽實現(xiàn)子向父傳值

事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件，引用組件的頁面可以監(jiān)聽這些事件。

• 實現(xiàn)步驟
  • 在父組件的 js 中，定義一個函數(shù)，這個函數(shù)即將通過自定義事件的形式，傳遞給子組件
  • 在父組件的 wxml 中，通過自定義事件的形式，將步驟一中定義的函數(shù)引用，傳遞給子組件
  • 在子組件的 js 中，通過調用 this.triggerEvent('自定義事件名稱', { /* 參數(shù)對象 */ }) ，將數(shù)據(jù)發(fā)送到父組件
  • 在父組件的 js 中，通過 e.detail 獲取到子組件傳遞過來的數(shù)據(jù)
• 案例代碼

// 使用組件的頁面模板自定義 myEvent 事件,接收 getCount 方法

<second-com bind:myEvent="getCount" class="second" id="second" prop-price="{{ priceData }}">
  <view slot="name">你好，這是 name 插槽 </view>
  <view slot="age">你好，這是 age 插槽</view>
</secondcom>

// 使用組件頁面 js，生命 getCount 方法

getCount: function (e) {
  console.log(e.detail)
},

// 組件頁面

this.triggerEvent('myEvent', {
  count: this.data.num
})