Taro小程序跨端开发入门实战

// 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