社区优质物料
本篇收录了社区在 Taro 物料市场 贡献的各种优质物料。
注意:平台支持度没有打 ✔️
的,意思是尚未验证,不代表完全不支持。
如何贡献
欢迎各位开发者为 Taro 社区贡献物料。可以通过以下步骤进行贡献、引流、讨论,共同成长:
模板项目
网易云音乐小程序
React
🎉 基于 Taro + Taro UI + Redux + React Hooks + Typescript 开发的网易云音乐小程序。
@lsqy 出品。【Github】
![](https://storage.360buyimg.com/cjj-pub-images/taro-music.png)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
nice-router-taro
React
nice-router 第 0 适合后端程序员的前端小程序开发框架。
@kala888 出品。【Github】
![](https://storage.360buyimg.com/cjj-pub-images/taro-route.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
小溪里博客小程序
React
小溪里博客小程序。基于 Taro 3.3+,使用 HTML 标签开发。
@shenghanqin 出品。【Github】
![](https://storage.360buyimg.com/cjj-pub-images/taro-xxl-blog1.png)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
房贷计算器
React
首个 Taro 3 多端统一实例 - 支持 React Native,Weapp,H5。
58 同城团队出品。【Github】
![](https://storage.360buyimg.com/cjj-pub-images/taro-fdjsq.png)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ |
《瑞克和莫蒂》Wiki
React
基于 Taro3.2+ 的多端统一项目。在这里可以查看几乎所有在《瑞克和莫蒂》中出现的人物,外加专为铁粉准备的小游戏。
@ 出品。【Github】
![](https://storage.360buyimg.com/cjj-pub-images/taro-mr-wiki.png)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ |
南歌文化电子票销售小程序
React
基于 Taro 3.0.27 的开发的电子票(景点、餐饮、夜店)销售小程序,使用了 React + React Hooks + TypeScript + React-Redux。
![](https://img10.360buyimg.com/img/jfs/t1/166374/28/13744/217757/605447b5Eae1de603/b036e697f1c742e9.jpg!q60.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
微信小程序每日工作量
Vue
记录每日工作量,统计日工资,月工资。
@whyour 出品。【Github】
![](https://storage.360buyimg.com/cjj-pub-images/taro-daily.jpeg)
微信 | 阿里系 | 百度 | 头条 | 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。
微信 | 阿里系 | 百度 | 头条 | 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 组件库
![](https://img13.360buyimg.com/imagetools/jfs/t1/222418/40/22573/338132/63bcc1e5Ff4cbffd2/412f9667b2b57333.png)
微信 | 京东 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ |
taro-ui-vue
Vue
Taro UI 的 Vue 实现。
![](https://img10.360buyimg.com/img/jfs/t1/123869/18/8595/1210587/5f26b3fdE5649bb68/b73745d66b1189c3.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ |
taro-ui-vue3
Vue3
采用 Vue 3.0 重写的 Taro UI 组件库。
![](https://img13.360buyimg.com/img/jfs/t1/144940/30/11635/67759/5f915841Ef43483ca/bccc3b0cde141d93.jpg!q40.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Taroify
React
Taroify 是移动端组件库 Vant 的 Taro 版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
![](https://storage.360buyimg.com/cjj-pub-images/WX20210705-155124.png)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
taro-color-ui
React
本项目基于 ColorUI 封装了一些常用的组件,无需下载 ColorUI 的 demo 查看各种实现的 classname, 减少手动将 demo 中的 wxml 书写格式改写为 Taro jsx 格式 等一系列烦琐的工作, 可以直接使用 jsx 组件的方式使用,支持按需导入样式。
![](https://img14.360buyimg.com/img/jfs/t1/126061/34/15236/86720/5f8958e5E0360ec79/b37731e0f77e8621.jpg!q40.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ |
@antmjs/vantui
React
@antmjs/vantui 是一款基于 vant 开发的 React / Taro-React 多端 UI 组件库。
![](https://img30.360buyimg.com/img/jfs/t1/136536/19/21123/599490/6183a34bE2b06216c/0b9557af04c325d1.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Tard
React
Tard 是一套基于 Taro 框架开发的多端 React UI 组件库。
@jd-antelope 出品。【物料详情】【Github】
![](https://storage.360buyimg.com/hawley-common/tard-home.png)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
插件
编译提速插件
采用多核心和缓存提升 Taro 编译打包速度。详情请阅读文章《编写插件,将 Taro 编译打包耗时缩短至三分之一》。
智行小程序团队出品。【Github】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
骨架屏插件
让你的 Taro3 页面更流畅,Taro page 初始化 setData()
需要传递一个比较大的数据,导致初始化页面时会一段白屏的时间,该插件可以解决这个问题。
@allen-hu-666 出品。【物料详情】【Github】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ |
tailwindcss 插件
Taro 接入 tailwindcss 2.0 插件。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
动态加载代码插件
React
基于 Taro 3.0+、webpack 插件、babel 的小程序端动态加载代码实现。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
命令行创建组件/页面插件
Taro 页面/组件创建工具,全部使用函数式组件 + Typescript + Hooks,提供良好的页面提示。
@liuhuapiaoyuan 出品。【物料详情】【Github】
![](https://img20.360buyimg.com/img/jfs/t1/145078/20/12034/12331/5f92de18Ea95a8e27/2040d1e6caf93698.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
兼容 wsl 插件
打包内容(rsync)同步到 Windows 文件下,解决 wsl2 下(\\wsl$
) 打包出的小程序文件直接从开发工具读会无法读取到的正确内容
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
taro-plugin-pinia 支持使用 Pinia
进行状态管理
Taro & vue3
支持使用 Pinia
进行状态管理的插件
![](https://img10.360buyimg.com/img/jfs/t1/211360/8/10989/54059/61a58addE90daf2a4/9b4fe1f143c7cc5d.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
组件
虚拟列表
React
基于 Taro3 封装的虚拟列表组件,支持列表子节点不等高,白屏率比官方的要低,性能更好,使用方便简单。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
商品双向联动列表
React
功能不受布局位置 和 内容数据的影响,全由 JS 动态计算获取的商品双向联动列表。
【物料详情】
![](https://img30.360buyimg.com/img/jfs/t1/123538/9/4451/56208/5edf003cE8709569c/6327fc64db8e24fa.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
下拉式筛选菜单
React
商城,团购常用的下拉式筛选菜单,最多支持 3 级子菜单,支持多选/单选筛选。
【物料详情】
![](https://img30.360buyimg.com/img/jfs/t1/142021/38/694/16559/5ee72c66E8efb82b6/f8ee1db04bb869aa.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
抽奖插件
React
& Vue
🍧🍧🍧 基于 taro 实现的【大转盘 / 九宫格】抽奖插件,🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置,支持同步 / 异步抽奖,🎯 概率前 / 后端可控,可搭配 rpx 适配移动端。
![](https://img10.360buyimg.com/img/jfs/t1/152098/39/17466/324186/601a62a6E8a7c429a/b055b66c95758fe7.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ |
日历热力图
React
基于 Taro 的日历热力图,生成类似与 GitHub Contribution 统计图。
![](https://img30.360buyimg.com/img/jfs/t1/167304/35/14985/239420/60603f17Eca5e7f5c/915f2637f3a8a0ec.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
弧形进度条
React
弧形进度条,单个模板。
【物料详情】
![](https://img14.360buyimg.com/img/jfs/t1/151168/39/4150/7087/5f939fc3Eeda6e224/6734c149acf78c2f.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
手写签名
React
Taro 的手写签名库。
![](https://tva1.sinaimg.cn/large/0081Kckwgy1gliuxzjhmsg309s0hsn1i.gif)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
日期时间选择组件
React
基于 pickerView、pickerViewColumn 来自定义了一个选择器用于日期和时间在用一个组件中选择完成。项目使用 Taro 框架,也可实现类似微信提醒的时间选择器。
![](https://img13.360buyimg.com/img/jfs/t1/116828/25/455/254392/5e8c9404E081319bd/72546c4cacea19fa.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
wPicker
React
日期、时间、多级联动 picker。
【物料详情】
![](https://img12.360buyimg.com/img/jfs/t1/111423/13/9031/83329/5ed6424dEadac5873/a54ebe3b7570f641.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
时间选择器
React
时间选择器。
【物料详情】
![](https://img12.360buyimg.com/img/jfs/t1/135857/38/14396/8002/5f9fce69E39ad90dd/96f817ce5f855753.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
日期选择器
Vue
用的 vue 开发,业务需求一个选择日期区间的组件,只能结合别人的手动弄一个,部分功能还没有完全调完,有空再完善
【物料详情】
![](https://img13.360buyimg.com/img/jfs/t1/126764/20/19090/120002/60b599d8E78c64c0e/017240219a0d8ce5.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
多功能表格组件
React
基于 Taro3、React 的微信小程序端多功能表格组件。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
echarts-taro3-react
React
基于 Taro3.x 版本构建的微信小程序 echarts 组件。
![](https://img30.360buyimg.com/img/jfs/t1/146007/14/8952/85344/5f648e15E683990ec/78834506eafe001b.jpg!q40.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
echarts-taro3-vue
Vue
Taro3.x-Vue 构建的微信小程序 echarts 组件。
![](https://img10.360buyimg.com/img/jfs/t1/130406/33/10494/85344/5f689fcfEa5f4b9c0/89359159e220a2e1.jpg!q40.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
taro3-react-f2
React
Taro3 集成图表库 f2。
![](https://img10.360buyimg.com/img/jfs/t1/179128/4/3810/53712/609cc4feEbce2eee9/c62ef4ccad69912f.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ |
taro-vchart
React
Taro3 集成图表库 @visactor/vchart。
@visactor 出品。【物料详情】【Github】【使用教程】
![](https://img14.360buyimg.com/img/jfs/t1/182617/24/40933/352731/6540cadfF80121018/7a7dce74e748da36.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ |
工具库
taro-iconfont-cli
在 Taro 框架中使用 iconfont 图标,不依赖字体,支持多色彩。
@fwh1990 出品。【Github】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
长列表方案
React
Taro 框架长列表方案 :集成下拉刷新、骨架屏、无限滚动、图片懒加载。
@Rahim-Chan 出品。【Github】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ |
tarojs-router-next
Taro 小程序路由库/自动生成带参数类型提示的路由方法/允许传递任意类型、任意大小的参数数据/同步的路由方法调用/koa 体验一致的路由中间件。
vue-taro-router
Vue
基于 Taro,扩展成 vue-router 的使用体验。支持路由拦截、事件回调、链式调用。方法类型有:push、replace、goBack 等。
@kaeryehaowan 出品。【物料详情】【Github】
Easy Taro Router
React
& Vue
使用过 umi 框架的人,一定对它的约定式路由印象深刻。通过一系列配置,可以让你在 Taro 小程序中实现类似“约定式路由”的功能。
PreQuest
一款好用的小程序请求库。
taro-storage
扩展 taro 的存储,支持本地存储设置有效期,支持清除过期的本地存储。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
百度语音
React
非常轻便的语音合成接口,一般用于对推送过来的消息进行语音播报。
【物料详情】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
taro-hooks
React
为 Taro 而设计的 Hooks Library。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ |
其它
表单可视化编辑
React
使用 Taro3 开发的可视化表单编辑器,支持 H5、小程序(开发中)、app(开发中),可以将其集成在自己的前端项目用于表单构建,或者继承到后端用户表单编辑 在线预览:https://form.t.platelet.xyz/。
@ShaoGongBra 出品。【物料详情】【Github】
![](https://img10.360buyimg.com/img/jfs/t1/144964/5/19729/164594/5fe2f583E1d09bd60/7e846811c2b77331.jpg!q60.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
taro-mobx-logger
React
让使用 Taro + Mobx 开发微信小程序获得更友好的状态调试。
![](https://img20.360buyimg.com/img/jfs/t1/117239/7/11405/50008/5efdae20Ee4023f86/c6e6c8647fda67ef.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
@better-mini/logger
React
小程序真机调试/预览 Logger 组件,支持输出日志到屏幕进行查看,提升调试效率。 目前仅微信和支付宝端经过完整测试,其他端不一定支持。
![](https://img10.360buyimg.com/img/jfs/t1/194492/34/753/264079/608cf553E5c1befa6/4e9de97729894fb3.png.webp)
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ |