Taro 學習筆記

官網：taro.aotu.io/

專案地址：github.com/NervJS/taro

簡介

Taro 是凹凸實驗室出品的一套 React 語法規範的多段開發解決方案。主旨在於使用一套程式碼，通過不同的編譯型別，編譯為成不同平臺的應用。（目前支援：小程式、H5）

環境搭建

安裝

安裝 Taro 提供的 cli 工具。

// npm
-> npm install -g @tarojs/cli
// yarn
-> yarn global add @tarojs/cli
複製程式碼

使用

新建專案

-> trao init projectName
複製程式碼

編譯預覽（微信小程式）

# npm script
-> npm run dev:weapp
# 僅限全域性安裝
-> taro build --type weapp --watch
# npx使用者也可以使用
-> npx taro build --type weapp --watch
複製程式碼

編譯預覽（H5）

# npm script
-> npm run dev:h5
# 僅限全域性安裝
-> taro build --type h5 --watch
# npx使用者也可以使用
-> npx taro build --type h5 --watch
複製程式碼

專案相關

專案目錄結構

├── dist                   編譯結果目錄
├── config                 配置目錄
|   ├── dev.js             開發時配置
|   ├── index.js           預設配置
|   └── prod.js            打包時配置
├── src                    原始碼目錄
|   ├── pages              頁面檔案目錄
|   |   ├── index          index頁面目錄
|   |   |   ├── index.js   index頁面邏輯
|   |   |   └── index.css  index頁面樣式
|   ├── app.css            專案總通用樣式
|   └── app.js             專案入口檔案
└── package.json
複製程式碼

入口檔案：app.js

生命週期對應關係

程式生命週期與小程式生命週期對應關係：

• componentWillMount ==> onLaunch
• componentDidMount ==> onLaunch 在 componentWillMount 後執行
• componentDidShow ==> onShow
• componentDidHide ==> onHide

頁面生命週期與小程式頁面生命週期對應關係：

• componentWillMount ==> onLoad
• componentDidMount ==> onReady
• componentWillUnmount ==> onUnload
• componentDidShow ==> onShow
• componentDidHide ==> onHide

頁面小程式專屬方法：

• onPullDownRefresh
• onReachBottom
• onShareAppMessage
• onPageScroll
• onTabItemTap

API

Taro 本身提供的 API。

Taro 本身提供的基礎 API

• Component：所有元件類的基類
• Events：訊息機制
• eventCenter：全域性訊息中心
• ENV_TYPE：環境值，常量，可直接使用
• getEnv：獲取當前環境

網路相關

• request：網路請求方法
• uploadFile：上傳方法
• downloadFile：下載方法

Socket相關

• connectSocket：建立 WebSocket
  • onOpen：開啟時方法
  • onError：出錯是方法
  • send：傳送訊息
  • onMessage：接收訊息
  • close：關閉
  • onClose：關閉時方法

媒體相關（2016-06-13新增）

• 圖片相關
  • chooseImage：選擇圖片
  • previewImage：預覽圖片
  • getImageInfo：獲取圖片資訊
  • saveImageToPhotosAlbum：儲存圖片到相簿
• 錄音相關
  • startRecord：開始錄音
  • stopRecord：停止錄音
  • getRecorderManager：獲取錄音管理器
• 音訊相關
  • playVoice：播放音訊
  • pauseVoice：暫停播放音訊
  • stopVoice： 停止音訊
  • getBackgroundAudioManager：獲取背景音訊管理器
  • createAudioContext：建立auto上下文物件並返回
  • createInnerAudioContext：createAudioContext升級版
• 音樂相關
  • getBackgroundAudioPlayerState：獲取後臺音樂播放狀態
  • playBackgroundAudio：播放背景音樂
  • pauseBackgroundAudio：暫停背景音樂
  • seekBackgroundAudio：控制音樂播放進度
  • stopBackgroundAudio：停止背景音樂
  • onBackgroundAudioPlay：監聽音樂播放
  • onBackgroundAudioPause：監聽音樂暫停
  • onBackgroundAudioStop：監聽音樂停止
• 視訊相關
  • chooseVideo：選擇視訊
  • saveVideoToPhotosAlbum：儲存視訊到相簿
  • createVideoContext：建立並返回視訊上下文物件
• 相機相關
  • createCameraContext：建立並返回相機上下文物件

檔案（2016-06-14新增）

