CN117075893A - 一种基于vue的移动端页面生成方法及*** - Google Patents

Abstract

本发明提供了移动端页面开发技术领域的一种基于VUE的移动端页面生成方法及***，方法包括如下步骤：步骤S10、基于至少包括名称、标题、图标以及数据库表的配置文件创建一用于生成移动端页面的项目；步骤S20、通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；步骤S30、基于VUE对所述移动端页面进行二次开发；步骤S40、基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成。本发明的优点在于：极大的提升了移动端页面开发和维护的便捷性以及效率。

Description

一种基于VUE的移动端页面生成方法及***

技术领域

本发明涉及移动端页面开发技术领域，特别指一种基于VUE的移动端页面生成方法及***。

背景技术

随着互联网的发展，前端框架也迅速发展，手持设备的使用也越来越广泛，为人们的出行、住宿、医疗等各方面提供很大的便利，同时也带来了更大的移动端页面的开发需求。针对移动端页面的开发，传统的开发模式对开发人员的技术水平有一定的要求，且由于开发人员所熟悉的技术栈、ui框架及个人的代码编写习惯差异，会导致重复的功能组件较难复用，多人协作开发的项目(移动端页面)，代码风格的规范依赖于开发人员的自觉性，较难统一，不易于项目的维护，使得开发迭代一个项目的成本较高、周期较长。

因此，如何提供一种基于VUE的移动端页面生成方法及***，实现提升移动端页面开发和维护的便捷性以及效率，成为一个亟待解决的技术问题。

发明内容

本发明要解决的技术问题，在于提供一种基于VUE的移动端页面生成方法及***，实现提升移动端页面开发和维护的便捷性以及效率。

第一方面，本发明提供了一种基于VUE的移动端页面生成方法，包括如下步骤：

步骤S10、基于至少包括名称、标题、图标以及数据库表的配置文件创建一用于生成移动端页面的项目；

步骤S20、通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；

步骤S30、基于VUE对所述移动端页面进行二次开发；

步骤S40、基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成。

进一步的，所述步骤S10还包括：配置所述项目的编辑权限。

进一步的，所述步骤S20具体为：

通过设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于uni-ui封装有若干个组件；

通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中。

进一步的，所述步骤S30具体为：

通过所述页面生成器将移动端页面导出为VUE文件进行本地的二次开发后，再导入二次开发后的所述VUE文件以生成新的移动端页面，将新的所述移动端页面的配置信息更新至数据库表。

进一步的，所述步骤S40具体为：

基于uni-app创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为JSON文件，通过所述打包模板将各所述JSON文件以及配置文件打包为项目包并导出，以完成移动端页面的生成。

第二方面，本发明提供了一种基于VUE的移动端页面生成***，包括如下模块：

项目创建模块，用于基于至少包括名称、标题、图标以及数据库表的配置文件创建一用于生成移动端页面的项目；

移动端页面组装模块，用于通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；

移动端页面再开发模块，用于基于VUE对所述移动端页面进行二次开发；

项目包导出模块，用于基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成。

进一步的，所述项目创建模块还用于：配置所述项目的编辑权限。

进一步的，所述移动端页面组装模块具体用于：

通过设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于uni-ui封装有若干个组件；

通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中。

进一步的，所述移动端页面再开发模块具体用于：

通过所述页面生成器将移动端页面导出为VUE文件进行本地的二次开发后，再导入二次开发后的所述VUE文件以生成新的移动端页面，将新的所述移动端页面的配置信息更新至数据库表。

进一步的，所述项目包导出模块具体用于：

基于uni-app创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为JSON文件，通过所述打包模板将各所述JSON文件以及配置文件打包为项目包并导出，以完成移动端页面的生成。

本发明的优点在于：

通过至少包括名称、标题、图标以及数据库表的配置文件创建一项目，通过设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏的页面生成器打开项目，而组件列表区基于uni-ui封装有若干个组件，在页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将移动端页面的配置信息存储至数据库表中，基于VUE对移动端页面进行二次开发，最后基于配置文件以及配置信息，通过uni-app创建的打包模板将移动端页面导出为项目包，以完成移动端页面的生成；即基于VUE(Vue3)、uni-ui以及uni-app的前端框架，对已有的组件功能进行二次封装整合，开发人员仅需要通过点击、拖拽组件到页面设计区进行配置，在属性配置区进行样式及交互的二次定义，仅需编写少量的脚本即可方便快捷的生成一个移动端页面；由于移动端页面由组件拼接而来，无需开发人员再进行组件的编写，提高了组件的复用率与易维护性，开发人员对组件的属性修改可以实时反馈在页面设计区及页面预览区，便于随时根据需求调整移动端页面；同时uni-ui和uni-app能处理部分移动端的兼容性问题，只要进行简单的可视化交互即可让移动端页面在移动端上运行，大大降低了开发人员的编码门槛，通过VUE文件的导出进行本地二次编码开发以满足业务需求的多样性，在达到项目标准化的同时降低了开发的成本，最终极大的提升了移动端页面开发和维护的便捷性以及效率。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1是本发明一种基于VUE的移动端页面生成方法的流程图。

