NutUI 实战--持续升级企业业务之福礼

前言

自 2018 年 4 月福礼上线以来，通过快速迭代和扩展功能模块，整个项目快速发展。2019 年，京东福礼的月均活跃用户同比增长达到 265%，累计为超过 3500 家企业提供了数字化福利管理服务，有近 600 万人次通过京东福礼实现了个性化福利发放。回首过往，从只支持一种活动模式到现今支持六种活动模式，从只支持积分支付到支持混合支付、金额支付、单次支付，从只支持扫码展示 H5 到支持微信小程序内嵌、原生 App 内嵌...福礼正在以飞快的速度完善自己的功能体系，以期给客户更好的服务。伴随着项目功能的快速迭代和完善，是研发同学们在技术上的攻坚克难和不断突破的过程，也是整个团队（产品，后台，测试）一同成长，共同进步的过程。为此特整理此文，记录过往的经验和思考，也期望能给同路人带来启发和帮助。

自2019年至今的主要功能迭代进展图

什么是福礼

福礼是京东为优质企业客户打造的以年节福礼/季度劳保兑换为主的员工福利商城。该产品致力于提升员工福利感知度、降低福利发放和领取成本，为企业客户提供京东品牌保障的海量正品、搭配企业专属优惠价格和极速物流配送服务，进而帮助企业合理规划年度福利方案，完成一站式企业员工福利的管理及采购。

接下来就带大家看一下福礼的庐山真面目吧：

好了，广告宣传部分到此结束，接下来我们将从更好的福礼、开发效率优化、流程优化三个方面来聊聊我们在福礼项目的持续升级中的收获和思考！

前端架构

福礼项目自 18 年立项以来一直使用 Vue 技术栈，使用了团队自行开发的 Gaea 构建工具和 NutUI 组件库，此外引入了 Carefree，SMock，Vuex 等。

Gaea构建工具，是我们团队自主开发的一套 Vue 技术栈构建工具，基于 Node.js、Webpack 模版工程等的 Vue 技术栈的整套解决方案，包含了开发、调试、打包上线完整的工作流程。极大的提高了工作效率，目前团队所有 Vue 业务都使用该脚手架。

NutUI组件库，是一套京东风格的轻量级移动端 Vue 组件库，由我们团队历时数年打磨，目前有 50+ 京东移动端项目使用，github上得到1.9k+的 star ，176 Used By(不包含私有仓库)、236 fork，NPM 下载量超过 14.5 K。该 Vue 组件库提供大量的可复用的 Vue 基础组件，极大的便利了福礼项目的开发。

Carefree ，一套不依赖 wifi 热点的移动 web 真机测试一站式解决方案，是我们团队在日常开发中发现真机很依赖电脑发出热点才能进行调试的痛点，针对这一问题，旨在摆脱 wifi 热点束缚，让移动 web 真机测试自由自在而自主研发的一套解决方案。

SMock，由团队自主研发，针对项目前期尚无数据的问题，分析需要 mock 的文档，输出相应的 mock 数据，并启动 node 服务，供前端开发时调试使用，提高前端开发效率，支持跨域访问。

更好的福礼

站在巨人的肩膀--组件库助力开发

古语道：“君子性非异也，善假于物也“一套值得信赖的组件库，会使开发事倍功半。

福礼项目自立项开发以来，一直使用 NutUI 组件库。从 1.x 版本中部分的引用组件到 2.x 版本大范围使用，NutUI 活跃的社区互动和及时的响应速度，以及具有连续性的升级，逐渐获得了我们的信赖。

NutUI 组件库是一套京东风格的轻量级移动端 Vue 组件库。通过 JDRD 前端团队 2 年多的迭代升级，目前有 50+ 京东移动端项目使用，外部使用项目达 40+ 项目。GitHub 2k star 、194 Used By(不包含私有仓库)、254 fork，NPM 下载量超过 16.8 K。

