search

NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.55k stars 753 forks source link

优秀案例征集 #41

Open koppthe opened 6 years ago

koppthe commented 6 years ago

大家好，

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

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

ly525 commented 6 years ago

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

小程序：学区房app

qr-code

简单介绍

  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 commented 5 years ago

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

hugetiny commented 5 years ago

quit-smoking的诞生

neoscript99 commented 5 years ago

个税专项附加扣除计算器

专项附加扣除包括：

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

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

image

giscafer commented 5 years ago

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

feweekly

uloveits commented 5 years ago

一些工具

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

Rychou commented 5 years ago

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

flymzero commented 5 years ago

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

Rychou commented 5 years ago

在书云

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

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

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

image

giantss commented 5 years ago

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

kennylbj commented 5 years ago

距离多远

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

功能

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

screenshot

image image image

小程序码

image

web网站

https://distance.kennylbj.com/

zmyjs commented 5 years ago

房租计算器

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

code

预览

首页 设置

特点

自定义计算项目

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

计算项

计算项 (2)

自定义账单

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

模板

云备份数据

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

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

lsqy commented 5 years ago
DreamPWJ commented 5 years ago

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

Ph03n1xRt commented 5 years ago

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

moremind commented 4 years ago

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

xmy1231 commented 4 years ago

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

goldhan commented 3 years ago

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

链滴微信小程序

img

版本

介绍

黑科派，链滴小程序

imgimgimgimgimgimgimgimgimgimgimgimg

技术栈

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 commented 3 years ago

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

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

qisi007 commented 3 years ago

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

体验人间百态

技术栈： typescript + taro

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

一天一句毒鸡汤

jiuhengma commented 4 months ago

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

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

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

直接扫码： gh_3d1f847a0b26_258 (1)

hooliy commented 4 months ago

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

gh_c6453813e5c4_258