图2是本发明一种基于VUE的移动端页面生成***的结构示意图。

具体实施方式

本申请实施例中的技术方案，总体思路如下：基于VUE、uni-ui以及uni-app的前端框架，对已有的组件功能进行二次封装整合，仅需要通过点击和拖拽的交互动作即可在页面生成器中方便快捷的生成一个移动端页面，由于移动端页面由组件拼接而来，无需开发人员再进行组件的编写，对组件的属性修改可以实时反馈在页面设计区及页面预览区，同时uni-ui和uni-app具有较高的兼容性，通过VUE文件的导出进行本地二次编码开发以满足业务需求的多样性，在达到项目标准化的同时降低了开发的成本，进而提升移动端页面开发和维护的便捷性以及效率。

请参照图1至图2所示，本发明一种基于VUE的移动端页面生成方法的较佳实施例，包括如下步骤：

步骤S10、基于至少包括名称、标题、图标以及数据库表的配置文件创建一用于生成移动端页面的项目；所述配置文件用于为后续导出项目包提供依据；

步骤S20、通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；

步骤S30、基于VUE对所述移动端页面进行二次开发；

步骤S40、基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成。

即本发明基于Vue3、uni-ui、uni-app的前端框架技术栈,使用uni-ui及uni-app来实现移动端页面的兼容性处理；页面生成器设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏，通过点击和拖拽组件列表区内的组件到页面设计区来组装移动端页面的整体结构内容，属性配置区展示当前选中组件的配置并提供更改，同时在页面预览区实时预览移动端页面在实际使用中的样式与交互效果，通过工具栏的保存按钮将页面的配置信息存储到数据库表中，在配置出完整的移动端页面后，可通过工具栏的项目打包功能将移动端页面导出为可部署运行的移动端H5项目包，也可以将移动端页面转换导出成VUE文件，提供开发人员本地二次开发后导入项目来处理较为复杂的页面，从而在一定程度上统一代码的风格规范，简化开发移动端页面的过程，降低开发人员的编码门槛，提升移动端页面的开发效率，达到降本提效的目的。

所述步骤S10还包括：配置所述项目的编辑权限，即提供项目管理功能，限制哪些开发人员可以配置及修改项目中的移动端页面。

所述步骤S20具体为：

通过设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于uni-ui封装有若干个组件；

通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中。

即根据uni-ui封装的组件来处理移动端下页面元素的展现，每个不同类型的组件均对应有默认属性，且在属性配置区提供有配置组件属性的配置项列表。进入页面生成器时会初始化移动端页面，生成移动端页面的配置对象，配置对象分为组件配置对象及组件列表配置对象；组件列表区罗列了所有类型的组件，点击组件或拖拽组件至页面设计区时，会根据组件的类型，获取对应的默认属性生成对应的组件配置对象，并将组件配置对象存入移动端页面的组件列表中。页面设计区及页面预览区根据页面组件列表中的组件配置对象渲染组件，根据组件配置对象从已封装的组件中按照组件的类型找到对应的组件，并传入组件配置对象渲染出对应的元素及控制元素的样式与交互，来组装移动端页面的结构。在属性配置区中根据组件配置对象生成组件属性配置项列表，通过属性配置区可修改组件的配置对象属性；开发人员在改变属性配置区中的配置对象属性时，会同步变更页面组件列表中的组件配置对象，也即同时作用影响在页面设计区及页面预览区中的组件元素，变更组件的样式与交互，在配置完整个移动端页面后，通过工具栏中的菜单点击保存填写页面信息后，通过工具栏将移动端页面的配置信息存储至数据库表中，使得开发人员可以在页面生成器中仅通过拖拽及一些属性配置区的配置操作，就能实现一个移动端页面的开发。

所述步骤S30具体为：

通过所述页面生成器将移动端页面导出为VUE文件进行本地的二次开发后，再导入二次开发后的所述VUE文件以生成新的移动端页面，将新的所述移动端页面的配置信息更新至数据库表。

对于一些复杂的交互逻辑，仅通过属性配置区的组件属性配置无法完全覆盖，因此属性配置区还提供了对页面属性配置对象的配置，包括对页面整体组件样式的控制及页面事件脚本的编写功能，并且可以在组件属性配置时为组件新增动作关联这些事件脚本，如按钮点击、输入框失焦等组件行为。在页面预览区中触发对应的组件行为时，会根据动作与脚本的关联关系执行对应的页面属性配置对象中的脚本来实现自定义的交互逻辑，同时内置一套组件之间交互的API，在提供开发人员定义一些组件动作逻辑交互的同时，减少开发人员的脚本编写难度，并规范脚本的编写风格；在一些组件功能无法支持需求的情况下，还可以将移动端页面导出为VUE文件进行本地的二次开发。

