08月04, 2019

记移动端组件的修改

这两个星期基本上在做移动端组件的改造。

以下简单和大家做一些分享。

测试

不知道什么原因,我这边之前是测试全通过了,但是在一个同事的地方就是跑不通测试。

后面在另外一个同事的帮助下,找到了原因:

alt

像我这边把所有的demo里面引用,将antd-mobile改成了dpl-mobile,但是antd-tools里面的处理的是antd-mobile

所以要把那些个文件搞到本地来,将antd改成自己的类库名即可。

菜单点击的问题

alt

我不知道这算不算bug,但对我来说,就是有些不爽。

解决的方案很容易,在mainContent.jsx加一行即可:

alt

按钮组件

vant的对比,显然缺少了:

  • 朴素按钮
  • 方形按钮

另外,我想做个吐槽,按钮的loading图标实在太丑了,相比vant的来说。

于是我就新增了loading组件,按照vant的vue版本实现成react的版本。

中间碰到一个坑是这样的。vant是里面利用undefined来干掉某个css属性,但react不能这样玩,原因如下:

alt

如果是undefined,那么它会取默认值,所以我们可以投机取巧一下,用null来处理:

// 举个例子
// defaultProps:
{ color: red }
// 通过设置null来干掉`color`
{color: null}

svg的一些点

在实际改造的过程中,有些不符合视觉的图标,我都去改了svg

然而有发现一些点,比如说搜索的关闭图标,如果让前端来画svg,可能就是circle+path。(antd-mobile的源码也是这样的)。

但是我用iconfont里面的生成svg,全是path,而是是相对1000*1000的画布来搞的。

这样的结果会多出很多字节,当然byte倒也无所谓,我个人纠结的点在于:不会svg,这样搞真的很被动,如果能和视觉一起搞,自己会svg,就能做出相对更节省流量的svg

less变量

有时候我们需要在tsx的代码里面用到less的变量。

方案很简单:

:export {
  /* stylelint-disable property-no-unknown */
  brand_primary: @brand-primary;
  tab_bar_color: @color-text-tab-bar;
  /* stylelint-enable */
}

注意,:export语法,默认的stylelint会报错,得处理一下。

然后在tsx导入该less即可,像这样的:

import variablesLess from '../style/themes/default.less'

事实证明我太年轻,ts报错了。

CSS Modules for React and Typescript

要解决的话,其实也很容易,改用require即可。

const variablesLess = require("../style/themes/default.less");

tabs组件

vant来说,有两种type:

  • card
  • line

然后视觉也搞了这两种风格,但antd-mobile只有line

最恶心的一点是:RMCTabs组件不支持className,所以最简单粗暴的方式就是在外面套一层div。根据不同的type来重写样式即可。

一些总结

刚好最近同事在重新整理PC版的dpl-react,本来我的思路是将antd拿过来,然后在他上面进行维护。

但后面发现其实在各个目录下面,建一个lib,放antd的源码会更加好一些。理由是:antd的PC版本真的发展地很好,4都快出来了,与其在它上面魔改,还不如基于它去做一些扩展呢,如果真的扩展不了,会考虑给其提issue或者pr

然而antd mobile,真的十分让人失望。它的更新频率和antd真的没法改,所以我的目前在它上面直接修改,无疑是正确的一条路,反正每过半个月,我可以看看它的commit记录,好的可以拿过来,反正它又更新不勤快。

我的好友子龙也准备搞一套vantreact版本,感觉挺赞的,期待中。。。

本文链接:www.my-fe.pub/post/mobile-component-modify-note.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。