优秀案例征集

[koppthe]

大家好，

Taro 作为开源项目已经有一段时间了，在开源期间我们积极响应各路开发者的疑问与反馈，持续不断打磨 Taro ，希望 Taro 能更加完善，帮助更多开发者提升开发效率，改善开发体验。但在庞大的开发工作量下我们深感自身能力的不足，不能很好地为大家提供 Demo、案例供大家学习，同时也没有足够的精力去适配开发一些第三方库来让开发工作更加美好。这时候我们深刻觉得社区力量的重要性，所以我们开启这一篇 isuue，强烈希望各路大佬们能一起贡献优秀的 Demo 与案例，开发第三方库的适配，从而让 Taro 更加健壮，更加好用。(by Taro 之父）

Taro UI 是为 Taro 量身定制的一套多端 UI 组件库，目前离成熟的组件库还有一些距离，我们会不断地迭代新版本，例如完善基础组件库、增加业务组件等。社区的活力是我们持续迭代的动力❤️

[ly525]

By 吃 taro-ui 螃蟹的一枚开发者，从隔壁 Taro 过来的

小程序：学区房app

简单介绍

1. 一款学区房查询应用
2. 根据 小区 查询 对应的小学、中学、幼儿园。
3. 根据 学校 查询 对应的小区。
4. 支持全国大部分的城市：北上广、南京、重庆、深圳、青岛、济南等等等，我们已经收录了 60+的城市，并且在持续的更新，都在这里。
5. 欢迎使用，给我们反馈，我们在持续优化与改进。

使用方法

1. 使用微信扫描页面上方二维码进入学区房app小程序
2. 在微信中搜索“学区房app”即可进入小程序

开发经历

1. 之前是 vue 开发者，在 京东的 凹凸实验室看到taro，因为实验室出品的质量比较高。正好自己也有做一个学区查询app 的想法，便做了尝试。
2. 整体的开发流程还会比较顺畅，也会遇到一些问题，都得到了开发大佬们的支持和回复，很及时，非常感谢
3. 在 app 0.0.6 版本之前，是自己写的组件和 ui，之后看到taro-ui 发了beta版本(现在是正式版了，可以放心使用了)，又尝了鲜。很不错，点赞。
4. 后续打算把一些重复代码做一些重构。收集反馈意见并持续改进。足够稳定以后，考虑开源，回报社区
5. 我的邮箱是 lantern.done@gmail.com 欢迎大家和我交流
6. 在近期会整理一篇文章，记录一下 Taro 与 Taro-UI 开发小程序踩坑之旅，未完待续😂

感谢

1. 非常感谢taro、nervjs、taro-ui 的各位开发者们提供的框架，让自己减少了很多的工作量
2. 非常感谢大佬们在自己遇到问题时候的及时回复和解答，雪中送碳。
3. 祝 Taro 和 Taro-UI 以及凹凸实验室发展顺利，能够出更多高质量的产品
4. 最后再次表示感谢，各位辛苦了。

[hugetiny]

quit-smoking
个人开发的基于taro + taro ui + dva的一个简单的公益项目
https://github.com/hugetiny/quit-smoking

[hugetiny]

quit-smoking的诞生

[neoscript99]

个税专项附加扣除计算器

专项附加扣除包括：

1. 子女教育
2. 继续教育
3. 大病医疗
4. 住房贷款利息
5. 住房租金
6. 赡养老人
   

[nslogx]

Gitter：GitHub小程序客户端
开源地址：https://github.com/huangjianke/Gitter

[giscafer]

前端小助手 ：早报、周刊、精选文章，前端er 来吧！！！

[uloveits]

一些工具

基于taro框架写的微信小程序，包括‘大转盘’，‘答案之书’，‘砸金蛋’，‘贺卡’能工具内容

[Rychou]

备案查询助手——网站ICP备案查询

[flymzero]

程序名：启东实时公交 （微信小程序）

[Rychou]

在书云

目前1.0版本，提供个人书架管理功能。欢迎扫码体验，给我们提供建议。

一款线上书架管理工具，只需要扫一扫书籍背后的条形码，即可添加书籍到你的个人书库。帮你拜托家中书籍过多，难以管理的困扰。

后续会将每个用户的书架联合起来，根据推荐算法，给你推荐与你有相同喜好的书籍或者书库。

[giantss]

@ly525 你们只做了小程序吗？ H5版本有没有

[kennylbj]

距离多远

一款能够显示好友之间距离的小程序

功能

1. 显示单聊好友距离
2. 显示群聊好友距离排行
3. 距离历史记录
4. 展示如何显示群聊头像
5. 展示如何在分享无法返回结果时处理分享功能

screenshot

小程序码

web网站

https://distance.kennylbj.com/

[zmyjs]

房租计算器

本来是为我妈开发的微信小程序哈哈哈，但是意外有其他用户使用并反映意见，把它扩展成通用的房租计算器，根据自定义的计算项目，自定义的账单模板，生成包含计算结果的账单。

预览

特点

自定义计算项目

自定义计算项的名字、变量、计算公式。
由于涉及解释数学公式，小程序不支持eval和new Function。自己实现了一个数学表达式解释器。

自定义账单

根据插值模板，配合计算出的数据生成账单。
插值模板采用jsx风格：

云备份数据

使用了云开发中的云数据库和云函数。

弄好不久，很是得意来宣传下O(∩_∩)O

[lsqy]

• 基于taro +taro-ui + redux + typescript 开发的音乐播放器小程序 : https://github.com/lsqy/taro-music
• 效果图如下

[DreamPWJ]

豆芽名片 基于Taro+TypeScript+Taro UI打造，AI图形识别，i18n国际化适配

[Ph03n1xRt]

这帮大佬得css功力简直不是人,还是自己大菜了,仰望大佬们

[moremind]

taro2.0+dva+wemark的微信小程序markdown文档博客，欢迎体验
Javaer

预览图

[xmy1231]

大佬们，你们的项目开源吗？😄

[goldhan]

我小声BB自推：
已经开源
https://github.com/Programming-With-Love/ld

链滴微信小程序

版本

• 0.0.1
  • 第一次提交
• 0.0.2
  • 支持两部验证登录
  • 增加尾巴定制
  • 优化消息通知获取业务逻辑
  • 修复标签显示问题
  • 增加新主题一套

介绍

黑科派，链滴小程序

技术栈

Taro React Taro-UI Node.js

结构

比较关键位置文件说明，关于微信小程序的文件结构这里不再说明

src
├── app.config.ts
├── app.scss
├── app.tsx
├── assets
│   └── fonts
│       ├── icomoon.ttf
│       └── icon.scss
├── components  // 组件
│   └── parser // html 解析
├── index.html
├── net
│   ├── config.ts
│   └── index.ts
├── pages
│   ├── article
│   ├── comments
│   ├── domain
│   ├── index  // 首页
│   ├── index.tsx
│   ├── me
│   ├── meDetail
│   ├── notifications
│   ├── style.scss
│   ├── tagDetail
│   └── theme.json
├── test.js
└── tools // 工具封装

运行

在 ld246 目录下

1. yarn global add @tarojs/cli
2. yarn install
3. yarn dev:weapp

注意：需要自己去搭建小程序开发环境，有用到云函数。

正式包编译

yarn build:weapp

可以使用 npm 不过本人并没试过，理论上讲没问题

主要功能实现

• 登录/验证码
• 回帖
• 个人信息
• 首页
• 标签详情页
• 帖子详情页
• 评论页
• 领域列表页
• 消息中心/提醒
• 主题，暗色皮肤/皮肤切换/跟随微信自动切换
• 设置页面
• 字体大小切换
• 自动签到

About

第一次尝试用 ts 写的。本人并不是一个专业的 H5 开发，从事 iOS 开发（虽然现在被公司压迫的做 H5 开发），如有迷惑代码行为请多多鞭策😏。

[BinZhiZhu]

微信小程序、百度小程序echarts示例

https://github.com/BinZhiZhu/taro-react-echarts-demo

[qisi007]

微信小程序搜索： 一天一句毒鸡汤

体验人间百态

技术栈： typescript + taro

开源地址： 一天一句毒鸡汤

[jiuhengma]

基于Taro-UI 开发的微信小程序：前端八股通

简介：前端面试八股文，常见的面试题记录，包含HTML，CSS，JavaScript，TypeScript，React，Vue，小程序，Node.js，浏览器，工程化，算法等内容。

访问途径：wx搜索 【前端八股通】

直接扫码：

[hooliy]

全栈开发：
前端: Taro 开发的 用车成本记账 个人小程序！
后端：nestjs + MikroORM + MySql