Taro 3 supports running Web frameworks directly on each platform, and developers are using real frameworks like React and Vue.
However, Taro follows the WeChat mini program specification in terms of components, APIs, routing and other specifications, so there are some differences between using React in Taro and the familiar web side for developers, which will be listed in detail below.
Because Taro follows the routing specification for mini program, it introduces [entry component](. /vue-entry) and [page component](. /vue-page) concepts, corresponding to the mini program specification's entry component
app and page component
A Taro application consists of an entry component and at least one page component.
Since Taro v3.3+, development with H5 tags is supported, see Using HTML tags for details.
Development in Taro can be done using built-in components of the mini program specification, such as
- component names follow the mini program specification (all lowercase, kebab-case). 2. component properties follow the mini program specification (all lowercase, kebab-case).
- component properties follow the mini program specification (all lowercase, kebab-case).
- component properties with
Booleanvalues need to be explicitly bound to
true, abbreviations are not supported.
- See the next section for the event specification: [component-events](. /vue-overall#%E4%BA%8B%E4%BB%B6).
Note: If a new component or property of a component added to a platform is not yet supported by Taro, you can submit Issues and we will fix it as soon as possible.
Events are the same as on the web side. In the event callback function, the first argument is the event object, and calling
stopPropagation in the callback will stop the bubbling.
- Use the
v-on:, see Vue documentation for more usage) instead of
bindin the mini program event name (instead of
onin the Alipay mini program event name).
@tapfor click events in Vue.
In Taro 1 & 2, Taro determines whether the events bound in the mini program template are in the form of
catch depending on whether the developer uses
e.stopPropagation(). So event bubbling is controlled by the mini program.
But in Taro 3, we implement a system of events in the mini program logic layer, including event triggering and event bubbling. The events bound in the mini program template are in the form of
In general, this mini program event system implemented in the logic layer works fine, and the event callbacks can trigger, bubble, and stop bubbling correctly.
catchtouchmove event bound in the mini program template prevents the callback function from bubbling and also prevents the view from scrolling through, which Taro's event system cannot do.
In the previous point, we introduced the event mechanism of Taro 3. Since events are bound as
bind, you cannot use
e.stopPropagation() to prevent scroll-through.
Two solutions are summarized for rolling penetrations.
Resolved using style: Disable scrolling of penetrated components。
This is also the most recommended practice.
Taro version 3.0.21 started to support
But the map component itself is scrollable, even if its width and height are fixed. So the first approach can't handle the scrolling events that bubble up to the map component.
This is where you can add the catch-move property to the
We recommend thinking in terms of DSL features of Vue and React, since
dataset is a feature of mini program.
dataset is a special template property that allows you to get the
dataset data in the
event object of an event callback.
This is supported by Taro, and can be obtained in the event callback object via
As mentioned in the previous point, Taro's simulation of the mini program
dataset is implemented in the logic layer of the mini program. There is no real setting of this property in the template.
But when there are APIs in the mini program (e.g.,
createIntersectionObserver) that get to the node of the page, they don't get it because there is no actual corresponding property on the node.
This is the time to consider using taro-plugin-inject plugin to inject some generic attributes, such as
Taro 3 implements a Web standard BOM and DOM API on the mini program logic layer, so the
document.removeChild APIs used by Vue are actually emulated by Taro, with the end effect of rendering Vue's virtual DOM tree as a Taro The final effect is to render Vue's virtual DOM tree as a Taro-simulated Web standard DOM tree.
Therefore, the lifecycle trigger timing in Taro3 Vue is a bit different from what we usually understand in web development.
The lifecycle methods of Vue components are supported in Taro.
After onLoad, the page component renders to Taro's virtual DOM before triggering.
Triggered after the page component is rendered to Taro's virtual DOM.
At this point, Taro's virtual DOM can be accessed (using Vue ref, document.getElementById, etc.) and manipulation of it (setting the style of the DOM, etc.) is supported.
However, this does not mean that Taro's virtual DOM data has been transferred from the logical layer
setData to the view layer. So at this point it is not possible to get the DOM nodes of the rendering layer of the mini program by methods like
createSelectorQuery. Only in the onReady lifecycle.
The methods in the mini program page will also work in Taro's page: write the method of the same name in the Vue object.
Note: The degree of support for the mini program page method varies from end to end, so please check the documentation for the corresponding mini program.
The use of ref in Taro is exactly the same as in Vue, but the "DOM" obtained is different from the browser environment and the mini program environment.
What you get with Vue Ref is Taro's virtual DOM, which is similar to the browser's DOM, and you can manipulate its
style, call its API, etc.
However, Taro's virtual DOM runs on the logical layer of the mini program and is not a real mini program rendering layer node, which has no information about the size, width, etc.
To get the real mini program presentation layer node, you need to call the API used in the mini program to get the DOM in the onReady lifecycle.
On the mini program side, there are some additional configuration options and things to keep in mind when using
v-html, please refer to "Rendering HTML" for details.
<transition> component uses
getComputedStyle internally to sniff the animation style on the component. However, there is no way to implement
getComputedStyle in the mini program, it can be hacked in the following way.
animationDuration to the element's
style to specify the transition time to be compatible with
- The built-in
transition-groupcomponent cannot be used in the mini prgram because the mini prgram accesses element positions as an asynchronous API.
<style scoped>is not supported in the mini prgram, so we recommend using cssModules instead. #6662
idof all components must remain unique across the application (even if they are on different pages), otherwise it may cause problems with events not firing, #7317