07月09, 2019

从零开始造移动端组件

显然,从头开始造移动端轮子,特别是React的,是不科学的,也是不实际的。

那么就只能抄了,然后在抄过来的代码里面做修改,虽然有些不厚道,但对于公司来说,我觉得是最快的方式。

下面我说一下抄antd-mobile的一些心得吧。首先就是将代码克隆下来。

其次要将antd-mobile改成你自己想命名的名称,如dpl-mobile,改了之后,所有的demo中引用记得修改掉。

不要批量一次性改,可能会出问题的,因为它有一个npm包,是antd-moible开头的。

改完可以直接运行npm start了。它会启动两个由bisheng生成的doc文档。

为什么是两个?因为有一个是demo演示地址,要被另外一个以iframe的形式嵌套访问的。

通常问题不大。

问题大的有两个:

  • 改了之后,测试用例跑不通了
  • 文档怎么在本地布署

测试用例

通常是重新删除一下每个组件下面的__snapshots__,让jest重新生成即可。

文档布署

命令是:npm run site,它会生成一个_site目录。

在生成后,我用serve起了一个本地的服务,指向_site,然而演示的demo地址却是localhost:8002

翻了一个源码:

alt

这个逻辑有点233,就是判断有没有port,有的话,就走localhost:8002

那么如果非要在本地访问,我就只能自己本地用host搞个域名了。

一开始并不顺利,在子龙、纯等人的帮助下,顺利地搞定了:

server {
    listen 80;
    server_name mobile.dpl.com;

    index index.html index.htm index.php;

    location ~ (.*)/ {
        root /Users/zhangpu/Documents/servyou_code/dpl-react-mobile/_site/;
        index index.html $1.html;
        try_files $uri $uri/ /index.html;
    }

}

mobile.dpl.com是指向127.0.0.1的。

alt

发布npm

直接运行npm publish,是不会成功的,在npm script的钩子里,它给处理掉了。你得npm run pub才行。

它会去生成disteslib目录,以及跑单元测试用例。虽然要等两三分钟,但也值得吧。

样式前缀

它用的是am-,这个不像antd有一个prefix,统一的入口,它写的比较散,得改多处。

结语

感觉antd的代码可以学的东西太多了。后面就可以根据这个代码,结合视觉给的稿子,进行愉快地玩耍了。

本文链接:www.my-fe.pub/post/create-a-mobile-component-from-scratch.html

-- EOF --

Comments

评论加载中...

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