Skip to main content
Version: 3.x

Community Quality Material

This is a collection of various quality materials contributed by the community at Taro Material Market.

Note: Platform Support does not hit ✔️, meaning it has not been verified, does not mean it is not supported at all.

How to contribute#

All developers are welcome to contribute materials to the Taro community. The following steps can be taken to contribute, attract traffic, discuss and grow together.

  1. Submit materials to the Taro Materials Marketplace and provide complete documentation.
  2. Modify this document to add a description for the material.
  3. Add a discussion to the Taro Discussion Group to communicate with developers.

Template Project#


NetEase cloud music mini program#

React

🎉NetEase cloud music mini program based on Taro + Taro UI + Redux + React Hooks + Typescript.

@lsqy 【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

nice-router-taro#

React

nice-router, Front-end mini program development framework for back-end programmers.

@kala888 【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Xiaoxili Bloglet mini program#

React

Xiaoxili Bloglet mini program, Based on Taro 3.3+ and developed using HTML tags.

@shenghanqin 【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Mortgage Calculator#

React

The First Taro 3 Multi-Ended Unified Instance - Support React Native,Weapp,H5。

58 Tongcheng team produces.【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️

《Rick and Morty》Wiki#

React

A multi-end unified project based on Taro 3.2+. Here you can view almost all the characters that appear in Rick and Morty, plus mini-games just for the hardcore fans.

Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️

South Song Culture e-ticket sales mini program#

React

E-ticket (attractions, restaurants, nightclubs) sales mini program based on Taro 3.0.27, using React + React Hooks + TypeScript + React-Redux.

@sskcal produce. 【Material Details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Daily workload of WeChat mini program#

Vue

Record daily workload, count daily payroll, monthly payroll.

@whyour. 【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️✔️

niceup#

React

This is a group buying WeChat mini program specially developed for self-publishers.

@nasawz 【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

taro-mall#

React

Taro_Mall is a multi-end open source online mall application, the backend is based on litemall, the front end is written using the Taro framework, now all completed mini programs and H5 mobile, the subsequent will be adapted to APP, Taobao, headlines, Baidu mini program. taro_Mall has completed all the functions of the front end of litemall.

@jiechud【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Vue3 + TS Rapid development of templates#

Vue3

Rapid development templates based on Taro 3.x & Vue 3 & TypeScript.

@RealCoolSnow 【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

React + Dva + Less Template#

React

This is a template based on Taro 3.x. - DvaJS - Taro - Less - React。

@hocgin【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

elf-taro#

React

Taro 小程序 脚手架 (Taro 3 + Dva + Typescript + Immer) - 内置 Redux 计数器, 异步数据请求 与 腾讯小程序地图 demo。

@didilinkin【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

taro-kit#

React

Taro mini program Scaffolding (Taro 3 + Dva + Typescript + Immer) - Built-in Redux counter, asynchronous data request and Tencent mini program map demo.

@wsdo【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Style Library#

NutUI#

Vue3

Vue component library for multi-platform development

@jdf2e【Official Website】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️

taro-ui-vue#

Vue

Vue implementation of Taro UI.

@psaren【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️

taro-ui-vue3#

Vue3

Taro UI component library rewritten in Vue 3.0.

@b2nil【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

Taroify#

React

Taroify is the Taro version of the mobile component library Vant. Both are based on the same visual specification and provide a consistent API interface to help developers quickly build mini program.

@tangzhi【Material details】【Gitee

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

taro-color-ui#

React

This project encapsulates some common components based on ColorUI, so there is no need to download the ColorUI demo to see the classname of various implementations and reduce a series of tedious work such as manually rewriting the wxml writing format in the demo to Taro jsx format.

@Gengar-666【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️

Plugin#


Skeleton screen plugin#

Make your Taro3 page more smooth, Taro page initialization setData() need to pass a relatively large data, resulting in the initialization of the page will be a period of white screen time, this plugin can solve this problem.

@allen-hu-666【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️

tailwindcss Plugin#

Taro is connected to the tailwindcss 2.0 plugin.

@pcdotfan【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

Dynamic code loading plugin#

React

Dynamic loading code implementation on the mini program side based on Taro 3.0+, webpack plugins, babel.

@JiyuShao【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Command line creation of components/page plugins#

Taro page/component creation tool, all using functional components + Typescript + Hooks, providing good page hints.

@liuhuapiaoyuan【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️✔️

Compatible with wsl plugins#

