快速掌握跨平台框架taro

taro号称能统一小程序 H5与移动端，最近公司有个小需求需要H5和小程序，所以就使用taro来实践一下。
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能，有效地提升了开发体验和开发效率。拥有React 完全一致的 API 和组件化系统。
体验总结：
特点：JS语言、类react语法，写一套代码生成H5、小程序、reactNative代码。但是目前就微信小程序与支付宝小程序兼容比较好，H5端也尚可，reactNative先就不要想了。
缺点：生成各端代码，各端人员还要去做好兼容措施；目前踩坑人较少。对小程序兼容较好，H5部分兼容，reactNative兼容性较差基本不能用。

前端基础

开发小程序需要掌握基础知识（这里只介绍重要知识点方便快速上手项目，当然以后前端知识js语法和css样式还是要系统学习的）
js语法：定义变量、方法、对象、数组基本操作，以及模块化导出(开始不一定要懂原理、会导出对象和方法给外部使用即可)。
js学习资料
css样式：盒子模型、padding、margin、position以及最重要的flex布局，掌握flex布局你基本就掌握了前端布局精髓。float左右浮动可暂时不掌握，因为使用flex更加强大。
css资料
flex布局

taro框架

taro语法与react语法基本相同，很方面前端同学掌握
官方地址
心得：
1.一切显示视图皆组件，页面同样是组件只是需要在app.js中配置路由
2.通过state管理组件内状态，通过props管理子组件状态。（简单理解就是页面显示的变量需要使用state来管理）

入口文件

入口文件默认是 src 目录下的 app.js。

class App extends Component {
  config = {
  //配置页面
    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: "主页",
          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() 函数没有实际作用，配置首页显示的 component
  // 请勿修改此函数
  render () {
    return (
      <Index />
    )
  }
}

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

taroUI组件库

Taro要掌握重要知识
jsx语法
路由功能
component&Props&State
事件处理
条件渲染
列表渲染
掌握这些基本可以上手taro去写项目，一些其他功能可参照官方文档自己查找。