所述步骤S40具体为：

基于uni-app创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为JSON文件，通过所述打包模板将各所述JSON文件以及配置文件打包为项目包并导出，以完成移动端页面的生成。

所述打包模版内置了页面生成器中的所有组件及页面预览区的功能，部署所述项目后进行访问，根据所述项目的配置文件展示项目的标题及图标，根据所述页面访问的路径获取对应的JSON文件，并读取所述配置信息以加载显示出移动端页面的内容，以此实现所述项目打包后的运行功能。

本发明一种基于VUE的移动端页面生成***的较佳实施例，包括如下模块：

项目创建模块，用于基于至少包括名称、标题、图标以及数据库表的配置文件创建一用于生成移动端页面的项目；所述配置文件用于为后续导出项目包提供依据；

移动端页面组装模块，用于通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；

移动端页面再开发模块，用于基于VUE对所述移动端页面进行二次开发；

项目包导出模块，用于基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成。

即本发明基于Vue3、uni-ui、uni-app的前端框架技术栈,使用uni-ui及uni-app来实现移动端页面的兼容性处理；页面生成器设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏，通过点击和拖拽组件列表区内的组件到页面设计区来组装移动端页面的整体结构内容，属性配置区展示当前选中组件的配置并提供更改，同时在页面预览区实时预览移动端页面在实际使用中的样式与交互效果，通过工具栏的保存按钮将页面的配置信息存储到数据库表中，在配置出完整的移动端页面后，可通过工具栏的项目打包功能将移动端页面导出为可部署运行的移动端H5项目包，也可以将移动端页面转换导出成VUE文件，提供开发人员本地二次开发后导入项目来处理较为复杂的页面，从而在一定程度上统一代码的风格规范，简化开发移动端页面的过程，降低开发人员的编码门槛，提升移动端页面的开发效率，达到降本提效的目的。

所述项目创建模块还用于：配置所述项目的编辑权限，即提供项目管理功能，限制哪些开发人员可以配置及修改项目中的移动端页面。

所述移动端页面组装模块具体用于：

通过设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于uni-ui封装有若干个组件；

通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中。

即根据uni-ui封装的组件来处理移动端下页面元素的展现，每个不同类型的组件均对应有默认属性，且在属性配置区提供有配置组件属性的配置项列表。进入页面生成器时会初始化移动端页面，生成移动端页面的配置对象，配置对象分为组件配置对象及组件列表配置对象；组件列表区罗列了所有类型的组件，点击组件或拖拽组件至页面设计区时，会根据组件的类型，获取对应的默认属性生成对应的组件配置对象，并将组件配置对象存入移动端页面的组件列表中。页面设计区及页面预览区根据页面组件列表中的组件配置对象渲染组件，根据组件配置对象从已封装的组件中按照组件的类型找到对应的组件，并传入组件配置对象渲染出对应的元素及控制元素的样式与交互，来组装移动端页面的结构。在属性配置区中根据组件配置对象生成组件属性配置项列表，通过属性配置区可修改组件的配置对象属性；开发人员在改变属性配置区中的配置对象属性时，会同步变更页面组件列表中的组件配置对象，也即同时作用影响在页面设计区及页面预览区中的组件元素，变更组件的样式与交互，在配置完整个移动端页面后，通过工具栏中的菜单点击保存填写页面信息后，通过工具栏将移动端页面的配置信息存储至数据库表中，使得开发人员可以在页面生成器中仅通过拖拽及一些属性配置区的配置操作，就能实现一个移动端页面的开发。

所述移动端页面再开发模块具体用于：

通过所述页面生成器将移动端页面导出为VUE文件进行本地的二次开发后，再导入二次开发后的所述VUE文件以生成新的移动端页面，将新的所述移动端页面的配置信息更新至数据库表。

对于一些复杂的交互逻辑，仅通过属性配置区的组件属性配置无法完全覆盖，因此属性配置区还提供了对页面属性配置对象的配置，包括对页面整体组件样式的控制及页面事件脚本的编写功能，并且可以在组件属性配置时为组件新增动作关联这些事件脚本，如按钮点击、输入框失焦等组件行为。在页面预览区中触发对应的组件行为时，会根据动作与脚本的关联关系执行对应的页面属性配置对象中的脚本来实现自定义的交互逻辑，同时内置一套组件之间交互的API，在提供开发人员定义一些组件动作逻辑交互的同时，减少开发人员的脚本编写难度，并规范脚本的编写风格；在一些组件功能无法支持需求的情况下，还可以将移动端页面导出为VUE文件进行本地的二次开发。

