微信小程序知識點整理(一)

一、什麼是 rpx 尺寸單位

rpx： 是微信小程序獨有的，解決屏幕自適應的尺寸單位

• 可以根據屏幕寬度進行自適應，不論屏幕大小，規定屏幕寬爲 750rpx
• 通過 rpx 設置元素和字體的大小，小程序在不同尺寸的屏幕上，可以實現自動適配

二、rpx 與 px 之間的換算

以 iPhone6 爲例，iPhone6 的屏幕寬度爲 375px ，共有 750 個物理像素，則 750rpx = 375px = 750 物理像素，也就是 1rpx = 0.5px = 1 物理像素 ，因爲設計師的圖一般是二倍圖，所以在iphone6下直接使用測量出來的值來設置rpx就可以了

設備	rpx 換算 px (屏幕寬度/750)	px 換算 rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

三、 @import 樣式導入

• 使用 @import 語句可以導入外聯樣式表
• 語法格式：@import "wxss 樣式表文件的相對路徑"
• 注意要在@import 最後加上;

data-*屬性選擇器

[data-color='pink'] {
  color: pink;
}

@import "/assets/common/common.wxss";
/*上面這個是根路徑下的表示方法*/
/* @import "../../assets/common/common.wxss"; */

.box {
  width: 375rpx;
  height: 375rpx;
  background-color: skyblue;
}

四、全局樣式和局部樣式

全局樣式

• 定義在 app.wxss 中的樣式爲全局樣式，作用於每一個頁面。

局部樣式

• 在 page 的 wxss 文件中定義的樣式爲局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

注意：當局部樣式的權重大於或等於全局樣式的權重時，纔會覆蓋全局的樣式效果！

五、app.json 配置文件

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，

它決定了頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

在 app.json 配置文件中，最主要的配置節點是：

• pages 數組：配置小程序的頁面路徑
• window 對象：用於設置小程序的狀態欄、導航條、標題、窗口背景色
• tabBar 對象：配置小程序的tab欄效果

六、pages 數組的用法

app.json 中的 pages 數組，用來配置小程序的頁面路徑

基礎配置

• pages 用於指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑+文件名 信息。
• 文件名不需要寫文件後綴，框架會自動去尋找對應位置的 .json、 .js、 .wxml 和 .wxss 四個文件進行處理。

創建頁面的另一種方式

• 打開 app.json --> pages 數組節點 --> 新增頁面路徑並保存 --> 自動創建路徑對應的頁面

設置項目的首頁

• 打開 app.json -> pages 數組節點
• 按需調整數組中路徑的順序，即可修改默認首頁

注意事項：

• 數組的第一項代表小程序的小程序的初始頁面也就是首頁
• 小程序中新增/減少頁面，都需要對 pages 數組進行修改，否則在運行小程序時就會報錯

七、tabBar 的概念

tabBar 是移動端應用常見的頁面效果，用於實現多頁面的快速切換；小程序中通常將其分爲底部 tabBar 和頂部 tabBar

官方文檔：tabBar

注意：tabBar 中，只能配置最少2個、最多5個 tab 頁籤，當渲染頂部 tabBar 的時候，不顯示 icon，只顯示文本

• 都不支持網絡圖片
• 當 position 爲 top 時，不顯示 icon。
  tabBar的路徑要放到pages最前面，防止加載首頁時無法出現tabBar的情況
  

八、頁面配置

頁面配置和局部配置的關係

• app.json 中的 window 節點，可以全局配置小程序中每個頁面的窗口表現；
• 如果某些小程序頁面，想要擁有特殊的窗口表現，此時，“頁面級別的 .json 配置文件”就可以實現這種需求；

注意：頁面級別配置優先於全局配置生效

官方文檔： 頁面配置詳細文檔

九、生命週期的概念

生命週期（Life Cycle）是指一個對象從 創建 -> 運行 -> 銷燬 的整個階段，強調的是一個時間段。

小程序的生命週期

• 小程序的啓動，表示生命週期的開始
• 小程序的關閉，表示生命週期的結束
• 中間小程序運行的過程，就是小程序的生命週期

小程序生命週期的兩種類型

• 應用生命週期：特指小程序從啓動 --> 運行 --> 銷燬的過程；
• 頁面生命週期：特指小程序中，每個頁面的加載 --> 渲染 --> 銷燬的過程；
• 注意：頁面的生命週期範圍較小，應用程序的生命週期範圍較大
  

十、小程序的生命週期函數

小程序框架提供的內置函數，會伴隨着生命週期，自動按次序執行

生命週期函數的作用：

