面向电商的无代码网页构建方法和装置

技术领域

本发明涉及面向电商的无代码网页构建方法和装置。

背景技术

电子商务通常是指在全球各地广泛的商业贸易活动中，在因特网开放的网络环境下，基于客户端/服务端应用方式，买卖双方不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种新型的商业运营模式。随着电子商务的崛起，开网店卖商品成为一种趋势，其具有交互反馈功能的页面如：首页，落地页，成为了导流曝光的主力。

在电商平台开店卖货，强依赖于电商平台的流量，中小商家想要增加曝光量来提高销量，需要投入大量的费用增加曝光度，同时也无法做到多平台聚合，即存在下述不足：

1、组建研发部门，通过技术研发来实现具有交互的首页、功能页、落地页等，开发成本比较高；

2、强依赖于电商平台的曝光与流量，运营成本比较高；

3、无法跨平台聚合，比如想要同时在一个页面上销售shopee和tokopedia的商品，无法实现。

发明内容

针对上述问题，本发明提供面向电商的无代码网页构建方法和装置，通过无代码开发，大大降低了中小商家用户的开发成本，同时商家可以根据自身情况，在社交媒体上传播增加曝光度，无需依赖平台方，大大降低了运营成本；进一步的，组件化的工程可以跨平台获取商品信息，进行多平台聚合。

名词解释：

1）组件：具有展示，交互，反馈的模块化工程；

2）网页组件包括图片组件、链接组件、商品组件、icon组件、视频组件、音频组件、抖音组件等等，一个个网页组件最终形成了一个完整的网页页面；

3）编辑器：用于排布，操作组件的控制台；

4）用于展示网页组件顺序的数组：一种有序的数据结构，网页组件数据在数组中的位置就表示了顺序关系，通过拖拽改变顺序，最终改变的就是数据在数组中的位置关系。

为实现上述技术目的，达到上述技术效果，本发明通过以下技术方案实现：

面向电商的无代码网页构建方法，包括如下步骤：

步骤1、获取所有网页组件；

步骤2、网页组件对编辑器输出数据结构，构建者根据需求选用网页组件组合，其中，构建者在选用网页组件时会产生一份深度拷贝的数据结构；

步骤3、通过可视化交互对步骤2获取的数据进行编辑和保存，构建者通过选用的网页组件组合产生具有交互反馈功能的页面数据，完成网页页面配置；

步骤4、通过对数据的解析和渲染，产生可触达用户的首页、功能页和落地页；

步骤5、通过社交平台、广告投放，将页面地址投放出去。

优选，步骤3中，还通过商品组件获取第三方电商平台的商品信息，进行商品展示和链接跳转的页面配置。

优选，步骤1中，网页组件包括系统自有组件和组件市场提供的组件。

优选，步骤2具体包括如下步骤：

步骤201、从数据库中获取所有的网页组件信息，每个网页组件都有标准数据结构，用于描述该网页组件信息，包括该网页组件的唯一标识id、类型type、样式style、配置信息setting；

步骤202、当构建者选取网页组件后，会对该网页组件的数据结构进行深度拷贝，同时产生一个新的id，用于表示当前位置的组件，并将拷贝数据插入用于展示网页组件顺序的数组中。

优选，步骤3中，通过商品组件获取第三方电商平台的商品信息，进行商品展示和链接跳转的页面配置具体包括如下步骤：

步骤A、输入商品源地址；

步骤B、商品组件根据源地址域名进行来源分析：若第三方电商平台支持api接口获取商品信息，则调用api获取；否则，模拟浏览器访问该商品源地址，从页面的html中分析出商品信息；

步骤C、将不同来源的商品信息统一成标准的数据结构，存储在setting中用于展示和链接跳转。

优选，步骤3中，通过可视化交互对步骤2获取的数据进行编辑时，修改会同步到步骤2中所述的数据结构中；通过拖拽可以调整组件与组件之间的关系，同时这种顺序关系会被同步到步骤2中的数组中。

对应的，面向电商的无代码网页构建装置，包括：

网页组件获取单元：用于获取所有网页组件；

组件编辑器：网页组件对编辑器输出数据结构，构建者根据需求选用网页组件组合，其中，构建者在选用网页组件时会产生一份深度拷贝的数据结构；

可视化编辑单元：通过可视化交互对组件编辑器获取的数据进行编辑和保存，构建者通过选用的网页组件组合产生具有交互反馈功能的页面数据，完成网页页面配置；

数据解析和渲染单元：通过对数据的解析和渲染，产生可触达用户的首页、功能页和落地页；

发布单元：通过社交平台、广告投放，将页面地址投放出去。

优选，还包括聚合多平台商品单元：通过商品组件获取第三方电商平台的商品信息，进行商品展示和链接跳转的页面配置。

优选，聚合多平台商品单元根据输入的商品源地址域名进行来源分析：若第三方电商平台支持api接口获取商品信息，则调用api获取；否则，模拟浏览器访问该商品源地址，从页面的html中分析出商品信息；最后，将不同来源的商品信息统一成标准的数据结构，存储在setting中用于展示和链接跳转。

