Mendix版的电商京东首页长什么样儿?

前言

世界需要大前端。大前端需要Mendix。

近日经常有企业IT侧的朋友反应,自家需要一个神奇的内容管理平台,来快速打造随需应变的公司官网,亦或企业官微,如果能在小程序里呈现产品营销类的功能更好。首先要肯定的是,前后端分离技术发展至今,大前端概念早已深入人心,那么——

为什么需要大前端:

1、需要支持多设备环境,统一开发维护一套业务代码,节省时间资源的重复投入。

2、快速迭代升行业市场竞争力

3、跨平台良好的兼容性为用户带来一致的用户体验,打造核心产品竞争力。

4、满足未来业务市场的扩张需求

然鹅。。。大前端,为什么需要敏捷高效的手段?

1.降低成本,缩短开发周期

2.单兵作战与单人产能的增效

3.增加业务处理的敏捷度,随改随用。这样一来,业务快速发布五彩缤纷的内容来吸粉,该多快乐

毫无疑问的是Mendix擅长开发CX类的2B2C类的界面,所以月末的今天,我们在这里,跟大家介绍以假乱真版的京东商城的首页:https://jddemo100-sandbox.mxapps.io/,是如何开发的:

hmmmm,还好没做支付功能,否则小伙伴直接下单了,o(╯□╰)o

1. 整页面排版布局该如何设计

Mendix版的电商京东首页长什么样儿?_第1张图片

排版能力强,是因为采用了原生既有的Mendix的layout组件、container组件,和snippets与building blocks组件。

container包含container,snippets也可以包含snippets……这样便可以形成一张网页大的版面,然后开始填充各个地方的内容。切换至design mode的所见即所得:

Mendix版的电商京东首页长什么样儿?_第2张图片

2. 图片的插入方式,都有哪些秘密

静态图片如下截图

Mendix版的电商京东首页长什么样儿?_第3张图片

动态图片的CSS方式,如下截图

Mendix版的电商京东首页长什么样儿?_第4张图片

动态图片的脚本方式,如下截图

Mendix版的电商京东首页长什么样儿?_第5张图片

3. 图文交互、跑马灯轮询组件,到底是怎么设计的

Mendix版的电商京东首页长什么样儿?_第6张图片

通过按钮的nanoflow,控制图片显示或隐藏即可。

4. 123——购物车右上角的数字,是怎么实现的?

5. 左侧主菜单如何触发弹出一个popup的menu?

这个也是通过page注入JavaScript来实现的。而且这个JavaScript的主要功能是注册了一个mouse over的event,到某个对应的menu item。这样menu item被鼠标hover时候,就trigger一段JavaScript,代码注入方式如下:

为了更直观,这次切换到design mode:

Mendix版的电商京东首页长什么样儿?_第7张图片

show出来的过程,依然利用了css。

6. Styling的决定性作用

总结我们各种页面排版操作,发现100%都是通过Mendix原生UI元素搞定的。

Mendix配合nanoflow,可以解决更多动态交互与渲染的问题。

最后的最后,无论一张图片,一个汉字,还是一横行一纵列,宽宽窄窄,交错重叠……都是css的功劳!

关于Mendix

作为西门子Xcelerator平台的低代码引擎,Mendix正在迅速成为推动企业数字化发展的首选应用程序开发平台。Mendix让企业能够以前所未有的速度构建应用程序、促进IT团队与业务专家之间开展有意义的协作,并帮助IT团队保持对整个应用程序环境的控制。作为一直被领先的行业分析师视为“领军者和远见者”的低代码平台,Mendix是云原生的、开放的、可扩展的、敏捷的,并且经过实践验证。从人工智能和增强现实,到智能自动化和原生移动,Mendix和西门子Xcelerator已成为“数字优先”企业的中坚力量。Mendix已被46个国家的4,000多家企业采用,并建立了由30多万名开发人员组成的活跃社区,这些开发人员使用该平台创建了20多万款应用程序。

你可能感兴趣的:(MX原厂老师How,To系列文章,mendix,低代码,西门子低代码,前端,ui,电商,出海)