Taro study guide

Appearance

快速上手 ​

本节将引导你快速上手 Taro 4。

UI 组件库选择 ​

Taro 4 支持多个优秀的 UI 组件库：

  • duxui: 一套能同时兼容小程序、React Native、鸿蒙、H5的移动端 UI 组件库
  • NutUI: 京东风格的轻量级移动端 Vue 组件库（支持 Vue3）
  • taroify: 轻量、可靠的小程序端 Taro 组件库（Vant 的 Taro 版本）
  • @antmjs/vantui: 基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库
  • Tard: 一套基于 Taro 框架开发的多端 React UI 组件库

鸿蒙应用开发 ​

要开发鸿蒙应用，你需要：

  1. 安装鸿蒙端平台插件：
bash
npm install @tarojs/plugin-platform-harmony-ets
  1. 配置项目：
ts
// config.ts
export default defineConfig(async (merge, { command, mode }) => {
  const baseConfig: UserConfigExport = {
    projectName: 'harmony-taro',
    plugins: ['@tarojs/plugin-platform-harmony-ets'],
    harmony: {
      compiler: 'vite',
      hapName: 'entry',
      name: 'default',
      projectPath: "鸿蒙项目路径",
    },
  }
})
  1. 运行开发命令：
bash
taro build --type harmony --watch

性能优化 ​

CompileMode 优化 ​

对于需要性能优化的组件，可以使用 CompileMode：

jsx
function GoodsItem () {
  return (
    <View compileMode>
      {/* 组件内容 */}
    </View>
  )
}

示例代码 ​

以下是一个使用 React 开发的简单示例：

jsx
import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World！',
  }

  render() {
    return (
      <View className="index">
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

学习资源 ​

  • 【资讯】Taro 团队博客
  • 【教程】5 分钟上手 Taro 开发
  • 【视频】5 分钟快速上手 Taro 开发小程序

更多的资源请查看 [更多资源]，如果您有好的资源或教程和大家分享，欢迎提交资源到 [awesome-taro]。