允許程序員在特定的生命週期時間點上，執行某些特定的操作。例如，頁面剛加載的時候，在生命週期函數中自動發起數據請求，獲取當前頁面的數據；

注意：生命週期強調的是時間段，生命週期函數強調的是時間點。

十一、應用生命週期函數

• app.js 是小程序執行的入口文件，在 app.js 中必須調用 App() 函數，且只能調用一次。其中，App() 函數是用來註冊並執行小程序的。
• App(Object) 函數接收一個 Object 參數，可以通過這個 Object 參數，指定小程序的生命週期函數。

app.js 代碼

App({

  /**
   * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 當小程序從前臺進入後臺，會觸發 onHide
   */
  onHide: function () {
    
  },

  /**
   * 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
   */
  onError: function (msg) {
    
  }
})

十二、頁面生命週期函數

• 每個小程序頁面，必須擁有自己的 .js 文件，且必須調用 Page() 函數，否則報錯。其中 Page() 函數用來註冊小程序頁面。
• Page(Object) 函數接收一個 Object 參數，可以通過這個 Object 參數，指定頁面的生命週期函數。

頁面生命週期.js

// pages/tabHome/tabHome.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * 生命週期函數--監聽頁面加載(只加載一次)
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成（只加載一次）
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示（初始化完成時顯示 或者後臺切到前臺時顯示）
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏（前臺切後臺時觸發）
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

官方文檔:生命週期

十三、數據綁定

如何定義頁面的數據

• 小程序每個頁面，是由 4 部分組成，其中 .js 文件內可以定義頁面的數據、生命週期函數、其他業務邏輯
• 如果要在 .js 文件內定義頁面的數據，只需把數據定義在 data 節點下即可

Mustache 語法格式

把 data 中的數據綁定到頁面中渲染，使用 Mustache 語法(雙大括號) 將變量包裹起來即可

<view>{{ info }}</view>

Mustache 語法的主要場景

• 綁定內容(vue只能在標籤之間使用)
• 綁定屬性
• 運算(三元表達式、算術運算、邏輯判斷、字符串運算、數據路徑運算)

案例代碼

<!-- 頁面結構 -->

<!-- 綁定內容和屬性 -->
<view id="item-{{id}}">{{ info }}</view>

<!-- 算數運算 -->
<view>{{ 1 + 1 }}</view>

<!-- 三元表達式 -->
<view>{{ id == 10 ? "正確" : "錯誤" }}</view>

// 頁面數據

Page({
  data: {
  	info: 'hello world',
    id: 10,
    arr: [1, 2, 3]
  }
})

十四、小程序中的事件

官方文檔：事件

什麼是事件

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

bindtap 綁定觸摸事件

• 在小程序中，不存在網頁中的 onclick 鼠標點擊事件，而是通過 tap 事件來響應觸摸行爲
• 在小程序中，可以通過 input 事件來響應文本框內的輸入事件
  • 使用 bindinput 爲文本框綁定輸入事件

data 和 文本框之間的數據同步

• 在文本框的 input 事件處理函數中，通過事件參數 event ，能夠訪問到文本框的最新值
  • 語法結構 event.detail.value
• 通過 this.setData(dataObject) 方法，可以把頁面中的 data 數據重新賦值

<!-- wxml -->
<input bindinput="handleInput" value="{{info}}"></input>

Page({
	data: {
	    info:'hello world'
	  },
  	handleInput(e) {
   		console.log(e)
	  //  當前輸入框中的數據
	   console.log(e.detail.value)
	   	this.setData({
	     info:e.detail.value
  	 	})
  	}
  })

十五、小程序中的事件傳參

不能再綁定事件的同時傳遞參數

• 小程序的事件傳參比較特殊，不能在爲組件綁定事件的同時，爲事件處理函數傳遞參數
• 小程序會把 bindtap 後指定的值，統一當做事件名稱來處理

<!--錯誤做法-->
<button bindtap='btnHandle(123)'></button>

VM1683:1 Component "pages/tabHome/tabHome" does not have a method "btnHandle(123)" to handle event "tap".

通過 data-* 自定義屬性傳參

• 如果要在組件觸發事件處理函數的時候，傳遞參數，可以爲組件提供 data-* 自定義屬性傳參

獲取 data-* 自定義屬性中傳遞的參數

• 通過事件參數 event.target.dataset.參數名，能夠獲取 data-* 自定義屬性傳遞到事件處理函數中的參數

<!-- 頁面結構 -->

<button bindtap='eventHandle' type='primary' data-info='hhh'>傳遞參數</button>

// 頁面邏輯

Page({
  data: {},
    
  eventHandle: function (e) {
    console.log(e.target.dataset.info) //hhh
  }
   
  // coding...
})