Taro框架学习

Taro是…巴拉巴拉一大堆，不介绍了啊( 机票）

好，这就开撸

1. 下载脚手架

npm install -g @tarojs/cli

2. 创建模板

taro init myApp

3. 进入项目 myApp 安装以来

cnpm install

现在脚手架项目已经准备好了 你可以执行不同命令查看不同端的代码 例如

taro build --type weapp --watch  // 查看小程序
taro build --type weapp  // 打包成小程序端
taro build --type h5 --watch   // 查看h5端
taro build --type h5  // 打包成h5端

4. 引入taro-ui ( 机票 )
   1)、全局下载 taro-ui cnpm install -g @tarojs/cli
   2)、XX.tsx 文件中 引入 import { AtButton } from 'taro-ui'
   3)、XX.scss文件引入样式 @import "~taro-ui/dist/style/components/button.scss";
   OK，这样 taro-ui 就按需引入到相关页面了，使劲用吧

5. 使用 redux

新建三个文件夹分别为 constans、actions、reducers，他们的作用分别为 提供 type类型、获取新数据操作、修改数据

我就不截图了啊 源码放在下面了 一会可以看着源码学习。
先看 这几个文件他们是一个流程，意思就是他们这个流程的type类型跟其他流程的不放在一起( constans/index、actions/index、reducers/counter 以及 constans/getNumber、actions/getNumber、reducers/getNumber ) 我一共写了两套流程，但是在 reducers下面多了一个 index.js 一会解释再。

6. 定义 type 类型, 打开 constans/index.js 可以看到定义的那些类型
7. 引用定义类型
   看 actions/index.js 文件中的 getAllArea 方法, 这个方法已经暴露出去了， 就假如现在有页面已经调用了这个方法，然后获取数据之后 dispatch 一个 AllArea, 然后 AllArea 会触发 reducers 中 type 为 ALLAREA 的 函数，顺带着把获取的数据带了过去.
   看 reducers/counter，现在数据 通过 switch 已经保存在了 allArea 中，那么现在就应该将数据抛出去了。这时候就用到了 reduers/index 这个文件了，他的作用就是把 每一个流程中的数据 统一抛出去。

import { combineReducers } from 'redux'
import counter from './counter'
import getNumber from './getNumber'

export default combineReducers({
  counter,
  getNumber
})

这里就是想 counter 和 getNumber 抛出去，然后在页面通过

import { connect } from '@tarojs/redux'

@connect(({ counter, getNumber }) => ({
  counter, getNumber
}))

这回你想使用里面的数据时候 就可以这样调用了.

const { allArea } = this.props.counter

**

那咋就做到一套代码可以打包成多端的呢？？

**

看我在 components 文件下面起了两个文件分别名为 powerUse.h5.js 和 poweUse.weapp.js 他俩分别写着可以在 h5 和 小程序 使用的方法，意味着 powerUse.weapp.js 可以在 小程序中使用 powerUse.h5.js 可以在 h5 中使用，然后再index.tsx 中进行引用，但是引用的时候要注意了，需要按照以下方式进行引用

对， 就是没有带后缀，这样在使用不同命令的时候 他可以引用可以在当前端可以引用的文件， 例如你执行 taro build --type weapp --watch 他就会引用 powerUse.weapp.js， 再次执行 taro build --type h5 --watch 他就会引用 powerUse.h5.js 的文件

当然 这样你就可以把在小程序中使用的流程卸载 XX.weapp.js 中, 这样就不会有多余的代码进入到 h5的包里面了
然后就可以进行正常的传参啊 之类的

完事了啊 散吧都

github源码机票

标签：taro,getNumber,框架,counter,js,学习,Taro,h5,type
来源： https://blog.csdn.net/qq_37449852/article/details/94562274