瑞幸小程序中提取的开源UI库22组件，有哪些具体功能特点？
- 内容介绍
- 文章标签
- 相关推荐
谁懂啊家人们！最近在厦门找前端工作空档期，我居然养成了个怪习惯——每天点杯瑞幸坐那盯它家小程序看！不是馋咖啡，主要是它家小程序做得也太顺了吧？丝滑到想把界面拆开来看看里面到底藏了啥宝贝。盯久了才发现，原来那些看起来简简单单的按钮卡片里藏着好多贴心到骨子里的设计细节。 客观地说... 干脆一不做二不休，把里面22个常用组件全「抠」出来整理成了个开源库——LKCN UI！今天就跟大伙唠唠，这些从瑞幸「挖」来的组件到底牛在哪？
先说说那个加购控件：比女朋友还懂你想要啥
菜单页每个商品右下角那个「+」号变加减框的小东西——我愿称它为「最懂用户懒癌」设计Top1！平时数量是0的时候就只冒个蓝色小加号在那戳着， 界面清清爽爽不占半分地方；真要点的时候啪一下弹开成带减号、数字、加号的三格控件——动画还带点Q弹感！不是那种生硬切屏式切换，是像按棉花糖一样软软乎乎砸进手里反馈——谁用谁知道有多戳心！
一言难尽。 我当时拆这个组件时候特意把逻辑扒得干干净净：核心判断就一句「当前值是不是小于最小值」——小于就只给个孤单单蓝色加号钮；大于等于才展开完整三件套。代码行数不多，但用户那点「怕麻烦」的心被拿捏得死死地～
价格显示玩出花活：一眼就让你觉得「赚大了」
最后强调一点。 这年头卖东西搞促销谁不会划条删除线？但瑞幸家价格能让你盯着看三秒才反应过来「哦这折扣真大」——它把价格拆成三段耍流氓呢！人民币符号小小的灰灰地缩在最左边装低调；整数部分用又粗又大字体怼你眼球中央；小数点和小数部分又缩回去一点点当陪衬。原价用细细灰色删除线划掉搭在下面当「对比项」——层次感直接拉满像叠buff一样！
不是我唱反调... 更绝得是我还给它加了自定义前缀功能！比如想标「预估到手价」「限时秒杀价」这种文案？一行代码搞定事儿～设计师肯定偷偷学过心理学吧？这么一弄谁受得了不赶紧点「加购」键？
会员方案选择器：把复杂事揉成一颗糖
会员卡页面底下那堆玩意儿见过吗？不同等级套餐列表+订阅CTA按钮+七八条协议勾选框——要是每个页面都吭哧吭哧写一遍维护起来能让人原地发疯好嘛？还好我把它整合成了个lkcn-membership-plan组件：扔一行代码进去直接搞定所有流程！
数据结构还特灵活任性：支持纯文字填内容也行；传对象数组装详细信息也行；协议文本里想塞链接跳隐私政策？随便加没问题～之前 PUA。 看瑞幸家那版做得整齐有序像排兵布阵一样才明白：优秀设计从来不是堆功能堆出来得—而是把复杂逻辑藏进简洁外表下悄悄发力呀～
菜单左侧导航栏：连指示器都长在了审美点上
事实上... 菜单页左边那个分类导航栏你们肯定没细看过对吧？不是傻愣愣列一排黑字白底那么简单哦！激活状态时候整个背景会变白字变蓝 ,左边还戳根亮橙色小竖条当「指向针」—视觉重点唰一下就扎进人眼里来了 !
就连分类标签都分三六九等 :热门款标红底白字炸眼球 ,新品标黄底黑字勾好奇心 ,常驻基础款就素净灰底蓝字装低调…拆的时候才咂摸过来 :哪是做UI啊?分明是替用户脑子提前思考好了「该看哪块」嘛 !，我们一起...
再说回整体 design language :克制到骨子里の高级感
咱就是说 ,瑞幸这套设计真不是随便扒俩流行色凑活出来得 !先说说配色特轴 :全局核心死攥俩色儿不放 —活力橙# 摸鱼。 FF6B35 和品牌蓝#1A6EFF !辨识度高到走在街上看一眼logo色就能条件反射喊出「这是瑞幸」 !
歇了吧... 辅助色也就仨凑数 :会员金#C8A26E ,即享绿#2B7D5B ,咖啡棕#3D2D1F —全跟咖啡行当沾边 ,一点不越界瞎胡闹 !
再说圆角 :居然矫情得分五级 !从按钮那种「轻轻碰一下」小圆角 ,到卡片那种「抱怀里都想rua」大圆角 —重要元素就圆得奔放些 ,次要辅助件就收敛着眯着眼圆…连阴影都不屑搞 !现在APP流行靠阴影造层次感 ?瑞庆幸嗤一笑 :老子靠背景色细微差 + 精准间距堆出高级感 ,低端机跑起来都不带掉帧卡壳得 —懂不懂什么叫「全员友好型设计」啊喂 !，PUA。
技术活儿揭秘 :为什么这库能打通三大生态 ?
肯定有人好奇 :你这库凭啥能微信/uni-app/Taro通吃 ?秘密就在「纯原生微信小程序自定义组件」这儿呢 !，开搞。
你想啊 :要是跟风写Taro或者uni-app专属组件 ?那只能绑死在单一生态里 —Taro写得只能Taro项目用 ,uni-app写得只能uni-app啃 —这不纯纯浪费精力吗 ?但原生 component 不 反思一下。 一样 !扔微信项目直接能用 ; uni-app丢进wxcomponents目录配下pages.json就行 ; Taro也有对应引入机制 —写一套代码仨平台通吃 !这波简直偷学Vant Weapp团队之成功经验呀～
还有那套Design Token体系更绝 :所有样式变量全打包进CSS自定义属性里供着 —--lkcn-blue --lkcn-orange --lkcn-radius-md …想换肤?直接在page标签或者全局样式里改俩变量值就行 !比如突然想开咖啡店想换紫色系? --lkcn-blue改成#7C3AED , --lkcn-orange换成#F59E0B —所有按钮标签高亮文字自动跟着变脸 ,连一行组件内部逻辑代码都不用动 !懒人福音本福音有没有 !，醉了...
再说说教你怎么玩转这个库 :比泡方便面还简单
到底怎么用到自己项目里 ?听姐一句劝 :别挣扎别研究复杂构建流程 — npm install lkcn-ui一把梭哈完事 !安装完记得打开微信开发者工具点「工具→构建npm」 .
想用哪个 component ? 在页面.json文件里注个册就行 :比如说想用按钮和价格标签 ?这么写:{"usingComponents":{"lkcn-button":"lkcn-ui/button/index","lkcn-price":"lkcn-ui/price/index"}} —完事直接在wxml里调用标签
嫌npm麻烦?直接拷贝packages/目录下对应 component 文 可不是吗！ 件夹到自己项目也行 —纯原生代码无任何依赖无额外构建链路 ,小白上手零压力～
项目已经悄悄开源在GitHub上啦～要是觉得这些 对吧，你看。 从瑞幸挖来의小宝贝有用 ,麻烦狠狠给个Star呀!
对咯再说说插句题外话 :本人现居厦门苦寻前端/全栈岗位中 —如果哪家团队刚好需要这种「爱抠UI细节到发疯丶看到好看界面忍不住拆解丶 coding时候会自言自语夸自己牛逼」の开发者…欢迎随时私信砸offer呀!!!毕竟好きなコードといいコーヒーは同じようにすべて味わう価値があるじゃないですかﾉ，他破防了。
谁懂啊家人们！最近在厦门找前端工作空档期，我居然养成了个怪习惯——每天点杯瑞幸坐那盯它家小程序看！不是馋咖啡，主要是它家小程序做得也太顺了吧？丝滑到想把界面拆开来看看里面到底藏了啥宝贝。盯久了才发现，原来那些看起来简简单单的按钮卡片里藏着好多贴心到骨子里的设计细节。 客观地说... 干脆一不做二不休，把里面22个常用组件全「抠」出来整理成了个开源库——LKCN UI！今天就跟大伙唠唠，这些从瑞幸「挖」来的组件到底牛在哪？
先说说那个加购控件：比女朋友还懂你想要啥
菜单页每个商品右下角那个「+」号变加减框的小东西——我愿称它为「最懂用户懒癌」设计Top1！平时数量是0的时候就只冒个蓝色小加号在那戳着， 界面清清爽爽不占半分地方；真要点的时候啪一下弹开成带减号、数字、加号的三格控件——动画还带点Q弹感！不是那种生硬切屏式切换，是像按棉花糖一样软软乎乎砸进手里反馈——谁用谁知道有多戳心！
一言难尽。 我当时拆这个组件时候特意把逻辑扒得干干净净：核心判断就一句「当前值是不是小于最小值」——小于就只给个孤单单蓝色加号钮；大于等于才展开完整三件套。代码行数不多，但用户那点「怕麻烦」的心被拿捏得死死地～
价格显示玩出花活：一眼就让你觉得「赚大了」
最后强调一点。 这年头卖东西搞促销谁不会划条删除线？但瑞幸家价格能让你盯着看三秒才反应过来「哦这折扣真大」——它把价格拆成三段耍流氓呢！人民币符号小小的灰灰地缩在最左边装低调；整数部分用又粗又大字体怼你眼球中央；小数点和小数部分又缩回去一点点当陪衬。原价用细细灰色删除线划掉搭在下面当「对比项」——层次感直接拉满像叠buff一样！
不是我唱反调... 更绝得是我还给它加了自定义前缀功能！比如想标「预估到手价」「限时秒杀价」这种文案？一行代码搞定事儿～设计师肯定偷偷学过心理学吧？这么一弄谁受得了不赶紧点「加购」键？
会员方案选择器：把复杂事揉成一颗糖
会员卡页面底下那堆玩意儿见过吗？不同等级套餐列表+订阅CTA按钮+七八条协议勾选框——要是每个页面都吭哧吭哧写一遍维护起来能让人原地发疯好嘛？还好我把它整合成了个lkcn-membership-plan组件：扔一行代码进去直接搞定所有流程！
数据结构还特灵活任性：支持纯文字填内容也行；传对象数组装详细信息也行；协议文本里想塞链接跳隐私政策？随便加没问题～之前 PUA。 看瑞幸家那版做得整齐有序像排兵布阵一样才明白：优秀设计从来不是堆功能堆出来得—而是把复杂逻辑藏进简洁外表下悄悄发力呀～
菜单左侧导航栏：连指示器都长在了审美点上
事实上... 菜单页左边那个分类导航栏你们肯定没细看过对吧？不是傻愣愣列一排黑字白底那么简单哦！激活状态时候整个背景会变白字变蓝 ,左边还戳根亮橙色小竖条当「指向针」—视觉重点唰一下就扎进人眼里来了 !
就连分类标签都分三六九等 :热门款标红底白字炸眼球 ,新品标黄底黑字勾好奇心 ,常驻基础款就素净灰底蓝字装低调…拆的时候才咂摸过来 :哪是做UI啊?分明是替用户脑子提前思考好了「该看哪块」嘛 !，我们一起...
再说回整体 design language :克制到骨子里の高级感
咱就是说 ,瑞幸这套设计真不是随便扒俩流行色凑活出来得 !先说说配色特轴 :全局核心死攥俩色儿不放 —活力橙# 摸鱼。 FF6B35 和品牌蓝#1A6EFF !辨识度高到走在街上看一眼logo色就能条件反射喊出「这是瑞幸」 !
歇了吧... 辅助色也就仨凑数 :会员金#C8A26E ,即享绿#2B7D5B ,咖啡棕#3D2D1F —全跟咖啡行当沾边 ,一点不越界瞎胡闹 !
再说圆角 :居然矫情得分五级 !从按钮那种「轻轻碰一下」小圆角 ,到卡片那种「抱怀里都想rua」大圆角 —重要元素就圆得奔放些 ,次要辅助件就收敛着眯着眼圆…连阴影都不屑搞 !现在APP流行靠阴影造层次感 ?瑞庆幸嗤一笑 :老子靠背景色细微差 + 精准间距堆出高级感 ,低端机跑起来都不带掉帧卡壳得 —懂不懂什么叫「全员友好型设计」啊喂 !，PUA。
技术活儿揭秘 :为什么这库能打通三大生态 ?
肯定有人好奇 :你这库凭啥能微信/uni-app/Taro通吃 ?秘密就在「纯原生微信小程序自定义组件」这儿呢 !，开搞。
你想啊 :要是跟风写Taro或者uni-app专属组件 ?那只能绑死在单一生态里 —Taro写得只能Taro项目用 ,uni-app写得只能uni-app啃 —这不纯纯浪费精力吗 ?但原生 component 不 反思一下。 一样 !扔微信项目直接能用 ; uni-app丢进wxcomponents目录配下pages.json就行 ; Taro也有对应引入机制 —写一套代码仨平台通吃 !这波简直偷学Vant Weapp团队之成功经验呀～
还有那套Design Token体系更绝 :所有样式变量全打包进CSS自定义属性里供着 —--lkcn-blue --lkcn-orange --lkcn-radius-md …想换肤?直接在page标签或者全局样式里改俩变量值就行 !比如突然想开咖啡店想换紫色系? --lkcn-blue改成#7C3AED , --lkcn-orange换成#F59E0B —所有按钮标签高亮文字自动跟着变脸 ,连一行组件内部逻辑代码都不用动 !懒人福音本福音有没有 !，醉了...
再说说教你怎么玩转这个库 :比泡方便面还简单
到底怎么用到自己项目里 ?听姐一句劝 :别挣扎别研究复杂构建流程 — npm install lkcn-ui一把梭哈完事 !安装完记得打开微信开发者工具点「工具→构建npm」 .
想用哪个 component ? 在页面.json文件里注个册就行 :比如说想用按钮和价格标签 ?这么写:{"usingComponents":{"lkcn-button":"lkcn-ui/button/index","lkcn-price":"lkcn-ui/price/index"}} —完事直接在wxml里调用标签
嫌npm麻烦?直接拷贝packages/目录下对应 component 文 可不是吗！ 件夹到自己项目也行 —纯原生代码无任何依赖无额外构建链路 ,小白上手零压力～
项目已经悄悄开源在GitHub上啦～要是觉得这些 对吧，你看。 从瑞幸挖来의小宝贝有用 ,麻烦狠狠给个Star呀!
对咯再说说插句题外话 :本人现居厦门苦寻前端/全栈岗位中 —如果哪家团队刚好需要这种「爱抠UI细节到发疯丶看到好看界面忍不住拆解丶 coding时候会自言自语夸自己牛逼」の开发者…欢迎随时私信砸offer呀!!!毕竟好きなコードといいコーヒーは同じようにすべて味わう価値があるじゃないですかﾉ，他破防了。