Packaged content (rsync) synchronized to Windows file, solve the problem that the packaged mini program file under wsl2 (\\wsl$`) cannot be read directly from the development tool.

@toknT【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️✔️

Component#


Virtual List#

React

The virtual list component based on Taro3 package supports unequal height of list sub-nodes, lower white screen rate than the official one, better performance, easy to use and simple.

Produced by the Ctrip team.【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

Product two-way linkage list#

React

The function is not affected by the layout position and content data, all by the JS dynamic calculation of the product two-way linkage list obtained.

Material details

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

Drop down filter menu#

React

Mall, group buying common drop-down filter menu, support up to 3 levels of submenu, support multi-select / single-select filter.

Material details

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

Sweepstakes Plugin#

React & Vue

🍧🍧🍧 taro-based [carousel / nine-box] sweepstakes plugin, 🎨 prizes / text / images / colors / buttons are configurable, supports synchronous / asynchronous sweepstakes, 🎯 probability front / back end controllable, can be adapted to mobile with rpx.

@LuckDraw【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️

Calendar Heat Map#

React

Based on Taro's calendar heat map, it generates a graph similar to the GitHub Contribution statistics.

@Mayandev【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Curved progress bar#

React

Curved progress bar, single template.

Material details

WeChatAliBaiduByteDanceH5RN
Support✔️

Handwritten Signature#

React

Taro's handwritten signature library.

@yz1311【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Date and time selection component#

React

Based on pickerView, pickerViewColumn from the definition of a selector for the date and time in a component to select the completion . The project uses the Taro framework , you can also implement a time picker similar to the WeChat reminder.

@jarbozhang【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

wPicker#

React

Date, time, multi-level linkage picker。

Material details

WeChatAliBaiduByteDanceH5RN
Support✔️

Time Picker#

React

Time Picker.

Material details

WeChatAliBaiduByteDanceH5RN
Support✔️

Date picker#

Vue

The use of vue development, business needs a selection of date interval components, can only be combined with others to get a manual, part of the function has not been completely tuned, there is time to refine

Material details

WeChatAliBaiduByteDanceH5RN
Support✔️

Multifunctional Form Components#

React

Taro3, React-based multi-functional form component for WeChat mini program side.

@qxtang【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

echarts-taro3-react#

React

WeChat mini program echarts component built on Taro3.x version.

@Cecilxx【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

echarts-taro3-vue#

Vue

Taro3.x-Vue echarts component for WeChat mini program.

@Cecilxx【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

taro3-react-f2#

React

Taro3 Integrated Chart Library f2。

@tomalloc【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️

Tool Library#


taro-iconfont-cli#

Use iconfont icons in the Taro framework, font-independent, with multi-color support.

@fwh1990【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

Long List Solution#

React

Taro framework long list of solutions : integrated drop-down refresh , skeleton screen , infinite scroll , lazy loading of images.

@Rahim-Chan【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️

tarojs-router-next#

Taro mini program routing library / automatic generation of routing methods with parameter type hints / allows passing parameter data of any type and any size / synchronized routing method calls / koa experience consistent routing middleware.

@lblblong【Material details】【Github


vue-taro-router#

Vue

Based on Taro, extended to vue-router experience. Support route interception, event callback, chain call. Method types are: push, replace, goBack, etc.

@kaeryehaowan【Material details】【Github


Easy Taro Router#

React & Vue

Anyone who has used the umi framework will be impressed by its protocol-based routing. Through a series of configurations, you can implement a similar "protocol-based routing" feature in your Taro mini program.

@LuckyHH【Material details】【Github


PreQuest#

A library of mini program requests.

@xdoer【Material details】【Github


taro-storage#

Extend taro's storage, support local storage set expiration date, support clear expired local storage.

@JosnLee【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️

Baidu Voice#

React

Very lightweight voice synthesis interface, generally used for voice broadcast of pushed messages.

Material details

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️✔️

Other#


Form visualization editing#

React

Visual form editor developed with Taro3, supporting H5, mini program (in development), and apps (in development), which can be integrated into your own front-end projects for form building or inherited to the back-end user form editor Online Preview. http://form.t.platelet.xyz/。

@ShaoGongBra【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️✔️

taro-mobx-logger#

React

Get more friendly state debugging for developing WeChat mini program with Taro + Mobx.

@kevin-zeus【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️✔️✔️✔️

@better-mini/logger#

React

Mini program real debugging/preview Logger component, support output log to the screen for viewing, improve debugging efficiency. At present, only WeChat and Alipay are fully tested, other ends may not be supported.

@Fay98de【Material details】【Github

WeChatAliBaiduByteDanceH5RN
Support✔️✔️