本篇文章前提 ：Taro 3.6版本 （React语法）

Taro多端开发框架，兼容多平台需注意

1. 跨平台的时候，调用不同平台的sdK的时候

简单使用

- import api from '../../utils/api'
// 我们可以根据不同的平台，引入不同的 API
+ let api
+ if (process.env.TARO_ENV === 'weapp') {
+  api = require('../../utils/api-weapp')
+ } else if (process.env.TARO_ENV === 'h5') {
+  api = require('../../utils/api-h5')
+ }

使用内置的文件import识别，进行处理

假如有一个 Test 组件存在微信小程序、百度小程序和 H5 三个不同版本，那么就可以像如下组织代码：

├── test.js                Test 组件默认的形式，编译到微信小程序、百度小程序和 H5 之外的端使用的版本
├── test.weapp.js          Test 组件的微信小程序版本
├── test.swan.js           Test 组件的百度小程序版本
└── test.h5.js             Test 组件的 H5 版本

a. 四个文件，对外暴露的是统一的接口，它们接受一致的参数，只是内部有针对各自平台的代码实现。

b. 而使用 Test 组件的时候，引用的方式依然和之前保持一致。import 的是不带端类型的文件名，在编译的时候会自动识别并添加端类型后缀：

import Test from '../../components/test';
<Test argA={1} argA={2} />

2. 模板语法，变量声明

2.1 模板语法

a. 标签内部使用{}包裹变量

<h1>
  {user.name}
</h1>

b. 标签属性使用key={变量} / className为常见的class类名

<img
  className="avatar"
  src={user.imageUrl}
/>

// css的作用域写法
import styles from './style.css'
<img
  className={avatar["avatar"]}
  src={user.imageUrl}
/>

c. style属性是 style={ } JSX 大括号内的一个普通 {} 对象

<img
  style={{
    width: 200,
    height: 100
  }}
/>

d. 条件渲染

<View>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</View>

// 当你不需要 else 分支时，你也可以使用更简短的 逻辑 && 语法：
<View>
  {isLoggedIn && <AdminPanel />}
</View>

2.2 变量声明

import { useState } from 'react';

// 方法作用域内部声明 count为变量值 setCount为设置方法
function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}