DOCSEARCHbyAlgolia
Submit Docs

Taro Documentation

website·Indexed 34 days ago

https://docs.taro.zone/

An open cross-platform and cross-framework development solution for building mini-programs and H5 applications. The documentation covers versions 1.x, 2.x, and 3.x, including configuration details, API specifications, platform plugins, and support for React and Preact.

Tokens
2.3M
Snippets
13.3K
Records
18.4K
Agent score
60%

What's inside Taro

  1. Overview of the Taro Editor component

    The Editor component is a rich text editor that allows users to edit text and images. It supports exporting content as tagged HTML or plain text, while internally storing data in the Delta format.

    Key constraints and behaviors:

    • HTML Support: Supports partial HTML tags and inline styles; however, class and id attributes are not supported.
    • Content Insertion: When using the setContents interface, inserting HTML may cause parsing errors due to illegal tags. It is recommended to use the Delta format for insertions within mini-programs.
    • Styling: The component includes basic internal styles. If you use the exported HTML in other components or environments, you must manually include the editor's styles and maintain the <ql-container><ql-editor></ql-editor></ql-container> DOM structure.
    • Image Controls: Image control settings are only effective during initialization.

  2. Overview of Taro on Harmony C-API

    Taro on Harmony C-API allows developers to build HarmonyOS applications using a Web development paradigm (React DSL). It provides a high-performance rendering pipeline based on HarmonyOS C-API, enabling developers to reuse existing Taro projects and Web technology stacks to create applications with performance comparable to native ArkTS.

  3. Overview of React Hooks support in Taro

    Starting with Taro 1.3, React Hooks are supported to reduce the complexity of Mini Program development. Hooks address several issues found in Class Components and older composition patterns:

    • Vs. Class Components: Hooks avoid this binding confusion and make logic reuse easier than class inheritance.
    • Vs. Mixins: Hooks prevent namespace collisions and allow for better TypeScript static type checking.
    • Vs. Higher-Order Components (HOC): Hooks avoid the 'wrapper hell' (deeply nested component instances) and do not inadvertently modify component props.

  4. Overview of Taro's simulated DOM and BOM

    In mini-program environments, Taro provides a simulated implementation of DOM and BOM APIs to support the operation of web frameworks like React and Vue. These implementations are located in the @tarojs/runtime package.

  5. Overview of InterstitialAd component

    The InterstitialAd component is a native component with a higher z-index than ordinary components. Each creation returns a new instance. Note that in mini-program environments, interstitial ad instances cannot be used across different pages. By default, the ad is hidden and must be displayed using the show() method.

  6. Overview of Seowhy Qiqiaoban

    Seowhy Qiqiaoban is a platform designed to convert websites into mini-programs. It is built on Taro and supports multiple platforms including WeChat, QQ, ByteDance, 360, Alipay, and Baidu. It provides one-click connection for websites using CMS platforms such as Seowhy 6, WordPress, DedeCMS, EmpireCMS, Zblog, and PHPCMS.

    Official Website: https://diy.seowhy.com/

  7. Overview of Taro Prerender for Mini-Programs

    Prerender is a technique provided by the Taro CLI to increase the initial rendering speed of mini-program pages. It works similarly to Server-Side Rendering (SSR) by rendering the initial state of a page directly into a dataless WXML string. This allows the rendering process to execute before the framework and business logic run, reducing the white-screen time caused by large setData() calls during the initial render.

    Trade-offs and Limitations:

    • Bundle Size: Package size increases because it trades space for time.
    • Interactivity: Pages are non-interactive until the Taro runtime completes the 'hydration' process (mounting real DOM and events).
    • Lifecycle Hooks: Prerender does not execute lifecycle methods like componentDidMount() (React) or ready() (Vue). Data processing should be moved to static getDerivedStateFromProps() (React) or created() (Vue).

  8. Overview of Taro Prerender

    Prerender is a technique provided by the Taro CLI to increase the initial rendering speed of mini-program pages. It works similarly to Server-Side Rendering (SSR) by rendering the initial state of a page directly into dataless WXML before the framework and business logic run. This bypasses the virtual DOM serialization and setData() overhead, making initial render speeds comparable to native mini-programs.

  9. Overview of Tencent Youshu tracking capabilities in Taro

    Taro integrates Tencent Youshu to provide data analysis and management for WeChat Mini Programs. It offers 8 automated 'zero-development' tracking capabilities: App launch, show, hide, page view, page leave, share, pull-down refresh, and pull-up touch-bottom. Additionally, it supports customized tracking for search, product attribution, and various business analyses (operational, livestreaming, and shopping guide).

  10. Overview of Multi-platform Framework Categories

    Multi-platform frameworks are generally categorized into three types based on their architecture:

    1. Full-stack (All-in-one): Develops everything from the rendering and layout engines to the DSL and framework (e.g., Flutter, Qt). They offer high performance and consistent rendering but require learning new DSLs (Dart/QML) and struggle with mini-program adaptation.
    2. Web Technology based: Brings Web technologies (JS, CSS) to mobile development using native components for rendering (e.g., React Native, Weex). They offer fast development and ecosystem reuse but can suffer from performance bottlenecks during frequent JS-to-Native communication (e.g., complex gestures).
    3. JavaScript Compilation based: Uses a JS-based DSL framework and compiles it into platform-specific code with a runtime or compatibility layer (e.g., Taro, uni-app, mpvue, WePY, chameleon). These are specifically designed to bridge the gap between various mini-program platforms and Web/Mobile environments.

  11. Overview of Taro harmony-hybrid platform

    The harmony-hybrid platform plugin provides a migration solution for developing HarmonyOS native applications using Web technologies. It inherits from the H5 platform and injects HarmonyOS native capability interfaces, allowing Web applications to access device hardware and system features. The architecture consists of two main parts: the Taro harmony-hybrid plugin (to generate Web resources) and the @hybrid/web-container HarmonyOS module (to load and run those resources).

  12. Overview of Refs in Taro 2.x

    Refs provide a way to access DOM nodes (native mini-program components) or Taro component instances created in the render method. While props are the primary way for parent-child interaction in Taro's data flow, Refs allow for forced modifications of child elements outside the normal data flow. It is recommended to prioritize using state and props (e.g., using an isOpen prop instead of calling open()/close() methods via a Ref) to maintain clarity.