Taro 學習筆記

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 遍歷後的模板當成一個數組來處理。若是須要過濾，請先使用過濾，在進行遍歷生成。