Taro生成小程序代碼並預覽
Taro可以生成多端代碼，在上一節只生成了h5的顯示，這次我們就先來進行生成小程序代碼，並進行預覽。
生成微信小程序的代碼
npm run dev:weapp
輸入完命令後，taro編譯器自動爲我們生成小程序代碼到dist目錄中。
這裏邊的app.js、app.json以及app.wxss 這都是微信小程序所對應的文件，有過微信小程序開發的肯定覺得很熟悉，這就是Taro的強大之處，也是Taro框架的開發者肯定是個webpack開發的大牛，編譯生成對應的終端的代碼，而不是一個殼子嵌套。
在微信開發者工具中預覽項目
開發小程序的肯定知道微信開發者工具，如果你是初學的這裏給你一個下載的鏈接，方便下載學習：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下載後安裝步驟很簡單，跟安裝QQ幾乎一樣。
安裝完成後，你需要註冊一個賬號，這個自己按照提示註冊就可以了。
註冊後導入一個小程序項目
需要注意的是這不是新建，而是導入一個項目。目錄選擇的是你的taro項目剛纔編譯後生成的dist目錄
AppId如果有在公衆平臺註冊可以填，沒有默認是一個測試號直接導入即可。
導入後你就可以看到在微信開發者工具中顯示Hello World！了。
注意坑點
千萬不要在微信開發者工具中修改dist目錄，因爲這個文件是由taro編譯而來的；
如果要修改在taro的原項目修改，然後通過編譯將修改的內容編譯到dist文件中
Taro的目錄介紹
在目錄介紹前肯定會有疑惑，Taro是多端統一框架，前邊我們利用編譯工具生成了h5和微信小程序的代碼，那麼其他的支付寶小程序、百度小程序等又是如何生成？
這些的答案都在項目的package.json文件中的scripts部分當中：
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},
我們就以dev爲例解釋下dev: 後邊的都是哪一個平臺的
- weapp 微信小程序
- h5 手機web用於公衆號和瀏覽器等
- swan 百度小程序
- alipay 支付寶小程序
- tt 字節跳動小程序
- qq QQ小程序
- jd 京東小程序
- quickapp 快應用
- rn React Native
這些類型執行都和微信小程序的一樣，都是將: 後的改成相對應的模式即可
npm run dev:weapp
或
yarn dev:weapp
下邊就介紹下Taro的項目目錄結構
dist目錄
這個目錄在上邊生成微信小程序代碼時已經見到了，是我們在預覽時自動生成的，每次進行預覽都會根據我們預覽的終端不同，編譯成不同代碼。
每次編譯時都會刪除以前的代碼，這個小夥伴麼要注意一下。
config目錄
這個就是項目的一些配置，這些配置以後會不斷深入學習，但是現在還不瞭解，可以先不進行配置。否則會影響項目的運行。
node_modules
項目所需的依賴包，就是使用npm install進行安裝的包，一般不需要修改。
src目錄
這個是最重要的，這個是我們的源碼目錄，開發的所有代碼都在這個裏邊。
下邊給一個官方的目錄結構說明
├── dist 編譯結果目錄
├── config 配置目錄
| ├── dev.js 開發時配置
| ├── index.js 默認配置
| └── prod.js 打包時配置
├── src 源碼目錄
| ├── pages 頁面文件目錄
| | ├── index index 頁面目錄
| | | ├── index.js index 頁面邏輯
| | | └── index.css index 頁面樣式
| ├── app.css 項目總通用樣式
| └── app.js 項目入口文件
└── package.json
這一節就到這裏，這一節和上一節都是Taro基礎的內容，下一節將開始對Taro中使用React Hooks技術以及組件的編寫和傳值等的講解。