社区优质物料
本篇收录了社区在 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。
微信 | 阿里系 | 百度 | 头条 | 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。
微信 | 阿里系 | 百度 | 头条 | 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 | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
样式库
taro-ui-vue
Vue
Taro UI 的 Vue 实现。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ |
taro-ui-vue3
Vue3
采用 Vue 3.0 重写的 Taro UI 组件库。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Taroify
React
Taroify 是移动端组件库 Vant 的 Taro 版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
taro-color-ui
React
本项目基于ColorUI封装了一些常用的组件,无需下载 ColorUI 的 demo 查看各种实现的 classname, 减少手动将 demo 中的 wxml 书写格式改写为 Taro jsx 格式 等一系列烦琐的工作, 可以直接使用 jsx 组件的方式使用,支持按需导入样式。
微信 | 阿里系 | 百度 | 头条 | 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】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
兼容 wsl 插件
打包内容(rsync)同步到 Windows 文件下,解决 wsl2 下(\\wsl$
) 打包出的小程序文件直接从开发工具读会无法读取到的正确内容
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
组件
虚拟列表
React
基于 Taro3 封装的虚拟列表组件,支持列表子节点不等高,白屏率比官方的要低,性能更好,使用方便简单。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
商品双向联动列表
React
功能不受布局位置 和 内容数据的影响,全由JS动态计算获取的商品双向联动列表。
【物料详情】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
下拉式筛选菜单
React
商城,团购常用的下拉式筛选菜单,最多支持 3 级子菜单,支持多选/单选筛选。
【物料详情】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
抽奖插件
React
& Vue
🍧🍧🍧 基于 taro 实现的【大转盘 / 九宫格】抽奖插件,🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置,支持同步 / 异步抽奖,🎯 概率前 / 后端可控,可搭配 rpx 适配移动端。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ |
日历热力图
React
基于 Taro 的日历热力图,生成类似与 GitHub Contribution 统计图。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
弧形进度条
React
弧形进度条,单个模板。
【物料详情】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
手写签名
React
Taro 的手写签名库。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
日期时间选择组件
React
基于 pickerView、pickerViewColumn 来自定义了一个选择器用于日期和时间在用一个组件中选择完成。项目使用 Taro 框架,也可实现类似微信提醒的时间选择器。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
wPicker
React
日期、时间、多级联动 picker。
【物料详情】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
时间选择器
React
时间选择器。
【物料详情】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
日期选择器
Vue
用的vue开发,业务需求一个选择日期区间的组件,只能结合别人的手动弄一个,部分功能还没有完全调完,有空再完善
【物料详情】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
多功能表格组件
React
基于 Taro3、React 的微信小程序端多功能表格组件。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
echarts-taro3-react
React
基于 Taro3.x 版本构建的微信小程序 echarts 组件。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
echarts-taro3-vue
Vue
Taro3.x-Vue 构建的微信小程序 echarts 组件。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
taro3-react-f2
React
Taro3 集成图表库 f2。
微信 | 阿里系 | 百度 | 头条 | 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 的使用体验。支持路由拦截、事件回调、链式调用。方法类型有:psuh、replace、goBack 等。
@kaeryehaowan 出品。【物料详情】【Github】
Easy Taro Router
React
& Vue
使用过 umi 框架的人,一定对它的约定式路由印象深刻。通过一系列配置,可以让你在 Taro 小程序中实现类似“约定式路由”的功能。
PreQuest
一款好用的小程序请求库。
taro-storage
扩展taro 的存储,支持本地存储设置有效期,支持清除过期的本地存储。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ |
百度语音
React
非常轻便的语音合成接口,一般用于对推送过来的消息进行语音播报。
【物料详情】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
其它
表单可视化编辑
React
使用 Taro3 开发的可视化表单编辑器,支持 H5、小程序(开发中)、app(开发中),可以将其集成在自己的前端项目用于表单构建,或者继承到后端用户表单编辑 在线预览:http://form.t.platelet.xyz/。
@ShaoGongBra 出品。【物料详情】【Github】
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
taro-mobx-logger
React
让使用 Taro + Mobx 开发微信小程序获得更友好的状态调试。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
@better-mini/logger
React
小程序真机调试/预览 Logger 组件,支持输出日志到屏幕进行查看,提升调试效率。 目前仅微信和支付宝端经过完整测试,其他端不一定支持。
微信 | 阿里系 | 百度 | 头条 | H5 | RN | |
---|---|---|---|---|---|---|
支持度 | ✔️ | ✔️ |