电商类项目后台编辑H5商城页面的功能一般用什么解决方案?

image.png

类似有赞店铺的后台能够直接编辑H5商城的页面,方便不会编程的商家更容易的自定义自己的店铺样式,这种方式一般用的是什么解决方案呢?
目前的思路是:H5将所有的功能模块都定义好,然后按照后台的设定进行展示,web端能够使用的组件与H5的组件是一一对应的,但是这样带来的一个问题是组件代码需要两份。
欢迎大佬们提点意见啊,拜谢!

回答:

想要实现组件代码一份维护,是有解决方案的。因为我司这段时间也在做后台对H5界面的可视化编辑。这段时间研究了一下,刚好和题主的方向相同,中间也遇到了很多问题,想了很多方案,所以想把过程也分享一下,中间会带上解决思路和大概的方案,可能会有点啰嗦。相信可以解决你目前的问题,至少可以提供一些新的思路。

后台搭建H5的界面,这里涉及到2个端,一个后台(管理端),一个前台(C用户端)

首先:

这2个端肯定是2套工程,代码是分开的。那么就会产生上面提到的问题,所有组件的代码都需要写2套,前台展示用一套,后台编辑的时候展示用一套(有赞的搭建改版前就是这种方案)。如果后台和前台使用的相同的技术栈,那么还稍微好一点,每次改动组件时将改动的内容复制到另一套代码里面即可;如果后台和前台使用的不是一个技术栈,如后台React,前台Vue,那么相当于所有的组件代码必须得用2个框架分别开发一遍,可以想象的到工作量有多大。就算是同一个技术栈,每次改动一点内容都得记得同步另一个端的代码,哪怕只是换了个图片或改了一行代码,维护起来也是比较繁琐的。

思考:

有没有什么方案可以只维护一套组件代码,前台展示和后台编辑的时候同时使用呢?在找解决方案的时候也尝试了多种方向:

一、最先开始想到的,既然只维护一套代码,那么肯定要么写在前台,要么写在后台。假设写在前台,后台搭建的时候如何使用前台的代码呢?当时暂时没想比较好的方案,暂时搁置;

二、是否可以将我们的组件代码作为一个组件库上传到npm,就像我们常使用的UI框架一下,前台和后台使用的时候直接在npm上下载就行,但是由此又会产生很多新的问题。比如每次改动一点东西就得发布到npm,代码中再重新下载最新的包,稍稍想想,感觉开发时可能自己会疯。而且如果是项目型的公司,各种不同的项目,包的维护本身就是一个问题。放弃了这种方案。

三、在后台搭建保存的时候直接生成页面,在前端展示的时候就直接引入生成的页面,组件就可以只在后台管理维护。但是组件的展示本来就是前端的一部分,可能会涉及到引入前端的框架或一些其他的组件,组件与前端代码依赖性较强,放在后台代码中维护不合适。并且后续如果涉及到多个端(如小程序、APP)搭建时又改如何实现,不太合适,放弃。

四、研究有赞的搭建系统时发现部分界面升级为新版了。看了下代码,发现有赞后台的可视化搭建中,H5界面展示那一部分用了iframe,并且引入的页面地址与后台搭建地址不一致。这不就是我们想要的效果吗?后台可以引入不一样的地址直接引入前台页面,组件都可以都在前台代码中维护了,也就是上面说的第一种方案。

但是后台iframe嵌入h5的页面,如何实现跨窗口、跨源通信。这时想到了之前看到的postMessage,不正是解决跨源通信的。从技术上来说,这种方案应该是可行的,开始动手尝试。

实现:

(我这里前后台都是使用的Vue)

一、将后台搭建界面和前台组件代码写好,这里不细说,就是常规的界面。由于没有设计,我的后台搭建直接参考的有赞新版;

二、重点说一下后台和H5界面通信。

1、在前台可以创建2个页面,一个view(用于C端用户查看界面),一个edit(用于后台搭建引入)。这2个页面都是通过搭建时保存的组件数据(以JSON形式存储保存的组件数据,后续如果有小程序、APP,搭建可以使用一套,各端根据返回数据渲染组件)进行组件的动态渲染,搭建时选择了哪些组件,配置了哪些数据,这里就做相应的渲染。区别在与view就是纯粹的展示(就是我们常规的页面开发),edit会包含一些拖拽组件更换位置,显示组件名称、删除组件,展示将要预添加的组件等内容;创建完前台大概目录结构:

image.png

components中就是我们所有需要用到的组件的代码(也就是我们希望只维护一份的组件代码);

pages中 pageView就是C用户访问的页面,pageEdit后台搭建时iframe引入的页面。

2、后台搭建H5展示模块引入前台的pageEdit页面。
image.png

3、页面引入成功并展示后效果如下:

前台C端访问界面:

image.png

后台搭建引入界面:

image.png

4、通过postMessage建立前台pageEdit页面与后台搭建页面的通信。由于这里涉及到数据通信的地方比较多,如后台拖拽组件到指定位置新增组件、编辑组件数据,前台pageEdit页面拖拽更换组件位置、删除组件等操作都会涉及到与另一端的数据通信。可以封装一个postMessage类或函数,实现接收和发送数据的方法。
postMessage使用方法可以参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

5、界面和数据通信都实现后,就可以开始具体的功能实现了。实现与常规的实现基本一致,只是在涉及到搭建数据更新的时候,通过postMessage通知另一端的数据更新,保持2边同步即可。

最后实现的效果与有赞搭建效果基本一致,也达到了我们最开始期望的组件代码在一端维护。该方案在实现上会稍微复杂一下,但是后期的维护成本会低很多。具体是否选择这种方案,可以自己根据实际情况分析。这里只是提供一个方向、思路。

问题:

实现的过程中遇到了一些问题,如:

  • 如何动态计算iframe的高度;
  • 如何控制pageEdit页面的组件不可点击;
  • 后台搭建界面拖拽组件时如何根据位置计算将要预添加组件在pageEdit页面的位置;
  • 怎么设计数据通信方式,既能简单方便,又避免数据更改通信的死循环。

最后也都一一解决了,开发的时候参考了很多有赞的界面,有些地方没想到比较好的解决方案时,看看他的界面结构也能大概看出他是怎么实现、解决的,也可以对比看自己的解决方案哪个更优。

实现效果:

拖拽添加组件:
image.png

添加完成编辑组件
image.png

目前为止基本的搭建功能已经实现,后续往里填充不同的组件就行。

回答:

组件写两份是不可避免的。

你面向C端的组件,和后台编辑的B端组件,本来就是不一样的。

B端只是简单的样式与模板。而C端则会包含数据与逻辑。
B端只是配置,而C端则是使用!

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注