• saveFile：儲存檔案
• getFileInfo：獲取檔案資訊
• getSavedFileList：獲取儲存的檔案列表
• getSavedFileInfo：獲取儲存檔案的資訊
• removeSavedFile：刪除本地儲存的檔案
• openDocument：開啟文件

Stroage相關

• setStorage：設定本地儲存
• setStorageSync：設定本地儲存（同步方法）
• getStorage：獲取本地儲存
• getStorageSync：獲取本地儲存（同步方法）
• getStorageInfo：獲取本地儲存資訊
• getStorageInfoSync：獲取本地儲存資訊（同步方法）
• removeStorage：刪除本地儲存
• removeStorageSync：刪除本地儲存（同步方法）
• clearStorage：清除本地儲存
• clearStorageSync：清除本地儲存（同步方法）

位置（2016-06-14新增）

• getLocation：獲取位置資訊
• chooseLocation：選擇位置資訊
• openLocation：開啟微信地圖檢視位置
• createMapContext：建立並返回地圖上下文

裝置（2016-06-14新增）

• 系統
  • getSystemInfo：獲取系統資訊
  • getSystemInfoSync：同步獲取系統資訊
  • canIUse：判斷是否可用（API、回撥、引數、元件等）
• 網路
  • getNetworkType：獲取網路型別
  • onNetworkStatusChange：當網路狀態切換時觸發事件
• 加速度計
  • onAccelerometerChange：監聽加速度變化資料
  • startAccelerometer：開始監聽資料
  • stopAccelerometer：停止監聽資料
• 羅盤
  • onCompassChange：監聽羅盤資料
  • startCompass：開始監聽資料
  • stopCompass：停止監聽資料
• makePhoneCall：撥打電話
• scanCode：掃碼
• setClipboardData：設定剪貼簿內容
• getClipboardData：獲取剪貼簿內容
• 藍芽
  • openBluetoothAdapter：開啟藍芽模組
  • closeBluetoothAdapter：關閉藍芽模組
  • getBluetoothAdapterState：獲取藍芽模組狀態
  • onBluetoothAdapterStateChange：藍芽模組狀態改變觸發事件
  • startBluetoothDevicesDiscovery：開始搜尋藍芽裝置
  • stopBluetoothDevicesDiscovery：停止搜尋藍芽裝置
  • getBluetoothDevices：獲取藍芽裝置
  • getConnectedBluetoothDevices：獲取連線的藍芽裝置
  • onBluetoothDeviceFound：監聽找到新裝置事件
  • createBLEConnection：連線低功耗藍芽裝置
  • closeBLEConnection：斷開低功耗藍芽裝置
  • getBLEDeviceServices：獲取藍芽裝置所有的服務
  • getBLEDeviceCharacteristics：獲取藍芽裝置某個服務的所有特徵值
  • readBLECharacteristicValue：讀取特徵值
  • writeBLECharacteristicValue：寫入特徵值
  • notifyBLECharacteristicValueChange：啟用特徵值改變時的通知功能
  • onBLEConnectionStateChange：監聽低功耗藍芽連線狀態的改變事件
  • onBLECharacteristicValueChange：監聽低功耗藍芽裝置的特徵值變化
• iBeacon
  • startBeaconDiscovery：開始搜尋裝置
  • stopBeaconDiscovery：停止搜尋裝置
  • getBeacons：獲取搜尋到的裝置
  • onBeaconUpdate：監聽更新事件
  • onBeaconServiceChange：監聽服務狀態改變事件
• 螢幕亮度
  • setScreenBrightness：設定螢幕亮度
  • getScreenBrightness：獲取螢幕亮度
  • setKeepScreenOn：設定常亮狀態
• onUserCaptureScreen：使用者截圖事件
• 振動
  • vibrateLong：長振動
  • vibrateShort：短振動
• addPhoneContact：新增手機聯絡人
• NFC
  • getHCEState：獲取是否支援
  • startHCE：初始化
  • stopHCE：關閉
  • onHCEMessage：監聽裝置資訊回撥
  • sendHCEMessage：傳送 NFC 訊息
• Wi-Fi
  • startWifi：開啟 Wi-Fi
  • stopWifi：關閉 Wi-Fi
  • connectWifi：連線
  • getWifiList：獲取列表
  • onGetWifiList：監聽獲取列表資料事件
  • setWifiList：iOS獨有介面，設定列表
  • onWifiConnected：監聽連線事件
  • getConnectedWifi：獲取已連線的 Wi-Fi 資訊

介面操作相關

