【taro】taro快速入門

前言

• 最近玩了玩taro，我聽說這種類似對標uniapp的坑特別多，後來各種搜尋發現用react的還是選taro比較靠譜，因為用的人多，就算踩坑，踩的也是明坑。而像rax那些用的人少，萬一遇見坑，那肯定是暗坑了。

快速上手

• 直接安裝taro腳手架，這個腳手架做的還是相當6的，基本上功能都全了。然後通過taro init初始化專案。
• 聽說taro已經支援hooks寫法，於是我稍微試了下幾個常用hook，基本沒啥問題。就是setState時候建議一次更新完，因為他的setState不會合並更新，並且編譯出的h5也不會合並更新。
• taro官網也整了redux使用，照著說明配也ok。
• 值得說的就是sitemap的問題。
• 官方模板拉下來編譯後會有找不到sitemap的問題。這時一般是把根目錄下的project.config.json中的settings裡有個 "useCompilerModule"寫成true就行了。另外種解決方法就是使用config裡的copy，應該用的是webpack-copy-plugin，整個sidemap.json，然後編譯時候複製到根目錄即可。
• 關於單位，taro官方建議使用px，我也感覺用px會好點，否則螢幕越大東西越大，看著反而跟玩具一樣。

多端開發與除錯

• 由於模板上還沒有變，所以需要改一下設定，output處用變數即可生成各種端目錄，從而一起除錯：

 outputRoot: `dist/${process.env.TARO_ENV}`,

• 多端程式碼適配也是看這個環境變數，taro還有額外的檔名適配規則，具體可以看：http://taro-docs.jd.com/taro/docs/envs

路由功能

• 這個就是調api，taro給的即可：

// 跳轉到目的頁面，開啟新頁面
Taro.navigateTo({
  url: '/pages/page/path/name'
})

// 跳轉到目的頁面，在當前頁面開啟
Taro.redirectTo({
  url: '/pages/page/path/name'
})

• tabbar則是：

Taro.switchTab(option)

• 具體參考taro官網api ： http://taro-docs.jd.com/taro/docs/apis/route/switchTab