所述项目包导出模块具体用于：

基于uni-app创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为JSON文件，通过所述打包模板将各所述JSON文件以及配置文件打包为项目包并导出，以完成移动端页面的生成。

所述打包模版内置了页面生成器中的所有组件及页面预览区的功能，部署所述项目后进行访问，根据所述项目的配置文件展示项目的标题及图标，根据所述页面访问的路径获取对应的JSON文件，并读取所述配置信息以加载显示出移动端页面的内容，以此实现所述项目打包后的运行功能。

综上所述，本发明的优点在于：

通过至少包括名称、标题、图标以及数据库表的配置文件创建一项目，通过设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏的页面生成器打开项目，而组件列表区基于uni-ui封装有若干个组件，在页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将移动端页面的配置信息存储至数据库表中，基于VUE对移动端页面进行二次开发，最后基于配置文件以及配置信息，通过uni-app创建的打包模板将移动端页面导出为项目包，以完成移动端页面的生成；即基于VUE(Vue3)、uni-ui以及uni-app的前端框架，对已有的组件功能进行二次封装整合，开发人员仅需要通过点击、拖拽组件到页面设计区进行配置，在属性配置区进行样式及交互的二次定义，仅需编写少量的脚本即可方便快捷的生成一个移动端页面；由于移动端页面由组件拼接而来，无需开发人员再进行组件的编写，提高了组件的复用率与易维护性，开发人员对组件的属性修改可以实时反馈在页面设计区及页面预览区，便于随时根据需求调整移动端页面；同时uni-ui和uni-app能处理部分移动端的兼容性问题，只要进行简单的可视化交互即可让移动端页面在移动端上运行，大大降低了开发人员的编码门槛，通过VUE文件的导出进行本地二次编码开发以满足业务需求的多样性，在达到项目标准化的同时降低了开发的成本，最终极大的提升了移动端页面开发和维护的便捷性以及效率。

虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。

Claims (10)

1.一种基于VUE的移动端页面生成方法，其特征在于：包括如下步骤：

步骤S10、基于至少包括名称、标题、图标以及数据库表的配置文件创建一用于生成移动端页面的项目；

步骤S20、通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；

步骤S30、基于VUE对所述移动端页面进行二次开发；

步骤S40、基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成。

2.如权利要求1所述的一种基于VUE的移动端页面生成方法，其特征在于：所述步骤S10还包括：配置所述项目的编辑权限。

3.如权利要求1所述的一种基于VUE的移动端页面生成方法，其特征在于：所述步骤S20具体为：

通过设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于uni-ui封装有若干个组件；

通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中。

4.如权利要求1所述的一种基于VUE的移动端页面生成方法，其特征在于：所述步骤S30具体为：

通过所述页面生成器将移动端页面导出为VUE文件进行本地的二次开发后，再导入二次开发后的所述VUE文件以生成新的移动端页面，将新的所述移动端页面的配置信息更新至数据库表。

5.如权利要求1所述的一种基于VUE的移动端页面生成方法，其特征在于：所述步骤S40具体为：

基于uni-app创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为JSON文件，通过所述打包模板将各所述JSON文件以及配置文件打包为项目包并导出，以完成移动端页面的生成。

6.一种基于VUE的移动端页面生成***，其特征在于：包括如下模块：

项目创建模块，用于基于至少包括名称、标题、图标以及数据库表的配置文件创建一用于生成移动端页面的项目；

移动端页面组装模块，用于通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；

移动端页面再开发模块，用于基于VUE对所述移动端页面进行二次开发；

项目包导出模块，用于基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成。

7.如权利要求6所述的一种基于VUE的移动端页面生成***，其特征在于：所述项目创建模块还用于：配置所述项目的编辑权限。

8.如权利要求6所述的一种基于VUE的移动端页面生成***，其特征在于：所述移动端页面组装模块具体用于：

通过设有组件列表区、页面设计区、页面预览区、属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于uni-ui封装有若干个组件；

通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中。

9.如权利要求6所述的一种基于VUE的移动端页面生成***，其特征在于：所述移动端页面再开发模块具体用于：

通过所述页面生成器将移动端页面导出为VUE文件进行本地的二次开发后，再导入二次开发后的所述VUE文件以生成新的移动端页面，将新的所述移动端页面的配置信息更新至数据库表。

10.如权利要求6所述的一种基于VUE的移动端页面生成***，其特征在于：所述项目包导出模块具体用于：

基于uni-app创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为JSON文件，通过所述打包模板将各所述JSON文件以及配置文件打包为项目包并导出，以完成移动端页面的生成。