Taro多端統一框架學習（一）

2020年02月10日 星期一 疫情時刻在家上班第一天
將自己在家中學習的前端技術分享出來，希望能幫到你的學習

Taro框架的簡介和開篇介紹

Taro是由京東凹凸實驗室推出的框架，目的就是解決多端混亂的局面，也是當下比較新興的一個框架。
當我們按照一種模式一種代碼進行開發，開發完成後，項目就有了在任何終端顯示的能力，這是一種想想都很爽的。那具體Taro有那些優點，請看下面的圖片。

目前Taro支持的終端

• 微信小程序
• H5 移動端Web頁面
• 百度小程序
• 支付寶小程序
• 快應用
• ReactNative
• 字節跳動小程序
• QQ輕應用
  是目前支持小程序最多的前端框架，並且支持ReactNatvie，說明我們可以輕易的生成媲美原生的APP應用。所以公司的應用如果想全網推廣，佔用最多的流量入口的話，使用Taro就完全沒有問題。
  有熟悉uni的同學會講uni也有這樣類似的功能，生成多端應用的功能，而且還有專屬的編輯器，調試很方便，下邊就放一個taro與uni-app以及其他例如mpvue等的對比圖
  
  由此可見，Taro 的強大之處，以及Taro框架在前端的技術的佔比會越來越高。而且用統一的框架、統一的API、統一的代碼規範以及統一的代碼結構，是多麼棒的開發體驗。
  一次開發就可以完成所有主流平臺的佈局，人力和時間成本壓縮到最低，感覺節省了一個億哦。

下邊我們就一起來揭祕Taro這神奇的面紗把

Taro的環境搭建和Hello World

前置知識

學習這個前端框架，你需要一些前置知識：

• HTML、CSS，JavaScript這三個是基礎知識，最起碼要了解能作出簡單的靜態頁面
• 理解MVVM框架，如果會React框架是最好的
• 瞭解ES6相關語法，作爲一個當下流行的框架以及2020年的前端開發用ES6讓代碼規範起來，對項目開發和管理更加的方便

Taro編譯工具的介紹

Taro是一套遵循React語法規範的多端開發解決方案,使用Taro，只書寫一套代碼，再通過Taro的編譯工具，講源代碼分別編譯出可以再不同端（微信小程序，H5，RN等）運行代碼。

所以說這裏的Taro編譯工具是非常重要的，這裏附帶一張圖。

Taro開發環境的安裝

1.第一步是安裝@tarojs/cli（腳手架工具），也有教開發工具的。

這個你可以使用npm或者yarn進行全局安裝，命令如下：

npm的安裝方式

npm install -g @tarojs/cli

yarn的安裝方式

yarn global add @tarojs/cli

打開命令行後，輸入上邊的命令。

2.安裝完成後，就可以用腳手架創建項目，命令如下：

taro init taro-dome

這裏有個小坑就是如果你使用npm來安裝腳手架的時候，有很大機率會失敗，這些失敗多是因爲國內網絡環境限制的。有兩種解決方案，第一是掛科學上網來進行安裝，第二種是使用yarn來進行暗轉，我這裏就使用了yarn。

Hello World程序

通過上邊的創建項目，我們的項目已經建立好了，然後就是運行項目，命令如下：

cd taro-dome
npm run dev:h5

在這裏運行的是h5模式的，如果要運行小程序的根據package.json中的script設置可知相應的運行方式。

運行後頁面會在瀏覽器顯示Hello World，默認的端口爲10086，如圖：

這節主要講解了Taro開發環境的安裝和Hello World程序的編寫，下節繼續