Taro入门教程

Taro是啥？

遵循Taro语法编写出的程序，可以编译成 微信原生小程序代码、 支付宝原生小程序代码、 RN 原生代码等等；Taro做的事情只是语法统一，比如某段Taro程序在支付宝app上调试，先转换成支付宝小程序代码，再运行转换后的代码。

吐槽：

1、不管是微信小程序还是taro的官方文档，都默认你是懂标签语言的，懂js的，你是做做过前端开发的，有点基础有人带还好，小白自学的成本不小。
2、开发taro和微信小程序大多都是用的VSCode，仅仅是个编辑器，微信小程序的官方开发套件几乎没人用来写代码，只用来调试，Xcode、AndroidStudio这种集成开发环境就友好太多了。

学习：

1、建议从官方文档开始，文档多读几遍，文档中的例子多写几遍，啥都有了，语言类的东西没那么难，毕竟作为程序员，数据结构和算法都已经相当熟悉了。
2、语法--> 组件--> API，好像所有的语言都是如此，进阶了就封装组件给别人用，吃太饱了就想搞事情，要么自我革命要么革别人的命。

以下是一些学习Taro必要的文章。

Taro官方文档传送门：http://taro-docs.jd.com/taro/docs/README.html
Flex布局教程：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
classnames：https://www.npmjs.com/package/classnames

一些我学习过程遇到的坎坷：

1、先说下调试，cd到taro项目根目录，npm install安装相关的依赖后，例如要调试小程序，执行完

yarn dev:weapp

后，打开微信小程序官方套件:微信开发者工具，打开项目中新生成的dist目录即可自动运行，不是src目录！，dist目录就是微信小程序代码的目录，scr目录中的代码转换生成。
2、Taro小程序中判断两个值相等，需要三个等号===，不相等：!==
3、空就用null，例如return:flag?<View></View>:null;
4、npm install classnames后，使用非常方便

import classnames from 'classnames'
state = {
   flag:0,
  }
const { flag } = this.state;
render(){
  return<View className={classnames(flag === 0 ? 'whitebg' : 'greybg')}></View>
}

index.scss:

.whitebg{
  background-color: white;
}
.greybg{
  background-color: grey;
}

样式文件中whitebg写白色背景，例如background-color:#ffffff，greybg样式写灰色背景，这样就可以通过控制flag的值来控制View的背景颜色，控制其他参数也是类似

this.setState({flag:1})

5、跳转页面传参数：

const url = `/pages/travel/travel-detail/index?travelId=${item.travelId}`;
Taro.navigateTo({
   url: url,
})

参数获取：

componentDidMount() { 
  let { travelId } = this.$router.params
  print(travelId)
}

6、有些Taro组件支持的环境不全，例如地图不支持h5，判断环境代码：

if (process.env.TARO_ENV === 'h5') {
}

7、定时器，单位毫秒：

let mapTimer = null;
mapTimer = setInterval(() => {
             //doSomeThing
}, 1000）);

8、关于弹窗，需要先写一个弹窗到当前页面，使用一个参数控制弹窗是否显示即可，参考第4条控制flag参数
9、控制某块显示与不显示也是通过控制参数来做：

{isEmptyObject(trainData)?null:this.renderTrainDetail(trainData)}

此例中判断trainData是否符合条件来控制renderTrainDetail()组件是否显示
10、字符串中带参数：用大键盘数字1左边的键 : `

`${item.totalMiles}km`