头图

NutUI 京东小程序发布了!

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 社区贡献自己的代码。

相关链接:

致力为京东零售消费者提供完美的购物体验。以京东零售体验设计为核心,为京东集团各业务条线提供设计支...

696 声望
1k 粉丝
0 条评论
推荐阅读
NutUI 4.0 正式发布!
技术日异月新、发展创新、持续的迭代已成为常态。NutUI 虽经过 v1.0、v2.0、v3.0 三次技术蜕变,仍面临很多兼容、破坏性调整的需求。随着我们自身承接业务的多样性变化及社区诉求日渐增多,大调整和升级势在必行...

京东设计中心JDC2阅读 346评论 1

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青55阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

致力为京东零售消费者提供完美的购物体验。以京东零售体验设计为核心,为京东集团各业务条线提供设计支...

696 声望
1k 粉丝
宣传栏