内容简介:转眼间,Taro UI 发布已有半年,感谢大家的支持,让我们收获了在 1.0 版本发布之后,我们又陆续新增了如下十一个组件:其中,在社区里呼声最高的组件,非日历组件莫属。由于日历组件复杂度偏高,要适配多端环境难度偏大,纵观市面上的小程序 UI 组件库,包含日历组件的寥寥无几。尽管如此,我们团队的大鱼兄仍独自挑起重担,几乎完美地实现了该组件,此处掌声献给大鱼兄。
转眼间,Taro UI 发布已有半年,感谢大家的支持,让我们收获了 GitHub 1400+ star。在此期间,我们不断完善组件库的功能和特性,新增了许多组件和小工具,包括但不限于:
- 新增日历、索引选择、区域选择、图片选择等十一个组件
- 适配支付宝小程序、百度小程序
- 新增自定义主题功能
- 新增主题生成器,以帮助开发者更好地使用自定义主题功能
- 新增 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/dist/style/variables/default.scss 文件 */ $color-brand: #6190E8; /* 引入 Taro UI 默认样式 */ @import "~taro-ui/dist/style/index.scss"; 复制代码
之后在项目的入口文件中引入以上的样式文件即可(无需重复引入组件的默认样式)。
目前,我们额外定制了京东主题和 7Fresh 主题色,可通过扫描以下二维码查看。
京东主题:
7Fresh 主题:
新增主题生成器
为了让开发者更好地使用自定义主题功能,我们还新增了主题生成器。开发者可以使用该 工具 方便地定制 UI 主题。
主题生成器地址: nervjs.github.io/taro-ui-the…
效果预览:
新增 Issue Helper
虽然我们配置了 Issue Template,但仍有部分开发者没有根据规范填写 Issue。我们排查问题时经常需要再次询问版本号信息、复现代码等等,这不仅消耗我们维护项目的精力,还降低了 Issue 处理效率。因此我们参考了 Ant 和 iView 团队的做法,制作了 Issue Helper 页面,帮助开发者更规范地填写 Issue。
Taro UI Issue Helper 地址: nervjs.github.io/taro-ui-iss…
此外,我们发现重复制作 Issue Helper 页面是一件很浪费劳动力的事情,于是将 Issue Helper 封装成一个命令行工具,开发者可以通过简单配置 config.js
,执行命令 issue-helper build
就可以生成所需要的页面。
Issue Helper 工具仓库地址: github.com/jimczj/issu…
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 臭皮匠零编程软件快速开发平台 2.4,新增数据库适配
- QuickDAO 4.1.6 版本发布,新增 mariaDB 支持和完善适配 SQL Server
- Jboot v1.2.3 新增 J2Cache 适配及限流功能
- Jboot v1.2.3 新增 J2Cache 适配及限流功能
- flutter 屏幕尺寸适配 字体大小适配
- 前端适配:移动端/web端适配方案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。