初识taro

taro的简介
Taro 是一套遵循 React 语法规范的 多端开发解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码。
taro的安装和使用
注意：以下的工具安装可以使用npm yarn cnpm 命令进行安装。

• 首先cli工具安装
  npm insatll -g @tarojs/cli

• 然后通过命令创建模板项目
  taro init myProject
  

• 在创建好项目后，taro会默认安装项目所需要的依赖，安装使用的的工具安装yarn>cnpm>npm ,当在网上克隆了项目下来，可以通过命令进行安装包
  npm install

• 打开项目的命令一般在package.json里面可以看见
  例如小程序运行命令：npm run dev:weapp
  
  开发时注意
  若使用微信小程序预览模式，则需下载并使用微信开发者工具添加项目进行预览，此时需要注意微信开发者工具的是项目设置

• 需要设置关闭 ES6 转 ES5 功能，开启可能报错

• 需要设置关闭上传代码时样式自动补全，开启可能报错

• 需要设置关闭代码压缩上传，开启可能报错
  项目的目录简介
  
  入口文件
  app.js中config是项目配置：
  pages是页面的路径
  window是默认窗口表现
  permission是位置相关权限的声明
  路由
  

注意：navigateTo的跳转页面只有五层，不是无节制的去跳转的


设计稿及尺寸单位
目前taro支持750 640 828三种尺寸设计稿，换算规则如下：

JSX简介
组件都应当首字母大写并且使用大驼峰式命名法

组件化&props
组件可以将ui切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件，组件从概念上看就像是函数，可以接受任意的输入值（称之为props），并返回一个需要在页面上展示的taro元素。

文件命名
taro中普通js、ts以小写字母命名，多个单词以下划线命名
taro组件文件命名遵循驼峰命名，ReservationCard.jsx
文件后缀
taro中普通js/ts文件以.js或者.ts作为文件后缀
taro组件则以.jsx或者.tsx作为文件后缀
js规范
不要在句末使用分号
字符串统一使用单引号
生命周期和state
生命周期：
1.componentWillMount(){} 第一次渲染之前执行，只执行一次
2.componentDidMount(){} 第一次渲染之后执行

在render下面的表达式 this,state.name
在函数中进行设置 this,setState({name:“哈哈哈”})
props
引用图片
两种方法：
第一种是import
第二种是require
样式中的px需要进行写成大写，不然会直接转换成rem
条件渲染

• 短路表达式

• 三元表达式

• 在外部进行定义

• 循环条件
  
  注意：不能使用if，并且需要把数据处理好了之后进行渲染
  冒泡处理事件与样式表
  样式：id 标签 属性选择器在taro里面不能使用，常规用的类选择器，自定义组件只对当前组件有效