Taro是…巴拉巴拉一大堆,不介绍了啊( 机票)
好,这就开撸
- 下载脚手架
npm install -g @tarojs/cli
- 创建模板
taro init myApp
- 进入项目 myApp 安装以来
cnpm install
现在脚手架项目已经准备好了 你可以执行不同命令查看不同端的代码 例如
taro build --type weapp --watch // 查看小程序
taro build --type weapp // 打包成小程序端
taro build --type h5 --watch // 查看h5端
taro build --type h5 // 打包成h5端
-
引入taro-ui ( 机票 )
1)、下载 taro-uicnpm install taro-ui
2)、XX.tsx 文件中 引入import { AtButton } from 'taro-ui'
3)、XX.scss文件引入样式@import "~taro-ui/dist/style/components/button.scss";
OK,这样 taro-ui 就按需引入到相关页面了,使劲用吧 -
使用 redux
新建三个文件夹分别为 constans、actions、reducers,他们的作用分别为 提供 type类型、获取新数据操作、修改数据
我就不截图了啊 源码放在下面了 一会可以看着源码学习。
先看 这几个文件他们是一个流程,意思就是他们这个流程的type类型跟其他流程的不放在一起( constans/index、actions/index、reducers/counter 以及 constans/getNumber、actions/getNumber、reducers/getNumber ) 我一共写了两套流程,但是在 reducers下面多了一个 index.js 一会解释再。
- 定义 type 类型, 打开 constans/index.js 可以看到定义的那些类型
- 引用定义类型
看 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的包里面了
然后就可以进行正常的传参啊 之类的
完事了啊 散吧都