Version: 3.x

社区优质物料

本篇收录了社区在 Taro 物料市场贡献的各种优质物料。

注意：平台支持度没有打 ✔️ 的，意思是尚未验证，不代表完全不支持。

如何贡献#

欢迎各位开发者为 Taro 社区贡献物料。可以通过以下步骤进行贡献、引流、讨论，共同成长：

提交物料到 Taro 物料市场，并提供完善的文档。
修改本文档，为物料添加说明。
在 Taro 讨论组添加一条讨论，与开发者进行沟通。

模板项目#

网易云音乐小程序#

React

🎉基于 Taro + Taro UI + Redux + React Hooks + Typescript 开发的网易云音乐小程序。

@lsqy 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

nice-router-taro#

React

nice-router 第0适合后端程序员的前端小程序开发框架。

@kala888 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

小溪里博客小程序#

React

小溪里博客小程序。基于 Taro 3.3+，使用 HTML 标签开发。

@shenghanqin 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

房贷计算器#

React

首个 Taro 3 多端统一实例 - 支持 React Native，Weapp，H5。

58 同城团队出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️				✔️	✔️

《瑞克和莫蒂》Wiki#

React

基于 Taro3.2+ 的多端统一项目。在这里可以查看几乎所有在《瑞克和莫蒂》中出现的人物，外加专为铁粉准备的小游戏。

@ 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️				✔️	✔️

南歌文化电子票销售小程序#

React

基于 Taro 3.0.27 的开发的电子票（景点、餐饮、夜店）销售小程序，使用了 React + React Hooks + TypeScript + React-Redux。

@sskcal 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

微信小程序每日工作量#

Vue

记录每日工作量，统计日工资，月工资。

@whyour 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️	✔️

niceup#

React

这是一款针对自媒体从业者专门开发的微信团购小程序。

@nasawz 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

taro-mall#

React

Taro_Mall 是一款多端开源在线商城应用程序，后台是基于 litemall 基础上进行开发，前端采用 Taro 框架编写，现已全部完成小程序和 H5 移动端，后续会对APP，淘宝，头条，百度小程序进行适配。Taro_Mall 已经完成了 litemall 前端的所有功能。

@jiechud 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

Vue3 + TS 快速开发模板#

Vue3

基于 Taro 3.x & Vue 3 & TypeScript 的快速开发模板。

@RealCoolSnow 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

React + Dva + Less 模板#

React

这是一份基于 Taro 3.x 的模版。 - DvaJS - Taro - Less - React。

@hocgin 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

elf-taro#

React

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

@didilinkin 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

taro-kit#

React

Taro 小程序脚手架。特性：封装api、redux优雅集成、生成海报类，异常日志上报。

@wsdo 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

样式库#

NutUI#

Vue3

支持多端开发的 Vue 组件库

@jdf2e 出品。【官网】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️				✔️

taro-ui-vue#

Vue

Taro UI 的 Vue 实现。

@psaren 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️				✔️

taro-ui-vue3#

Vue3

采用 Vue 3.0 重写的 Taro UI 组件库。

@b2nil 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

Taroify#

React

Taroify 是移动端组件库 Vant 的 Taro 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

@tangzhi 出品。【物料详情】【Gitee】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

taro-color-ui#

React

本项目基于ColorUI封装了一些常用的组件，无需下载 ColorUI 的 demo 查看各种实现的 classname，减少手动将 demo 中的 wxml 书写格式改写为 Taro jsx 格式等一系列烦琐的工作，可以直接使用 jsx 组件的方式使用，支持按需导入样式。

@Gengar-666 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️

@antmjs/vantui#

React

@antmjs/vantui 是一款基于vant开发的React / Taro-React 多端UI组件库。

@antmjs 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

插件#

编译提速插件#

采用多核心和缓存提升 Taro 编译打包速度。详情请阅读文章《编写插件，将 Taro 编译打包耗时缩短至三分之一》。

智行小程序团队出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

骨架屏插件#

让你的 Taro3 页面更流畅，Taro page 初始化 setData() 需要传递一个比较大的数据，导致初始化页面时会一段白屏的时间，该插件可以解决这个问题。

@allen-hu-666 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️

tailwindcss 插件#

Taro 接入 tailwindcss 2.0 插件。

@pcdotfan 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

动态加载代码插件#

React

基于 Taro 3.0+、webpack 插件、babel 的小程序端动态加载代码实现。

@JiyuShao 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

命令行创建组件/页面插件#

Taro 页面/组件创建工具，全部使用函数式组件 + Typescript + Hooks，提供良好的页面提示。

@liuhuapiaoyuan 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️	✔️

兼容 wsl 插件#

