2
头图
NutUI 是一套京东风格的轻量级移动端组件库,目前已有 70+ 高质量组件,覆盖移动端主流场景。NutUI 3.1 版本上线后,增加了多端小程序适配能力,在微信小程序平台取得了很好的效果。而现在,NutUI 支持京东小程序开发了!

抢先体验

使用京东 APP 扫码体验:

NutUI 京东小程序

背景介绍

京东小程序

京东小程序平台是一个全面开放的生态模式,它为开发者提供了沟通线上线下购物能力的方式,帮助商家和开发者以全新的方式连接消费者。

京东小程序平台具有优质用户、亿级流量和丰富渠道三大核心优势,提供了交易、营销、广告、客服、会员、支付、物流等多种开放能力,能更好的帮助商家服务京东高品质用户群体。同时入驻的商家还能享受到官方流量扶持政策,共享京东亿万级公域流量池,保证用户持续增长。目前在京东APP中已上线 17000+ 应用,典型产品如 LV 旗舰店、芝华士旗舰店、京东快递等。

京东小程序

NutUI

作为京东零售开源的移动端组件库,NutUI 目前已覆盖 Vue、React 两大前端开发框架,包含了 70+ 高质量组件,提供了详尽的文档与示例代码,能够帮助开发人员快速开发用户界面,提升开发效率,改善开发体验。

NutUI 支持组件级别定制主题,除了基于京东 APP 视觉规范的默认主题外,还提供了京东科技版(NutUI-JDT)、零售B商城版(NutUI-JDB)、京东企业业务(NutUI-JDDKH)等多个定制主题,能够满足业务定制化 UI 的诉求。

NutUI 3.1 版本上线后,正式开启了多端开发之路。NutUI 与 Taro 合力,实现了让开发者一处代码,多端运行,畅快自如地开发小程序。自上线以来,在集团内部已有大量使用 NutUI 进行开发的小程序案例,例如京东科技-企服中心、京东科技-京小贷、京东到店-门店端、京东物流-冷链、京东汽车-京安途、门店陈列执行管理等等,在外部社区也有前晨汽车、数智安全等案例。

NutUI

NutUI 京东小程序

经过 NutUI 团队三个多月的努力,目前 NutUI 小程序版的全部 70+ 组件均已完成了对京东小程序的适配,其中还包括了 10+ 特色业务组件,能够覆盖大多数移动端应用场景。

下面是 NutUI 部分组件的效果示例图:

demo

H5 与小程序开发对比

1、使用场景与用户体验

H5 页面通过链接访问,可以在任意浏览器、社交平台之间传播分享。用户每次打开时都需要重新下载页面资源,离开页面后则很难再次找到入口。总体上比较适合一些业务场景简单,同时对分享转发传播有需求的应用场景。小程序同样无需下载,即用即走,但在用户体验上接近原生 APP,对于业务逻辑复杂、涉及页面跳转较多、需要登录支付交易场景的应用,小程序具有显著优势。

2、运行环境与系统权限

H5 项目的运行环境通常是手机浏览器或者移动端 APP 的 WebView 容器,受限于此,在系统权限方面局限性较大。小程序则依赖于特定的客户端,在获得小程序平台的授权后,能够获取摄像头、定位、录音等更多系统权限,实现更丰富的应用功能和场景。京东小程序平台还为开发者提供了登录、分享、跳转、唤起等更多开放能力以满足开发者的业务诉求。

3、开发体验

从开发角度看,小程序平台提供的原生开发方式与 Web 开发存在差异,对编程语言也有一定的语法限制,不同小程序平台的项目并不兼容,迁移成本较大。相比之下,H5 项目几乎不存在兼容性问题,在主流移动端浏览器和 APP 内都能直接通过链接访问。不过,在 Taro 的帮助下,开发者可以使用 Vue/React 框架编写支持小程序和 H5 的项目。NutUI 也同时支持 H5 开发与小程序开发,开发者可以快速地将 NutUI 项目在 H5、京东小程序、微信小程序等平台之间相互迁移。

对比

使用 NutUI 开发京东小程序

NutUI 模板已内置于 Taro 脚手架中,只需以下三步即可快速搭建京东小程序项目。

1、安装 Taro 脚手架

npm install -g @tarojs/cli

2、初始化项目,并选择 Vue3-NutUI 模板

taro init nutui-jdmp

code

3、启动京东小程序项目,开始编码

npm run dev:jd

最后

NutUI 组件库会不断迭代更新,如果在开发中遇到任何问题,可以在 GitHub 开源社区或咚咚交流群(82957939)与我们联系,或者邮件至 nutui@jd.com,我们会第一时间给予答复与支持。

欢迎在 GitHub 仓库为我们 Star,也期待大家参与进来,为 NutUI 社区贡献自己的代码。

相关链接:


京东设计中心JDC
696 声望1k 粉丝

致力为京东零售消费者提供完美的购物体验。以京东零售体验设计为核心,为京东集团各业务条线提供设计支持, 包括线上基础产品体验设计、营销活动体验设计、品牌创意设计、新媒体传播设计、内外部系统产品设计、企...