Taro UI 2.0 发布:新增自定义主题功能,适配更多小程序

懂点代码的大叔 2019-03-01 16:51:52 ⋅ 131 阅读

前 言


转眼间,Taro UI 发布已有半年,在此期间,不断完善组件库的功能和特性,新增了许多组件和小工具,包括但不限于:

  • 新增日历、索引选择、区域选择、图片选择等十一个组件

  • 适配多种小程序,如百度小程序

  • 新增自定义主题功能

  • 新增主题生成器,以帮助开发者更好地使用自定义主题功能

  • 新增 Issue Helper,以帮助开发者更规范地填写 Issue



新增组件


在 1.0 版本发布之后,又陆续新增了如下十一个组件:

  • 视图组件:页面提示、 分隔符、倒计时、 幕帘 、步骤条

  • 操作反馈:全局信息组件

  • 表单:图片选择器、区域选择器、索引选择器、日历组件、搜索栏


其中,在社区里呼声最高的组件,非日历组件所属。由于日历组件复杂度偏高,要适配多端环境难度偏大,纵观市面上的小程序 UI 组件库,包含日历组件的寥寥无几。


适配多种小程序,如百度小程序


在 1.0 版本适配微信小程序时,遇到了很多困难。比如:

  • 微信小程序自定义组件使用 Shadow DOM 进行渲染,引起了以下几种问题:

    • 组件之间无法使用相邻选择器,如组件间加 border 的需求,最终只能通过新增 props 给开发者自行控制

    • 无法自定义 flex 布局组件,最终只能提供样式给开发者自行使用


  • Component 组件对应 wxss 文件的样式,只对组件 wxml 内的节点生效。经过不断探索,才发现 addGlobalClass 这一属性,需在自定义组件内激活 addGlobalClass 选项,才能使自定义组件被 app.wxss 或页面的 wxss 中的所有的样式定义影响。



  • 原生组件的使用限制。由于原生组件脱离在 WebView 渲染流程外,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。由此导致模态框等组件无法遮挡 input、textarea等原生组件,造成穿透效果。 可喜的是,微信官方团队已经在改善该问题,对小程序原生组件引入了同层渲染模式。通过同层渲染,小程序原生组件可与其他内置组件处于相同层级,不再有特殊的使用限制。

  • 小程序不支持 requestAnimationFrame,无法很好地实现 js 动画。

克服完上述微信小程序的困难后,小程序的适配工作大多是解决样式和某些API的差异。得益于 Taro 良好的支持,Taro UI 的适配工作暂时告一段落。



新增自定义主题功能


Taro UI 1.0 发布时只有一套默认的主题配色,为满足业务和品牌上多样化的视觉需求,UI 库支持一定程度的样式定制。


Taro UI 的组件样式是使用 SCSS 编写的,如果你的项目中也使用了 SCSS,那么可以直接在项目中改变 Taro UI 的样式变量。


新建一个主题样式文件(例如 custom-variables.scss)并覆盖默认主题变量:



之后在项目的入口文件中引入以上的样式文件即可(无需重复引入组件的默认样式)。


目前,Taro UI 2.0 还额外定制了京东主题和 7Fresh 主题色,可通过扫描以下二维码查看。

      

京东主题:



7Fresh 主题:



新增主题生成器


为了让开发者更好地使用自定义主题功能,同时新增主题生成器。开发者可以使用该工具方便地定制 UI 主题。


主题生成器地址: 

https://nervjs.github.io/taro-ui-theme-preview/


效果预览:



新增 Issue Helper


虽然已经配置了 Issue Template,但仍有部分开发者没有根据规范填写 Issue。排查问题时经常需要再次询问版本号信息、复现代码等等,这不仅会消耗维护项目的精力,还降低了 Issue 处理效率。因此在参考了 Ant 和 iView 团队的做法之后,制作了 Issue Helper 页面,帮助开发者更规范地填写 Issue。


Taro UI Issue Helper 地址: 

https://nervjs.github.io/taro-ui-issue-helper/


