【笔记-taro】《imooc-taro多端框架开发外卖首页》

不念不忘少年蓝@ 2021-12-09 03:47 280阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> 20190716：《imooc-taro多端框架开发外卖首页》</td> 
  </tr> 
 </tbody> 
</table>

地址：[https://www.imooc.com/learn/1084][https_www.imooc.com_learn_1084]

### 第01章 Taro的基本介绍 ###

##### 01-01 Taro多端框架开篇介绍 #####

一、Taro框架于2018年6月7号正式开源。Taro是由京东-凹凸实验室打造的一套遵循react语法规范的多端统一开发框架。

##### 01-02 搭建Taro环境 #####

一、官网 [https://taro.aotu.io][https_taro.aotu.io]  
二、安装  
1、安装Taro开发工具 @tarojs/cli  
2、使用npm或者yarn全局安装，或者世界使用npx  
3、`npm install -g @tarojs/cli`  
或者`yarn global add @tarojs/cli`  
4、`cd app`  
5、`npm run dev:h5`  
三、使用  
1、`taro init app`  
四、dev环境启动  
1、`npm run dev:h5` WEB  
2、`npm run dev:weapp` 微信小程序  
3、`npm run dev:swan` 百度小程序  
4、`npm run dev:alipay` 支付宝小程序  
五、目录  
1、project.config.json 微信小程序  
2、config，项目启动编译  
六、要使用taro提供的组件，  等，而不能使用

七、在小程序中，导出包的名字要和引入的文件名一样  
`import Child from './Child'`  
八、props传值  
1、自定义组件中接收的来自父组件的传值统称为props  
2、props是只读的  
3、当传递props的值是函数时，必须在用on+函数名的规范来命名  
（1）onClick不能用函数  
① `<Button onClick={() => {}}>调用</Button>` 会报错，  
应写成 `<Button onClick={this.handleClick.bind(this)}></Button>`  
九、生命周期  
1、h5与小程序端有差别  
2、react框架中的生命周期函数被保留  
3、新增支持小程序的几个生命周期

### 第02章 Taro项目实践 外卖首页头部 ###

##### 02-01 #####

[https_www.imooc.com_learn_1084]: https://www.imooc.com/learn/1084
[https_taro.aotu.io]: https://taro.aotu.io