金总的要求初冬的一大早，客服小王第一个来到公司。还没等他脱下厚厚的羽绒服，办公桌上的电话就响了。“您好，这里是京东客服，有什么可以帮您的吗？”电话那头很吵，呼啸的北风让人听不清来电者的声音，能听得懂的只有对方。“……开发票！……我要开发票！……”开发票要业务精通的小王并没有慌张，静静地守在办公桌前等着。几分钟后，电话又响了。经过几分钟的交谈，小王明白了来电者金先生的用意。在使用京东汇财APP购买了满意的商品后，在开票环节的体验就比较差了。每次都要找人帮忙，感觉很不爽。麻烦，希望有在线自助计费功能。小王耐心听完金先生的讲述后，立即展开调查。原来，京东汇菜APP是一个面向大客户的购物平台。它已经在线运行了很长时间，并且具有良好的声誉。找到慧财APP的研发人员。小王从研发小哥那里了解到：之前业务方做过调研，慧财APP的客户在使用开票功能时体验不是很好。大，无法提高开票的及时性，人工成本也高。需要快速开发自助计费系统。小王：“研发哥，客户急，这个功能什么时候开发完？”小王：“大哥，大哥，要多久啊？”》小王：《……》项目开发developwithNutUI3NutUI是一个JD风格的移动端组件库，支持使用Vue开发H5和小程序，小弟打开NutUI官网，发现里面会有一个大每半个月版本更新一次，最近的版本中加入了很多新的组件：指标组件、表格组件、骨架屏组件、级联选择器组件.....不仅如此，组件库的设计风格也是如此同样是跟风，已经符合最新的京东10.0设计规范，小哥点开视觉稿，看到几十张设计图满屏，有些遗憾，对客服说了一个“快”字小王。不过看到入口页面后，眼中闪过一丝精光。虽然入口文件的设计看起来很简单，但也需要考虑圆角的开发和调整，borderers、间距、字体、向右箭头等，而NutUI的单元格（Cell）组件可以让整个开发时间缩短到极致。小哥想了想，敲了几行代码：1分钟后，入口页面的重构基本完成。小哥打开了下一页“填写账单信息页”的视觉稿。该页面用于在计费过程中收集用户信息，涉及的功能很多。只看上半部分，包括进度条和金额。计费方式显示、切换等功能。抛开其他功能不谈，单单进度条的交互实现起来还是需要一点时间的。但是NutUI提供了一个步骤条（Steps）组件，在匹配度上是极其一致的。引入组件后，适当调整颜色即可使用。只需编写几行代码。{{i}小弟继续查看NutUI文档，发现价格（Price）组件和单选按钮（Radio）组件{{item.name}}Price（价格）组件中的thousands属性可以控制是否以千分之一的形式显示，这样就不需要再对price字段进行处理，手动添加逗号；同时还可以自定义小数位数，设置是否显示人民币符号“￥”等。这里的单选按钮（Radio）组件很难第一时间想到，因为选择按钮计费方式的使用更让人联想到按钮（Button）组件，但按照一次只能选择一个的逻辑，使用单选按钮（Radio）组件会带来更快的开发体验。很快，小哥就完成了第一阶段需求的开发。用NutUI3不断改进优化又是一个美好的早晨。金先生找到客服小王，由衷感谢小王和同事们的付出，并表示如果能进一步优化用户体验，会更加爱大家。小王得到好评很开心，第一时间找到了研发小哥。小弟弟：哦。“很有上进心”的小哥一大早只好继续在NutUI的文档中求助，结果顺利找到了滚动加载（InfiniteLoading）组件。怎么了，厉害了。”类似这种信息列表，直接把所有的数据都拉出来再列出来确实不友好。让用户滚动到底部，加载更多的内容，这是性能和用户体验方面的。一个更好的选择。那么，下拉加载怎么写呢？核心思想是监听用户滚动到底部，再次请求接口获取分页数据，使用NutUI滚动加载（InfiniteLoading）组件这样写：has-more用于识别是否有更多数据显示打底文案，load-more是继续加载的回调函数.刚刚优化了下拉加载功能的小哥还不满意，觉得自己还可以再做点什么。想了想，想到在之前的开发过程中，NutUI组件库没有提供表单（Form）组件，于是提出了一个Issue。不知道现在有没有人回复他。小哥打开github，惊讶的发现NutUI的团队成员都对他反应热烈，表单（Form）组件也发布了最新版本。怀着试一试的心情，小弟打算重构一下之前纯手写的“添加通用收票地址”页面。不得不承认开发这个组件的小伙伴还是很强大的。按照文档写下代码后，已经很接近实际需求的完成了。Abriefsummarymakeasummary一天早上，客户金先生求助，希望自己出票；客服小王找到了研发小哥；时间紧任务重，小哥使用NutUI组件库开发；过程很顺利，效果很好；又一天早上，客户金先生提出了优化要求；NutUI组件库再次登场。客户金先生非常满意，项目取名为金如意。