此外,深知重复制作 Issue Helper 页面也是一件很浪费劳动力的事情。于是将 Issue Helper 封装成一个命令行工具,开发者可以通过简单配置 config.js,执行命令 issue-helper build 就可以生成所需要的页面。


Issue Helper 工具仓库地址: 

https://github.com/jimczj/issue-helper


未来计划

  • 适配字节跳动小程序

  • 国际化 i18n



后记


感谢大家对 Taro UI 的使用与反馈,他们致力于将 Taro UI 打造成高质量组件库,不断丰富组件功能与特性,紧跟 Taro 的步伐适配更多平台。


最后,欢迎关注并使用他们的组件库:

https://github.com/NervJS/taro-ui


原文:凹凸实验室

原文链接:https://aotu.io/notes/2019/02/25/taro-ui-2.0/



全部评论: 0

    我有话说:

    Taro 3.0.17 发布,BAT 程序、H5 与 RN 端统一框架

    Taro 3.0.17 发布了。Taro 是一套遵循 React 语法规范的端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信程序/百度智能程序/支付宝程序、H5 与

    Taro 3.0.22 发布,BAT 程序、H5 与 RN 端统一框架

    Taro 3.0.22 发布了。Taro 是一套遵循 React 语法规范的端统一开发框架,支持用 React 的方式编写一次代码,生成能运行在微信程序/百度智能程序/支付宝程序、H5 与

    A3Mall v1.5.2 发布,免费开源的 PHP 程序商城系统

    项目介绍 A3Mall商城系统是基于ThinkPhp6.0+Vue开发的一套移动电商系统, 支持微信公众号商城、H5商城、程序商城,支持多种营销活动,优惠劵、订单活动、团购、秒杀、会员特价、积分

    精品推荐:微信程序常见的UI框架/组件库

    想要开发出一套高质量的程序,运用框架,组件库是省时省力省心必不可少一部分,随着程序日渐火爆,各种不同类型

    「开源资讯」BookChat v2.4 发布,通用书籍阅读微信程序

    BookChat - 面向程序员的开源书籍和文档阅读学习程序

    微信程序微商城(一):https框架搭建并实现导航功能

    本文将带领大家搭建https的程序框架,并实现动态获取数据展示效果!

    Element Plus 发布 Beta 版本, Vue 3.0 的 Element

    Element 开发团队宣布推出 Element Plus 首个 Beta 版本,官方表示 Element Plus 是 Element 对 Vue 3.0 的升级。 地址:https

    微信程序电商实战-入门篇

    程序开发工具有新版本更新啦!开发体验好了,接下来一起为电商程序做一下准备前期准备工作~~

    Taro 1.2.9 发布,BAT 程序、H5 与 RN 端统一框架

    一套 React 语法规范的端开发解决方案 Taro

    微信程序-template使用:实现购物车商品数量加减功能

    上一篇我们实现了购物车功能,里面有用到template模板功能来实现购物车商品数量加减和价格计算功能......

    极速后台框架 FastAdmin v1.2.0.20210125 新增插件 API 文档生成

    FastAdmin 更新日志 v1.2.0.20210125_beta 新增定义插件API文档生成 新增登录和鉴权状态显示 新增定义测试提交参数 优化安装脚本 优化cookie加密 修复系统

    微信程序实战篇:程序之页面数据传递

    我们在写程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    「轻阅读」移动端必须掌握的基本概念和方案

    随着技术的发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素的差异,移动端开发面临着分辨率的问题。

    微信程序实现商品数量加减

    这是一个用微信程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    Beeorder 3.6.0 发布,餐饮点餐程序

    项目简介 beeorder是餐饮点餐商城微信程序,针对餐饮行业推出的一套完整的餐饮解决方案,实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能,完美的使餐饮行业高效便捷! 新增:1. 增加

    微信程序 - iconfont 图标字体

    你还在使用图片作为程序的图标?大猪告诉大家如何在程序上使用iconfont字体图标

    微信程序电商实战-首页(上)

    上一篇:微信程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始微信程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    微信程序抖音实战-首页(下)

    抖音程序首页动态数据获取