NutUI 京东小程序

使用京东 APP 扫码体验：

京东小程序

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

京东小程序平台具有优质用户、亿级流量和丰富渠道三大核心优势，提供了交易、营销、广告、客服、会员、支付、物流等多种开放能力，能更好的帮助商家服务京东高品质用户群体。同时入驻的商家还能享受到官方流量扶持政策，共享京东亿万级公域流量池，保证用户持续增长。目前在京东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 小程序版的全部 70+ 组件均已完成了对京东小程序的适配，其中还包括了 10+ 特色业务组件，能够覆盖大多数移动端应用场景。

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

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

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

npm run dev:jd

NutUI 组件库会不断迭代更新，如果在开发中遇到任何问题，可以在 GitHub 开源社区或咚咚交流群（82957939）与我们联系，或者邮件至 [email protected] ，我们会第一时间给予答复与支持。

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

相关链接：