• 互動
  • showToast：展示toast提示
  • hideToast：隱藏toast提示
  • showLoading：展示載入
  • hideLoading：隱藏載入
  • showModal：展示模態框
  • showActionSheet：展示操作選項
• 導航欄（2016-06-14新增）
  • setNavigationBarTitle：設定導航欄title
  • showNavigationBarLoading：顯示導航欄loading
  • hideNavigationBarLoading：隱藏導航欄loading
  • setNavigationBarColor：設定導航欄背景顏色
• setTopBarText：設定置頂欄文字（2016-06-14新增）
• tabBar相關（2016-06-14新增）
  • setTabBarBadge：設定角標
  • removeTabBarBadge：移除角標
  • showTabBarRedDot：顯示tabBar右上角紅點
  • hideTabBarRedDot：隱藏tabBar右上角紅點
  • setTabBarStyle：設定樣式
  • setTabBarItem：動態設定tabBar某項內容
  • showTabBar：顯示tabBar
  • hideTabBar：隱藏tabBar
• createAnimation：建立動畫（2016-06-14新增）
• pageScrollTo：滾動到（2016-06-14新增）
• canvas相關 （2016-06-14新增）
  • createCanvasContext：建立上下文
  • createContext：建立並返回繪圖上下文（不推薦使用）
  • drawCanvas：繪圖（不推薦使用）
• 下拉重新整理（2016-06-14新增）
  • startPullDownRefresh：開始下拉重新整理
  • stopPullDownRefresh：停止下拉重新整理

路由相關

• navigateTo：跳轉頁面
• redirectTo：頁面重定向
• navigateBack：返回

WXML節點相關

• createSelectorQuery：建立一個節點選擇器
  • in：更改選擇器的選取範圍
  • select：選擇匹配節點
  • selectAll：選擇所有匹配節點
  • selectViewport：選擇顯示區域
  • boundingClientRect：返回新增節點的佈局位置，相對於顯示區域，以畫素為單位
  • scrollOffset：返回新增節點的滾動位置，以畫素為單位
  • fields：獲取節點相關資訊
  • exec：執行所有的請求

元件

基礎

• Icon：圖示
• Text：文字
• Progress：進度條
• RichText：富文字編輯器（2016-06-13新增）

檢視容器

• View：檢視容器
• ScrollView：可滾動檢視容器
• Swiper：滑塊視同容器
• MovableView：可移動檢視容器（2016-06-13新增）
• CoverView：可覆蓋原生元件的文字檢視（2016-06-13新增）

表單元件

• Button：按鈕
• CheckBox：多選
• Radio：單選
• Switch：開關
• From：表單
• Label：標籤
• Input：輸入框
• Textarea：文字域
• Picker：選擇器
• PickerView：暫不知有何用處
• Silder：滑塊選擇器

導航

• Navigator：導航連結

媒體

• Audio：音訊
• Image：圖片
• Video：視訊
• Camera：相機

地圖（2016-06-13新增）

• Map：地圖

需要注意的地方

設計尺寸

Taro 建議使用 px 、 百分比 %。 Taro 的換算標準尺寸為 750px。 如果需要修改，修改配置檔案中的 designWidth 屬性即可。

大小寫敏感

Taro 會對 px 進行單位轉換，但是不會對 Px 或者 PX 進行轉換。

靜態資源引用

可以通過 ES6 的模式引用靜態資源。

元件命名規則

使用首字母大寫的駝峰命名法（Camel-Case）對元件進行命名。

事件名稱

• 事件名稱採用駝峰寫法，而不是全部小寫。
• 給事件傳遞引數必須通過 bind 方法
• 任何元件的時間傳遞都要以 on 開頭
• 事件物件總是咋方法引數的最後一個

條件渲染

條件渲染可以使用以下幾種方式：

• 元素變數
• 邏輯運算子 &&
• 三元運算子

state

• 不能直接更新狀態
• 狀態更新一定是非同步的
• state 更新會被合併

與 React 不同的地方

props

• 不同通過 props 傳遞 JSX 元素。
• 自定義元件不能巢狀子元素
• 原生元件可以巢狀子元素

編譯後的元素物件

React 中 JSX 會編譯成普通的 JS 執行，每個元素通過 createElement 函式建立，所有可以在 map 遍歷後在進行過濾。 但是在 Taro 中， JSX 會被編譯成微信小程式的模板字串，所有不能把 map 遍歷後的模板當成一個陣列來處理。如果需要過濾，請先使用過濾，在進行遍歷生成。