打包内容(rsync)同步到 Windows 文件下,解决 wsl2 下(\\wsl$) 打包出的小程序文件直接从开发工具读会无法读取到的正确内容

@toknT 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️	✔️

组件#

虚拟列表#

React

基于 Taro3 封装的虚拟列表组件，支持列表子节点不等高，白屏率比官方的要低，性能更好，使用方便简单。

携程团队出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

商品双向联动列表#

React

功能不受布局位置和内容数据的影响，全由JS动态计算获取的商品双向联动列表。

【物料详情】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

下拉式筛选菜单#

React

商城，团购常用的下拉式筛选菜单，最多支持 3 级子菜单，支持多选/单选筛选。

【物料详情】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

抽奖插件#

React & Vue

🍧🍧🍧 基于 taro 实现的【大转盘 / 九宫格】抽奖插件，🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置，支持同步 / 异步抽奖，🎯 概率前 / 后端可控，可搭配 rpx 适配移动端。

@LuckDraw 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️				✔️

日历热力图#

React

基于 Taro 的日历热力图，生成类似与 GitHub Contribution 统计图。

@Mayandev 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

弧形进度条#

React

弧形进度条，单个模板。

【物料详情】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

手写签名#

React

Taro 的手写签名库。

@yz1311 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

日期时间选择组件#

React

基于 pickerView、pickerViewColumn 来自定义了一个选择器用于日期和时间在用一个组件中选择完成。项目使用 Taro 框架，也可实现类似微信提醒的时间选择器。

@jarbozhang 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

wPicker#

React

日期、时间、多级联动 picker。

【物料详情】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

时间选择器#

React

时间选择器。

【物料详情】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

日期选择器#

Vue

用的vue开发，业务需求一个选择日期区间的组件，只能结合别人的手动弄一个，部分功能还没有完全调完，有空再完善

【物料详情】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

多功能表格组件#

React

基于 Taro3、React 的微信小程序端多功能表格组件。

@qxtang 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

echarts-taro3-react#

React

基于 Taro3.x 版本构建的微信小程序 echarts 组件。

@Cecilxx 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

echarts-taro3-vue#

Vue

Taro3.x-Vue 构建的微信小程序 echarts 组件。

@Cecilxx 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

taro3-react-f2#

React

Taro3 集成图表库 f2。

@tomalloc 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️

工具库#

taro-iconfont-cli#

在 Taro 框架中使用 iconfont 图标，不依赖字体，支持多色彩。

@fwh1990 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

长列表方案#

React

Taro框架长列表方案：集成下拉刷新、骨架屏、无限滚动、图片懒加载。

@Rahim-Chan 出品。【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️				✔️

tarojs-router-next#

Taro 小程序路由库/自动生成带参数类型提示的路由方法/允许传递任意类型、任意大小的参数数据/同步的路由方法调用/koa 体验一致的路由中间件。

@lblblong 出品。【物料详情】【Github】

vue-taro-router#

Vue

基于 Taro，扩展成 vue-router 的使用体验。支持路由拦截、事件回调、链式调用。方法类型有：psuh、replace、goBack 等。

@kaeryehaowan 出品。【物料详情】【Github】

Easy Taro Router#

React & Vue

使用过 umi 框架的人，一定对它的约定式路由印象深刻。通过一系列配置，可以让你在 Taro 小程序中实现类似“约定式路由”的功能。

@LuckyHH 出品。【物料详情】【Github】

PreQuest#

一款好用的小程序请求库。

@xdoer 出品。【物料详情】【Github】

taro-storage#

扩展taro 的存储，支持本地存储设置有效期，支持清除过期的本地存储。

@JosnLee 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️

百度语音#

React

非常轻便的语音合成接口，一般用于对推送过来的消息进行语音播报。

【物料详情】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️	✔️

taro-hooks#

React

为Taro而设计的Hooks Library。

@innocces 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️				✔️	✔️

其它#

表单可视化编辑#

React

使用 Taro3 开发的可视化表单编辑器，支持 H5、小程序（开发中）、app（开发中），可以将其集成在自己的前端项目用于表单构建，或者继承到后端用户表单编辑在线预览：https://form.t.platelet.xyz/。

@ShaoGongBra 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️	✔️

taro-mobx-logger#

React

让使用 Taro + Mobx 开发微信小程序获得更友好的状态调试。

@kevin-zeus 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️	✔️	✔️	✔️

@better-mini/logger#

React

小程序真机调试/预览 Logger 组件，支持输出日志到屏幕进行查看，提升调试效率。目前仅微信和支付宝端经过完整测试，其他端不一定支持。

@Fay98de 出品。【物料详情】【Github】

	微信	阿里系	百度	头条	H5	RN
支持度	✔️	✔️