除了 NutUI 本身的项目影响力强劲外，最吸引我使用的还有以下几点：

业务组件

除了普通的常用组件，NutUI 基于本身的基础组件，通过分析项目中具有很多共性的业务逻辑，抽象后再次封装，从而开发出了很多业务组件。它们可以省去使用者由基础组件组装并写重复业务代码的过程，真正的解决业务开发中时间紧，任务重的痛点。

就比如经常在商城中使用到的地址组件，一个组件包含了选择自定义地址，选择已有地址，自定义图标，自定义地址与已有地址切换等多种业务的需要。只要产品需要对应的功能，我们就可以快速引入组件并看到对应的效果，基于大量用户使用的业务组件，在功能上更加完善，防止了因业务逻辑没有思考全而带来返工的问题，也减少了开发者从基础组件封装的时间消耗。

地址组件在福礼中的使用

电商类组件覆盖率高

NutUI 是一套京东风格的轻量级移动端 Vue 组件库，所以其中收录的组件能更好的覆盖电商类移动应用的开发。
相较于其他经典开源组件库，福礼使用组件覆盖率对比如下：

功能	MintUI	VantUI	NutUI
上拉加载、下拉刷新	o	×	o
Dialog 对话框	o	o	o
Swiper 轮播图	o	o	o
Tab 选项卡	o	o	o
Toast 吐司	o	o	o
回到顶部	×	×	o
左滑删除	×	o	o
上传	×	o	o
Popup 弹出层	o	o	o
Stepper 步进器	×	o	o
图片懒加载	o	×	o
时间轴	×	o	o
搜索栏	o	o	o
商品价格	×	×	o
徽标	o	×	o

统一的京东设计风格，使整个组件库的组件样式统一，交互符合逻辑。开发者也可以通过主题定制的方式来满足业务多样化的视觉需求。想了解更多主题定制戳这里主题定制。

了解你的用户--数据采集

如何使自己的项目更贴近用户，首先就需要了解用户。作为与用户交互的最前线，为了助力客户作出更优的采购决策，推送给顾客更称心的商品，我们只能迎接挑战，升级自己的数据采集能力。为此，我们使用京东自主研发的数据采集服务--“子午线”来实现交互埋点等用户操作信息的收集功能。一番修改下来，颇有收获，分享于此。

1.动态引入 PV 埋点代码

原本的 PV 埋点代码是默认写死在 html 中的，但为了要在登陆之后，从接口中传入活动信息和员工信息，所以必须改造为登陆之后动态引入 PV 埋点代码。而又因为项目中有外接模块，从外接模块返回到应用的时候也许活动数据有变化，所以还需要清除之前的埋点代码，再动态引入新的埋点代码。
基于此我们的解决思路可以分以下两步：

1-1 调用

分别在根组件和首页中调用。
根组件调用：外接模块返回到本应用的时候，都会触发根组件的生命周期，这时可以重新获取活动本身的信息。
首页调用：在登陆前，后台不会返回对应的活动和用户数据，所以需要在首次登陆的之后进入首页再调用 PV 埋点函数。

this.$JDUnify.JDPV(data.data);

1-2 在动态插入的时候先动态删除之前的插入的内容

 
 content(html) {
     let cont = document.getElementById('cont');
     cont.innerHTML = html;
     let oldScript = cont.getElementsByTagName('script')[0];
     cont.removeChild(oldScript);
     let newScript = document.createElement('script');
     newScript.type = 'text/javascript';
     newScript.className = "xxx";
     newScript.innerHTML = oldScript.innerHTML;
     document.body.appendChild(newScript);
 };
 JDPV(obj) {
     ...
     let dongtaiTag = document.body.querySelectorAll('.xxx');
     
     if (dongtaiTag.length > 0) {
         document.body.removeChild(document.body.querySelectorAll('.xxx')[0]);
     }
     let japHtml = `