优选，组件编辑器从数据库中获取所有的网页组件信息，每个网页组件都有标准数据结构，用于描述该网页组件信息，包括该网页组件的唯一标识id、类型type、样式style、配置信息setting；当构建者选取网页组件后，会对该网页组件的数据结构进行深度拷贝，同时产生一个新的id，用于表示当前位置的组件，并将拷贝数据插入用于展示网页组件顺序的数组中。

本发明的有益效果是：

本发明通过无代码开发和模块化编程思想，赋能中小商家用户，不再需要进行代码开发，而是通过选择和定制已有组件模块，生成首页、落地页等静态页面。页面中可以聚合多个平台上销售的商品，进行定向推广增加曝光度，同时减低了对平台本身的流量依赖，帮助中小型电商拥有自主导流的能力。

附图说明

图1是本发明面向电商的无代码网页构建方法的流程示意图；

图2是本发明进行组件配置的流程示意图；

图3是本发明商品多平台聚合的流程示意图；

图4是本发明实施例中进入编辑器页面截图；

图5是本发明实施例中头像编辑区域页面截图；

图6是本发明实施例中上传头像后的页面截图；

图7是本发明实施例中商家名称区域页面截图；

图8是本发明实施例中选择商品组件的页面截图；

图9是本发明实施例中添加第一个商品的页面截图；

图10是本发明实施例中输入第一个商品源地址的页面截图；

图11是本发明实施例中输入第二个商品源地址的页面截图；

图12是本发明实施例中通过拖拽调整组件之间的顺序关系的页面截图；

图13是本发明实施例中设置页面的url的页面截图；

图14是本发明实施例中发布的页面截图；

图15是本发明实施例中查看页面成品的页面截图；

图16是本发明实施例中最终的产品聚合网页页面截图。

具体实施方式

下面结合附图和具体的实施例对本发明技术方案作进一步的详细描述，以使本领域的技术人员可以更好的理解本发明并能予以实施，但所举实施例不作为对本发明的限定。

本发明面向电商的无代码网页构建方法，包括如下步骤：

步骤1、获取所有网页组件；

步骤2、网页组件对编辑器输出数据结构，构建者根据需求选用网页组件组合，其中，构建者在选用网页组件时会产生一份深度拷贝的数据结构；

步骤3、通过可视化交互对步骤2获取的数据进行编辑和保存，构建者通过选用的网页组件组合产生具有交互反馈功能的页面数据，完成网页页面配置；

步骤4、通过对数据的解析和渲染，产生可触达用户的首页、功能页和落地页；

步骤5、通过社交平台、广告投放，将页面地址投放出去。

本发明通过汇总获取所有网页组件包括系统自有组件和组件市场提供的组件，组件对编辑器输出数据结构，在选用组件时会产生一份深度拷贝的数据结构，通过可视化交互对这份数据进行编辑和保存，最终多个组件组合产生了具有交互反馈等功能的页面数据。通过对数据的解析，渲染，可产生触达用户的首页，功能页，落地页。通过平台搭建的页面可以在任意社交平台分享，增加曝光、降低运营成本。

若需要达到多平台聚合的效果，则步骤3中，还需要通过商品组件获取第三方电商平台的商品信息，进行商品展示和链接跳转的页面配置。通过商品组件获取shopee、tokopedia、lazada等第三方电商平台的商品图片、价格等信息，用来展示，跳转等行为，同时达到多平台聚合的效果。

本发明通过无代码开发和模块化编程思想，赋能中小商家用户，不再需要进行代码开发，而是通过选择和定制已有组件模块，生成首页、落地页等静态页面。页面中可以聚合多个平台上销售的商品，进行定向推广增加曝光度，同时减低了对平台本身的流量依赖，帮助中小型电商拥有自主导流的能力。下面以商家无代码构建网页为例，结合附图1-3进行详细介绍。

商家可以通过注册/登录进入平台并查看页面列表，如图1所示，步骤1中，网页组件包括系统自有组件和组件市场提供的组件，组件市场可以通过组件市场从业人员或者云服务获取组件。

获取所有网页组件进入步骤2：创建页面，进行组件配置，如图2所示具体包括如下步骤：

步骤201、进入编辑器页面会从数据库中获取所有的网页组件信息，每个网页组件都有标准数据结构，用于描述该网页组件信息，比如：id，type，style，setting等，其中，id表示组件唯一标识；type表示组件类型比如文本，链接，商品等；style表示组件的样式；setting表示其他配置比如文本内容、跳转链接、商品信息等。

步骤202、当商家选取网页组件后，会对该网页组件的数据结构进行深度拷贝（与原始数据结构一样的数据，但是互不影响，后续用于后续操作修改），同时产生一个新的id，用于表示当前位置的组件，并将拷贝数据插入用于展示网页组件顺序的数组中。

