<react> Taro，从入门到放弃

一、安装与使用

npm install -g @tarojs/cli
或者
yarn global add @tarojs/cli(yarn安装方式：npm install -g yarn )

创建项目

taro init myApp

微信小程序（https://www.jianshu.com/p/aaafa486cf63 taro，从入门到放弃---小程序篇）

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp

百度小程序

# yarn
$ yarn dev:alipay
$ yarn build:alipay
# npm script
$ npm run dev:alipay
$ npm run build:alipay

H5

# yarn
$ yarn dev:h5
$ yarn build:h5
# npm script
$ npm run dev:h5
$npm run build:h5

React Native

# yarn
$ yarn dev:rn
# npm script
$ npm run dev:rn

环境更新

# taro
$ taro update self
# npm
npm i -g @tarojs/cli@latest
# yarn
yarn global add @tarojs/cli@latest
项目依赖更新
$ taro update project

Taro-ui 组件引入

$ npm install taro-ui

因为要支持自定义主题功能，需要将样式从组件中抽离出来，在微信小程序中依赖 globalClass 功能，所以需要微信基础库版本在 v2.2.3 以上。

配置需要额外编译的源码模块
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：

h5: {
  esnextModules: ['taro-ui']
}

在代码中 import 需要的组件并按照文档说明使用

// page.js
import { AtButton } from 'taro-ui'
// 除了引入所需的组件，还需要手动引入组件样式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可