// Taro 代码import Taro from '@tarojs/taro'import { Text, View, Button } from '@tarojs/components'import React from 'react'import './A.scss'
type Props = {  onClick: () => void  tip: string}export default class A extends React.PureComponent<Props> {  componentWillUnmount() {}  componentDidMount() {}  componentWillReceiveProps(nextProps) {}  shouldComponentUpdate() {}  componentDidShow() {}  componetDidHide() {}    onClickHandler = () => {    this.props.onClick()  }
  render(): JSX.Element {    return (      <View className="a">        <Button onClick={this.onClickHandler}></Button>        <Text> a component {this.props.tip}</Text>      </View>    )  }}

Component({  properties: {    myProperty: { // 属性名      type: String    },    myProperty2: String // 简化的定义方式  },  data: {}, // 私有数据，可用于模板渲染
  // 生命周期函数，可以为函数，或一个在 methods 中定义的方法名  ready: function() {},
  attached: function() {},
  moved: function(){},
  detached: function(){},
  onShow(): function() {},
  onHide(): function() {},
  methods: {    onButtonTap: function{      this.setData(){        // 更新属性和数据的方法与更新页面数据的方法类似      }    }  }})

render(): JSX.Element {  return (    <View className="index">      {this.state.list.map((item) => {        <View key={item.id}>{item.name}</View>      })}      <Button onClick={this.onClickHandler}>Hello JSX </Button>      <Text> a component {this.props.tip}</Text>    </View>  )}

<view class="index">  <view wx:key={item.id} wx:for="{{list}}" wx:for-item="item">{{item.name}}</view>  <button bindtap="onClickHandler">Hello JSX</button>  <text>{{tip}}</text></view>

# 使用 npm 安装 CLI$ npm install -g @tarojs/cli$ taro init myTaroApp
# 使用 npx 初始化项目$ npx @tarojs/cli init myTaroApp

// pages/index/index
import React from 'react'import { View, Text } from '@tarojs/components'
export default class Index extends React.Component { state = {   msg: 'Hello World！' }
 render () {   return (     <View>{this.state.msg}</View>   ) }}

# 启动指定平台代码，可以同时运行于多平台# 仅限全局安装$ taro build —-type {weapp/h5/swan/tt/jd/rn} —-watch 

# 开发调试命令：
# 京东小程序npm run dev:jd# 百度小程序npm run dev:swan# 微信小程序npm run dev:weapp
# 打包发布命令：
# 京东小程序npm run build:jd# 百度小程序npm run build:swan# 微信小程序npm run build:weapp

# 只运行一次即可$ npx @tarojs/cli convert

├── dist                   编译结果目录├── config                 配置目录|   ├── dev.js             开发时配置|   ├── index.js           默认配置|   └── prod.js            打包时配置├── src                    源码目录|   ├── components         公共组件目录|   ├── pages              页面文件目录|   |   ├── index          index 页面目录|   |   |   ├── banner     页面 index 私有组件|   |   |   ├── index.js   index 页面逻辑|   |   |   └── index.css  index 页面样式|   ├── utils              公共方法库|   ├── app.css            项目总通用样式|   └── app.js             项目入口文件└── package.json       项目包信息

├── dist                                编译结果目录|   ├── weapp                           微信平台编译目录|   ├── swan                            百度平台编译目录|   ├── jd                              京东平台编译目录|   ├── ...                             其它平台编译目录├── config                              配置目录|   ├── dev.js                          开发时配置|   ├── index.js                        默认配置|   └── prod.js                         打包时配置├── src                                 源码目录|   ├── assets                          公共资源目录（内含图标等资源）|   ├── components                      公共组件目录|   |   └── Btn                         公共组件 Btn 目录|   |       ├── Btn.tsx                 公共组件 Btn 逻辑|   |       └── Btn.scss                公共组件 Btn 样式|   ├── pages                           页面文件目录|   |   └── index                       index 页面目录|   |       ├── components              index 页面的独有组件目录|   |       |   └── Banner              index 页面的 Banner 组件目录|   |       |       ├── Banner.tsx      index 页面的 Banner 组件逻辑|   |       |       └── Banner.scss     index 页面的 Banner 组件样式|   |       ├── index.js                index 页面逻辑|   |       └── index.scss              index 页面样式|   ├── subpackages                     分包目录（项目过大时建议分包）|   |   └── profile                     一个叫 profile 的分包目录|   |       └── pages                   该分包的页面文件目录|   |           └── index               该分包的页面 index 目录（其下结构与主包的页面文件一致）|   ├── utils                           项目辅助类工具目录|   |   └── api.js                      比如辅助类 api 等|   ├── store                           Redux 状态管理|   |   ├── reducers                    Redux Reducers|   |   └── actions                     Redux Actions|   ├── app.scss                        项目总通用样式|   ├── types                           项目 TS 类型声明|   └── app.config.js                   项目入口配置文件|   └── app.js                          项目主入口文件└── package.json                        依赖管理包信息

# 多端适配入口文件目录结构
├── app.js                         # 默认入口信息├── app.h5.ts                      # H5 入口信息├── app.jd.ts                      # 京东小程序 入口信息├── app.swan.ts                    # 百度小程序 入口信息├── app.tt.ts                      # 头条小程序 入口信息├── app.weapp.ts                   # 微信小程序 入口信息

# 多端适配的文件目录结构
├── config                                # 多端适配配置文件目录|   ├── config.h5.ts                      # H5 特有配置信息|   ├── config.jd.ts                      # 京东小程序 特有配置信息|   ├── config.swan.ts                    # 百度小程序 特有配置信息|   ├── config.tt.ts                      # 头条小程序 特有配置信息|   ├── config.weapp.ts                   # 微信小程序 特有配置信息

// 京东逻辑if (process.env.TARO_ENV === 'jd') { // 如果是京东小程序，需要处理的内容，比如分享}// 百度逻辑if (process.env.TARO_ENV === 'swan') {// 如果是百度小程序，需要处理的内容，比如支付// ... }// 微信逻辑if (process.env.TARO_ENV === 'weapp') {// 如果是微信小程序，需要处理的内容，比如跳转其它微信小程序// ...  }// H5 逻辑if (process.env.TARO_ENV === 'h5') {// ...  }// 头条小程序 逻辑if (process.env.TARO_ENV === 'tt') {// ...  }

# 如果是多个平台，之间可以使用空格隔开。
/* #ifdef weapp */// 样式代码/* #endif *//* #ifdef swan */// 样式代码/* #endif */
/* #ifdef jd */// 样式代码/* #endif */
/* #ifdef jd weapp */// 样式代码/* #endif */# 代码在打包时不会增加包体积，针对不同平台提取相应代码；

# 终端1$ npm run dev:weapp
# 终端2$ npm run dev:swan