步骤3中，通过可视化交互对步骤2获取的数据进行编辑和保存，通过商品组件获取第三方电商平台的商品信息，进行商品展示和链接跳转的页面配置，商家通过选用的网页组件组合产生具有交互反馈功能的页面数据，完成网页页面配置，具体的：

（a）通过可视化交互对步骤2获取的数据进行编辑和保存：

通过可视化交互对步骤2获取的数据进行编辑时，修改会同步到步骤2中所述的数据结构中，也即商家对组件进行的修改会同步到对应的数据结构中，比如对文本的字体大小进行修改，会同步数据结构中的style.fontSize；设置跳转链接，会同步数据结构中的setting.link；上传图片会同步数据结构中的setting.imgUrl。

（b）通过商品组件（Product组件）获取第三方电商平台的商品信息，进行商品展示和链接跳转的页面配置，具体包括如下步骤：

步骤A、输入商品源地址，及商品链接；

步骤B、商品组件根据源地址域名进行来源分析：若第三方电商平台支持api接口获取商品信息，则调用api获取；否则，模拟浏览器访问该商品源地址，从页面的html中分析出商品信息，比如可以从title获取商品名称、从页面的第N个图片标签获取商品图片。

步骤C、将不同来源的商品信息统一成标准的数据结构，存储在setting中用于展示和链接跳转。

重复上述步骤（a）和（b）配置多个组件，最终产生完整页面数据，通过拖拽可以调整组件与组件之间的关系，同时这种顺序关系会被同步到步骤2中的数组中。

步骤4、通过对数据的解析和渲染，产生可触达用户的首页、功能页和落地页；

步骤5、最终确认无误即可保存发布，通过社交平台、广告投放，将页面地址投放出去。

商家的用户通过访问这个页面，引流到商家的店铺页面或者商品页面或者其他页面等。

对应的，面向电商的无代码网页构建装置，包括：

网页组件获取单元：用于获取所有网页组件；

组件编辑器：网页组件对编辑器输出数据结构，构建者根据需求选用网页组件组合，其中，构建者在选用网页组件时会产生一份深度拷贝的数据结构；

可视化编辑单元：通过可视化交互对组件编辑器获取的数据进行编辑和保存，构建者通过选用的网页组件组合产生具有交互反馈功能的页面数据，完成网页页面配置；

数据解析和渲染单元：通过对数据的解析和渲染，产生可触达用户的首页、功能页和落地页；

发布单元：通过社交平台、广告投放，将页面地址投放出去。

优选，还包括聚合多平台商品单元：通过商品组件获取第三方电商平台的商品信息，进行商品展示和链接跳转的页面配置。

优选，聚合多平台商品单元根据输入的商品源地址域名进行来源分析：若第三方电商平台支持api接口获取商品信息，则调用api获取；否则，模拟浏览器访问该商品源地址，从页面的html中分析出商品信息；最后，将不同来源的商品信息统一成标准的数据结构，存储在setting中用于展示和链接跳转。

优选，组件编辑器从数据库中获取所有的网页组件信息，每个网页组件都有标准数据结构，用于描述该网页组件信息，包括该网页组件的唯一标识id、类型type、样式style、配置信息setting；当构建者选取网页组件后，会对该网页组件的数据结构进行深度拷贝，同时产生一个新的id，用于表示当前位置的组件，并将拷贝数据插入用于展示网页组件顺序的数组中。

现有技术中，同一个商家在多个平台开店，无法互相导流，推荐，而本发明可以直接跨平台获取第三方的商品信息，聚合展示在页面上，做到垂直推荐，下面结合具体实施例来演示聚合shopee和lazada两个电商平台商品的案例：

第一步：创建页面，进入编辑器会提供默认模板，界面如图4所示；

第二步：界面如图5所示，点击右侧的方框区域（头像编辑区域），左侧将变为该区域对应的编辑区；

第三步：上传我们的头像，可以选择任意图片，界面如图6所示；

第四步、界面如图7所示，点击右侧文本区域（商家名称区域），触发文本编辑功能；

第五步：选择商品组件，界面如图8所示；

第六步：添加第一个商品（shopee上的商品），界面如图9所示；

第七步：输入该商品源地址，界面如图10所示；

第八步：添加第二个商品（lazada上的商品），输入该商品源地址，界面如图11所示，通过输入不同平台的地址，完成商品聚合；

第九步：通过拖拽调整组件之间的顺序关系，界面如图12所示；

第十步：设置页面的url，界面如图13所示；

第十一步：保存发布，界面如图14所示；

第十二步：查看页面成品，界面如图15所示；

第十三步：最终的产品聚合网页页面如图16所示。

对应电商商家而言，无需组建研发团队即可完成常规首页、功能页、落地页等的开发，商家通过交互产生数据，用数据产生页面，所有交互反馈等行为都用数据进行描述，还可以实现多平台聚合商品。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或者等效流程变换，或者直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。