taro號(hào)稱能統(tǒng)一小程序 H5與移動(dòng)端，最近公司有個(gè)小需求需要H5和小程序，所以就使用taro來(lái)實(shí)踐一下。
使用 Taro，我們可以只書(shū)寫(xiě)一套代碼，再通過(guò) Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App 端等）運(yùn)行的代碼。同時(shí) Taro 還提供開(kāi)箱即用的語(yǔ)法檢測(cè)和自動(dòng)補(bǔ)全等功能，有效地提升了開(kāi)發(fā)體驗(yàn)和開(kāi)發(fā)效率。擁有React 完全一致的 API 和組件化系統(tǒng)。
體驗(yàn)總結(jié)：
特點(diǎn)：JS語(yǔ)言、類react語(yǔ)法，寫(xiě)一套代碼生成H5、小程序、reactNative代碼。但是目前就微信小程序與支付寶小程序兼容比較好，H5端也尚可，reactNative先就不要想了。
缺點(diǎn)：生成各端代碼，各端人員還要去做好兼容措施；目前踩坑人較少。對(duì)小程序兼容較好，H5部分兼容，reactNative兼容性較差基本不能用。

前端基礎(chǔ)

開(kāi)發(fā)小程序需要掌握基礎(chǔ)知識(shí)（這里只介紹重要知識(shí)點(diǎn)方便快速上手項(xiàng)目，當(dāng)然以后前端知識(shí)js語(yǔ)法和css樣式還是要系統(tǒng)學(xué)習(xí)的）
js語(yǔ)法：定義變量、方法、對(duì)象、數(shù)組基本操作，以及模塊化導(dǎo)出(開(kāi)始不一定要懂原理、會(huì)導(dǎo)出對(duì)象和方法給外部使用即可)。
js學(xué)習(xí)資料
css樣式：盒子模型、padding、margin、position以及最重要的flex布局，掌握f(shuō)lex布局你基本就掌握了前端布局精髓。float左右浮動(dòng)可暫時(shí)不掌握，因?yàn)槭褂胒lex更加強(qiáng)大。
css資料
flex布局

taro框架

taro語(yǔ)法與react語(yǔ)法基本相同，很方面前端同學(xué)掌握
官方地址
心得：
1.一切顯示視圖皆組件，頁(yè)面同樣是組件只是需要在app.js中配置路由
2.通過(guò)state管理組件內(nèi)狀態(tài)，通過(guò)props管理子組件狀態(tài)。（簡(jiǎn)單理解就是頁(yè)面顯示的變量需要使用state來(lái)管理）

入口文件

入口文件默認(rèn)是 src 目錄下的 app.js。

class App extends Component {
  config = {
  //配置頁(yè)面
    pages: [
      'pages/index/index',
      'pages/mine/minePage',
      'pages/myOrder/myOrderPage',
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
//配置tabBar
    tabBar: {
      backgroundColor: "#fff",
      color:'#7F8389',
      selectedColor:'#3776EC',
      list: [
        {
          pagePath: 'pages/index/index',
          text: "主頁(yè)",
          iconPath: "assets/home_unselect.png",
          selectedIconPath: "assets/home_select.png"
        },
        {
          pagePath: "pages/mine/minePage",
          text: "我的",
          iconPath: "assets/my_unselect.png",
          selectedIconPath: "assets/my_select.png"
        },
      ]
    },

  }
//組件的生命周期
  componentDidMount () {}
  componentDidShow () {}
  componentDidHide () {}
  componentDidCatchError () {}

  // 在 App 類中的 render() 函數(shù)沒(méi)有實(shí)際作用，配置首頁(yè)顯示的 component
  // 請(qǐng)勿修改此函數(shù)
  render () {
    return (
      <Index />
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

taroUI組件庫(kù)

Taro要掌握重要知識(shí)
jsx語(yǔ)法
路由功能
component&Props&State
事件處理
條件渲染
列表渲染
掌握這些基本可以上手taro去寫(xiě)項(xiàng)目，一些其他功能可參照官方文檔自己查找。