CN112799670A - 一种统一多端逻辑开发的方法及系统 - Google Patents
一种统一多端逻辑开发的方法及系统 Download PDFInfo
- Publication number
- CN112799670A CN112799670A CN202110397788.4A CN202110397788A CN112799670A CN 112799670 A CN112799670 A CN 112799670A CN 202110397788 A CN202110397788 A CN 202110397788A CN 112799670 A CN112799670 A CN 112799670A
- Authority
- CN
- China
- Prior art keywords
- interface
- defining
- function
- terminal
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 238000011161 development Methods 0.000 title claims abstract description 42
- 230000006870 function Effects 0.000 claims abstract description 150
- 238000013499 data model Methods 0.000 claims abstract description 51
- 238000012545 processing Methods 0.000 claims abstract description 40
- 238000009877 rendering Methods 0.000 claims description 21
- 238000006243 chemical reaction Methods 0.000 claims description 20
- 238000004590 computer program Methods 0.000 claims description 9
- 230000001960 triggered effect Effects 0.000 claims description 9
- 230000008859 change Effects 0.000 claims description 6
- 238000004364 calculation method Methods 0.000 claims description 4
- 238000005096 rolling process Methods 0.000 claims description 4
- 238000004891 communication Methods 0.000 abstract description 12
- 238000005516 engineering process Methods 0.000 description 13
- 238000010586 diagram Methods 0.000 description 5
- 230000003993 interaction Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 241000282836 Camelus dromedarius Species 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 235000006481 Colocasia esculenta Nutrition 0.000 description 1
- 240000004270 Colocasia esculenta var. antiquorum Species 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000010422 painting Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000000638 solvent extraction Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computing Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种统一多端逻辑开发的方法及系统,属于计算机技术领域,所述方法包括定义多端统一规范;基于事件规范和页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;根据逻辑独立区域和控制独立区域确定界面展示规则;根据界面展示规则确定后端数据接口,并根据后端数据接口确定页面内的所有的网络请求函数和数据处理函数;基于网络请求函数和数据处理函数,构建多端的界面数据模型,并根据界面数据模型生成各端代码。本发明能够充分调整各个终端的开发人员资源并实现多端能够互相理解的代码逻辑,减少了大量的沟通成本及提升了开发效率。
Description
技术领域
本发明涉及计算机技术领域,尤其涉及一种统一多端逻辑开发的方法及系统。
背景技术
随着移动端技术的飞速发展,移动端的技术体系呈现出多种方案并存的局面,移动端开发面临着同一套方案要在多终端去实现,但是因为终端技术的不统一而形成了Android技术、Object-C技术、Html5技术、还有国内的微信小程序、支付宝小程序等小程序技术体系。
移动端因为开发技术的不同,一个单位同时需要多个技术小组去实现同一个方案,但是因为移动端的快速迭代等特点,一般的需求会有很多细节做不到位,比如交互的缺失。这样就导致不同的开发对需求理解的不同再加上实现技术的不同,每个技术的代码规范不同而导致各个终端编写的代码完全不同(比如变量命名不同),甚至实现的效果相差甚远,因此导致了大量的沟通成本和影响了开发效率。
发明内容
本发明提供一种统一多端逻辑开发的方法及系统,用以解决现有技术中多端开发导致大量的沟通成本和影响开发效率的问题,能够充分调整各个终端的开发人员资源并实现多端能够互相理解的代码逻辑。
本发明提供一种统一多端逻辑开发的方法,其特征在于,包括:
定义多端统一规范,所述规范包括事件规范和页面函数命名规范;
基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;
根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示;
根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数;
基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码。
根据本发明提供的统一多端逻辑开发的方法,所述根据所述界面数据模型生成各端代码之后,还包括:
将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染。
根据本发明提供的统一多端逻辑开发的方法,所述定义多端统一规范包括以下一种或多种组合:
定义页面首次加载统一函数为onLoad;
定义界面显示统一函数为onShow;
定义界面卸载统一函数为onUnload;
定义界面单击事件为onClick+含义;
定义界面双击事件为onDbClick+含义;
定义界面上的对话框输入事件为onInput+含义;
定义界面上的值改变事件为onChange++含义;
定义界面中触发的函数出现弹出对话框事件为onClickShow+含义+Dialog;
定义界面中触发的函数出现跳转界面事件为goto+含义+Page;
定义界面渲染的函数为render+区域名称;
定义网络请求GET函数为requestGet+后台路由最后一级名称;
定义网络请求POST函数为requestPost+后台路由最后一级名称;
定义网络请求回来的数据处理函数为resolve+含义+Data;
定义界面中辅助函数参与计算并返回数据的函数为get+含义。
根据本发明提供的统一多端逻辑开发的方法,所述界面展示规则包括以下一种或多种组合:
定义文字的长度;
定义文字超出长度的处理方式;
定义预设区域的文本最大行数、是否有滚动动画;
定义在预设条件下预设区域的显示隐藏和显示的各个状态样式。
根据本发明提供的统一多端逻辑开发的方法,所述界面数据模型的界面采用Page表示,所述界面包括单根ViewModel对象、events对象以及methods对象,其中所述ViewModel对象用于根据区域划分挂接各自区域的数据模型,所述events对象包括界面生命周期函数和界面的触发事件,所述methods对象包括网络请求函数、数据处理函数以及辅助函数。
根据本发明提供的统一多端逻辑开发的方法,所述根据所述界面数据模型生成各端代码包括:
根据所述界面数据模型,配置对应的模型转换工具;
根据所述模型转换工具,输出对应的各端代码。
根据本发明提供的统一多端逻辑开发的方法,所述将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染包括:
配置对应的用户界面转换工具;
根据所述用户界面转换工具将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染。
本发明还提供了一种统一多端逻辑开发的系统,包括:
统一规范定义模块,用于定义多端统一规范,所述规范包括事件规范和页面函数命名规范;
区域划分模块,用于基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;
界面展示定义模块,用于根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示;
数据接口模块,用于根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数;
生成模块,用于基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码以实现统一多端逻辑开发。
本发明还提供一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现如上述任一种所述统一多端逻辑开发的方法的步骤。
本发明还提供一种非暂态计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现如上述任一种所述统一多端逻辑开发的方法的步骤。
本发明提供的一种统一多端逻辑开发的方法及系统,通过定义多端统一规范,进行界面区域划分和定义界面展示规则,并基于后端数据接口构建界面数据模型,并由所述界面数据模型生成各端代码,能够充分调整各个终端的开发人员资源并实现多端能够互相理解的代码逻辑,减少了大量的沟通成本及提升了开发效率。
附图说明
为了更清楚地说明本发明或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本发明提供的统一多端逻辑开发的方法的流程示意图之一;
图2是本发明提供的统一多端逻辑开发的方法的流程示意图之二;
图3是本发明提供的生成各端代码的流程示意图;
图4是本发明提供的对各端界面进行渲染的流程示意图
图5是本发明提供的统一多端逻辑开发的系统的结构示意图;
图6是本发明提供的电子设备的结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合本发明中的附图,对本发明中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。
自从跨平台兴起以来,各种各样的框架层出不穷,比如近年来兴起了各个基于MVVM(Model-View-ViewModel,模型-视图-视图模型)的技术框架比如Vue(是一套构建用户界面的渐进式框架),React(是一个用于构建用户界面的JAVASCRIPT库)、小程序等技术,但是还有大量的基于Jquery(是一个快速、简洁的JavaScript框架)等技术构建的Html5(是下一代的HTML,也是构建Web内容的一种语言描述方式)页面。
另外基于Vue、React 也有很多框架也有横跨多端的技术比如Weex(是一种跨平台移动开发工具)、React Native(一种跨平台移动应用开发框架),但是这样也是需要进行大量的进行约束开发,另外这样需要大量的合作开发,大大加大了沟通成本,还有基于React、Vue 等进行跨小程序和H5的框架比如Taro(一种开放式跨端跨框架解决方案)、UniApp(一种开发跨平台应用的前端框架)等技术,这样就需要完全学习一门新框架并且针对不同的终端又要做兼容处理,工作量全部压在Html5开发人员。
因此,本发明有必要提供一种统一多端逻辑开发的方法及系统,能够充分调整各个终端的开发人员资源、最终实现多端能够互相能够理解的代码逻辑,可解决针对不同的端分别去编写多套代码导致成本高的问题。
下面结合图1-图6描述本发明的统一多端逻辑开发的方法及系统。
图1是本发明提供的统一多端逻辑开发的方法的流程示意图之一,如图所示。一种统一多端逻辑开发的方法,包括:
步骤101,定义多端统一规范,所述规范包括事件规范和页面函数命名规范。
由于不同的端有不同的需求,所以有必要定义多端统一规范,使得编码规范化,可读性高。
需要定义的规范包括界面的区域划分、界面的交互展示说明、界面的数据模型构建、界面的事件规范定义以及页面的函数的命名规范等。
优选的,所述定义多端统一规范可采用骆驼式命名法(Camel-Case),也称小驼峰式命名法。骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起,而构成的唯一识别字时,第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母,例如:myFirstName、myLastName,这样的变量名看上去就像骆驼峰一样此起彼伏,故得名。骆驼式命名法在许多新的函数库和Microsoft Windows这样的环境中使用得相当多。当然,本发明也可以使用其他命名法,比如匈牙利命名法、下划线命名法、帕斯卡命名法等,本发明不限于采用哪种命名法。以下以采用小驼峰式命名法为例进行说明。
其中,所述事件规范定义包括以下一种或多种组合:
定义页面首次加载统一函数为onLoad;
定义界面显示统一函数为onShow;
定义界面卸载统一函数为onUnload;
优选的,界面的所有事件对应的函数统一增加前缀,通过前缀可区分事件,如下:
定义界面单击事件为onClick+含义;
定义界面双击事件为onDbClick+含义;
定义界面上的对话框输入事件为onInput+含义;
定义界面上的值改变事件为onChange++含义;
优选的,针对界面中触发的事件,代码需设置简洁,最好不超过 20行,如果超过,可增加函数并将大量实际处理代码重新构成一个函数,函数命名需增加前缀do+含义。
定义界面中触发的函数出现弹出对话框事件为onClickShow+含义+Dialog;
定义界面中触发的函数出现跳转界面事件为goto+含义+Page。
其中,所述页面函数的命名规范的定义包括以下一种或多种组合:
所有的界面渲染都按照区域去实现,定义界面渲染的函数为render+区域名称;
定义网络请求GET函数为requestGet+后台路由最后一级名称;
定义网络请求POST函数为requestPost+后台路由最后一级名称;
定义网络请求回来的数据处理函数为resolve+含义+Data;
定义界面中辅助函数参与计算并返回数据的函数为get+含义。
本发明所述事件规范和页面的函数命名规范不限于上述所列举的,在此不再一一描述。通过上述统一规范的定义,有利于实现统一多端逻辑开发。
步骤102,基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域。
其中,界面的绘制是按照块状区域的形式进行组织的,称之为Area。
优选的,前端根据用户界面(UI)的效果划分出各自独立的大块区域,比如根据逻辑上独立和控制上独立进行划分区域。所述逻辑上独立指的是从业务上来说可以独立;所述控制上独立指的是界面显示上可能有要操作其变化显示和隐藏。
优选的,可采用Axture工具把UI图片导入后,采用画框和文字的方式,定义重要的区域范围和名称。
步骤103,根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示。
优选的,所述界面展示规则包括以下一种或多种组合:
定义文字的长度;
定义文字超出长度的处理方式,比如处理方式为滑动处理,还是截取处理;
定义预设区域的文本最大行数、是否有滚动动画等;
定义在预设条件下预设区域的显示隐藏和显示的各个状态样式。
步骤104,根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数。
前端和后端进行交互,前端按照约定请求URL路径,并传入相关参数,后端服务器接收请求,进行业务处理,返回数据给前端。
优选的,前端和后端进行交互,可采用Ajax和Json的方式,数据库如MySql为后端。后端用于处理数据,然后根据前端的请求,可以用Ajax来发送请求。Ajax是一种前后端数据交互方式,在不需要刷新整个页面的情况下异步的去请求去获取、交互数据。json是一个描述前后端数据交互的特定格式,这样就可以简单的解析数据,而不需要不一样的规范来转换数据格式。前端发来请求(Ajax),后端解析发来的请求字段,然后去数据库(MySql)取数据出来处理数据,把数据变成json格式给前端,前端接受数据(Ajax),解析数据(json),完成交互。
优选的,所述后端数据接口的网络请求函数可采用GET 和 POST。GET 和 POST是HTTP 协议中两种请求方式,其中POST方法请求报文第一行是这样的 POST /uri HTTP/1.1\r\n,GET方法请求报文第一行是这样的 GET /uri HTTP/1.1 \r\n。在数据查询时,可使用Get方式;在进行数据增删改时,可使用Post方式。
步骤105,基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码。
优选的,所述界面数据模型的界面采用Page表示,所述界面包括单根ViewModel对象、events对象以及methods对象。其中所述ViewModel对象可利用现代编辑器的提示特点,用于根据区域划分挂接各自区域的数据模型;所述events对象包括界面生命周期函数和界面的触发事件,所述methods对象包括网络请求函数、数据处理函数以及辅助函数。
所述界面数据模型采用单根模式,所述单根模式就是界面上只有一个ViewModel对象模型,采用单根好处是编写代码时不用记忆。
优选的,ViewModel 可直接采用后台接口返回的字段名和格式结构。但为了界面展示可增加辅助字段名称,界面展示辅助的字段名称统一要求前缀vdisplay,所有字段名统一要求用小写,针对字段后面重要字段、不容易与界面对照的增加注释。
以下为构建界面数据模型的代码示例,如下:
Page({
ViewModel:
{
vdisplaypagestatus: '0',//0表示没有乘车人,1:表示其他
vdisplaypricedetail: false,
preparetabs: {
businfoid,
scheduleid,
clienttype
},
bannerinfo: {
imageurl,
linkurl
},
},
methods: {
initUI: function () {
renderScheduleArea();
},
renderScheduleArea: function () {
},
renderBannerInfoArea: function () {
},
renderPassengersArea: function () {
var passenger = {};
for (var i = 0; i < ViewModel.passengers.length; i++) {
passenger = ViewModel.passengers[i];
if (passenger.vdisplaycheckstatus == true) {
renderPassengerItemHArea();
renderPassengerItemVArea();
}
}
},
renderPassengerItemHArea: function (passenger, inner) {
//当前乘车人设为选中状态
},
requestQueryUnuseCouponNew: function () {
}
},
events: {
onLoad: function (event) {
renderScheduleArea();
},
onShow: function (event) {
},
onClickPassengerItem: function () {
},
onClickDeletePassengerItem: function () {
},
doDeletePassengerItem: function () {
}
}
})。
通过上述构建的界面数据模型,可生成各端代码。
优选的,本发明的DSL语言采用了Javascript ,而在Html5中、微信小程序等小程序技术也都使用Javascript作为开发语言,这样使得本发明所述界面数据模型更方便,并且各端达成的共识小程序和H5代码可以直接采用。在构建界面数据模型阶段,除了确定基本数据模型即可完成逻辑的编写(即完成所有操作模型数据的函数的编写)。
优选的,可通过设置一个模型转换工具,实现界面数据模型转Android和Object-C的工作。
由此可知,本发明充分利用各个移动端的开发人员资源,与后端数据模型保持一致,前端增加注释后提高代码可读性,达成共识减少沟通成本,本发明不致力于解决个端的UI统一方案,而是充分发挥各个终端的平台特点,实现特定终端的UI展示以达到最佳体验。
图2是本发明提供的统一多端逻辑开发的方法的流程示意图之二,如图所示。
步骤101,定义多端统一规范,所述规范包括事件规范和页面函数命名规范。
步骤102,基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域。
步骤103,根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示。
步骤104,根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数。
步骤105,基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码。
步骤106,将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染。
优选的,多端开发人员可根据端的技术和特性采用对应的技术方案,编写界面UI,并完成界面数据模型中所有render各个区域的函数。
优选的,可通过设置一个UI转换工具,实现Html5到小程序的界面转换,其中所述小程序是采用Html5标准。
综上所述,与现有技术相比,本发明没有改变开发人员的组成,没有增加学习成本,本发明充分发挥了平台特点,积极调动了各端开发人员的积极性,达到了UI的方案统一,提高了开发效率,减少了沟通成本,同时经过实践,可大大缩短了测试时间和提高了测试效能。
图3是本发明提供的生成各端代码的流程示意图,如图所示。上述所述步骤105中,所述根据所述界面数据模型生成各端代码包括:
步骤301,根据所述界面数据模型,配置对应的模型转换工具。
优选的,所述模型转换工具包括代码生成器、部件库以及知识库,所述部件库用来存放可以直接引用的界面部件,并且每种界面部件分别与相应的源代码相对应。当在应用程序中选择某种界面部件后,相应的代码也加入到程序体中。所述知识库用来存放代码生成的语法规则、代码映射规则等。
步骤302,根据所述模型转换工具,输出对应的各端代码。
图4是本发明提供的对各端界面进行渲染的流程示意图,如图所示。上述所述步骤106中,所述将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染包括:
步骤401,配置对应的用户界面转换工具。
步骤402,根据所述用户界面转换工具将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染。
优选的,所述用户界面转换工具加载到HTML文件进行渲染步骤包括:步骤1,构建DOM树(DOM tree):从上到下解析HTML文档生成DOM节点树(DOM tree),也叫内容树(content tree)。步骤2,构建CSSOM(CSS Object Model)树:加载解析样式生成CSSOM树。步骤3,执行JavaScript:加载并执行JavaScript代码(包括内联代码或外联JavaScript文件)。步骤4,构建渲染树(render tree):根据DOM树和CSSOM树,生成渲染树(render tree)。渲染树:按顺序展示在屏幕上的一系列矩形,这些矩形带有字体,颜色和尺寸等视觉属性。步骤5,布局(layout):根据渲染树将节点树的每一个节点布局在屏幕上的正确位置。步骤6,绘制(painting):遍历渲染树绘制所有节点,为每一个节点适用对应的样式,这一过程是通过UI后端模块完成。
为了更友好的用户体验,浏览器会尽可能快的展现内容,而不会等到文档所有内容到达才开始解析和构建/布局渲染树,而是每次处理一部分,并展现在屏幕上。
下面对本发明提供的统一多端逻辑开发的系统进行描述,下文描述的统一多端逻辑开发的系统与上文描述的统一多端逻辑开发的方法可相互对应参照。
图5是本发明提供的统一多端逻辑开发的系统的结构示意图,如图所示。一种统一多端逻辑开发的系统500,所述系统包括统一规范定义模块510、区域划分模块511、界面展示定义模块512、数据接口模块513以及生成模块514。其中,
统一规范定义模块510,用于定义多端统一规范,所述规范包括事件规范和页面函数命名规范;
区域划分模块511,用于基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;
界面展示定义模块512,用于根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示;
数据接口模块513,用于根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数;
生成模块514,用于基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码以实现统一多端逻辑开发。
优选的,所述生成模块514,还用于将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染。
优选的,所述定义多端统一规范包括以下一种或多种组合:
定义页面首次加载统一函数为onLoad;
定义界面显示统一函数为onShow;
定义界面卸载统一函数为onUnload;
定义界面单击事件为onClick+含义;
定义界面双击事件为onDbClick+含义;
定义界面上的对话框输入事件为onInput+含义;
定义界面上的值改变事件为onChange++含义;
定义界面中触发的函数出现弹出对话框事件为onClickShow+含义+Dialog;
定义界面中触发的函数出现跳转界面事件为goto+含义+Page;
定义界面渲染的函数为render+区域名称;
定义网络请求GET函数为requestGet+后台路由最后一级名称;
定义网络请求POST函数为requestPost+后台路由最后一级名称;
定义网络请求回来的数据处理函数为resolve+含义+Data;
定义界面中辅助函数参与计算并返回数据的函数为get+含义。
优选的,所述界面展示规则包括以下一种或多种组合:
定义文字的长度;
定义文字超出长度的处理方式;
定义预设区域的文本最大行数、是否有滚动动画;
定义在预设条件下预设区域的显示隐藏和显示的各个状态样式。
优选的,所述界面数据模型的界面采用Page表示,所述界面包括单根ViewModel对象、events对象以及methods对象,其中所述ViewModel对象用于根据区域划分挂接各自区域的数据模型,所述events对象包括界面生命周期函数和界面的触发事件,所述methods对象包括网络请求函数、数据处理函数以及辅助函数。
优选的,所述生成模块514,还用于根据所述界面数据模型,配置对应的模型转换工具,并根据所述模型转换工具,输出对应的各端代码。
优选的,所述生成模块514,还用于配置对应的用户界面转换工具,并根据所述用户界面转换工具将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染。
图6示例了一种电子设备的实体结构示意图,如图6所示,该电子设备可以包括:处理器(processor)610、通信接口(Communications Interface)620、存储器(memory)630和通信总线640,其中,处理器610,通信接口620,存储器630通过通信总线640完成相互间的通信。处理器610可以调用存储器630中的逻辑指令,以执行所述统一多端逻辑开发的方法,包括:
定义多端统一规范,所述规范包括事件规范和页面函数命名规范;
基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;
根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示;
根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数;
基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码。
此外,上述的存储器630中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
另一方面,本发明还提供一种计算机程序产品,所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序,所述计算机程序包括程序指令,当所述程序指令被计算机执行时,计算机能够执行上述各方法所提供的所述统一多端逻辑开发的方法,包括:
定义多端统一规范,所述规范包括事件规范和页面函数命名规范;
基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;
根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示;
根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数;
基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码。
又一方面,本发明还提供一种非暂态计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现以执行上述各提供的所述统一多端逻辑开发的方法,包括:
定义多端统一规范,所述规范包括事件规范和页面函数命名规范;
基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;
根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示;
根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数;
基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码。
以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下,即可以理解并实施。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是:以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种统一多端逻辑开发的方法,其特征在于,包括:
定义多端统一规范,所述规范包括事件规范和页面函数命名规范;
基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;
根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示;
根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数;
基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码。
2.根据权利要求1所述的统一多端逻辑开发的方法,其特征在于,所述根据所述界面数据模型生成各端代码之后,还包括:
将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染。
3.根据权利要求1所述的统一多端逻辑开发的方法,其特征在于,所述定义多端统一规范包括以下一种或多种组合:
定义页面首次加载统一函数为onLoad;
定义界面显示统一函数为onShow;
定义界面卸载统一函数为onUnload;
定义界面单击事件为onClick+含义;
定义界面双击事件为onDbClick+含义;
定义界面上的对话框输入事件为onInput+含义;
定义界面上的值改变事件为onChange++含义;
定义界面中触发的函数出现弹出对话框事件为onClickShow+含义+Dialog;
定义界面中触发的函数出现跳转界面事件为goto+含义+Page;
定义界面渲染的函数为render+区域名称;
定义网络请求GET函数为requestGet+后台路由最后一级名称;
定义网络请求POST函数为requestPost+后台路由最后一级名称;
定义网络请求回来的数据处理函数为resolve+含义+Data;
定义界面中辅助函数参与计算并返回数据的函数为get+含义。
4.根据权利要求1所述的统一多端逻辑开发的方法,其特征在于,所述界面展示规则包括以下一种或多种组合:
定义文字的长度;
定义文字超出长度的处理方式;
定义预设区域的文本最大行数、是否有滚动动画;
定义在预设条件下预设区域的显示隐藏和显示的各个状态样式。
5.根据权利要求1所述的统一多端逻辑开发的方法,其特征在于,所述界面数据模型的界面采用Page表示,所述界面包括单根ViewModel对象、events对象以及methods对象,其中所述ViewModel对象用于根据区域划分挂接各自区域的数据模型,所述events对象包括界面生命周期函数和界面的触发事件,所述methods对象包括网络请求函数、数据处理函数以及辅助函数。
6.根据权利要求1所述的统一多端逻辑开发的方法,其特征在于,所述根据所述界面数据模型生成各端代码包括:
根据所述界面数据模型,配置对应的模型转换工具;
根据所述模型转换工具,输出对应的各端代码。
7.根据权利要求2所述的统一多端逻辑开发的方法,其特征在于,所述将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染包括:
配置对应的用户界面转换工具;
根据所述用户界面转换工具将所述各端代码进行解析并展示在页面上以实现对各端界面的渲染。
8.一种统一多端逻辑开发的系统,其特征在于,包括:
统一规范定义模块,用于定义多端统一规范,所述规范包括事件规范和页面函数命名规范;
区域划分模块,用于基于所述事件规范和所述页面函数命名规范,对用户界面进行区域划分,得到业务上独立的逻辑独立区域和界面显示需要操作的控制独立区域;
界面展示定义模块,用于根据所述逻辑独立区域和所述控制独立区域确定界面展示规则,所述界面展示规则用于定义界面上的元素展示;
数据接口模块,用于根据所述界面展示规则确定后端数据接口,并根据所述后端数据接口确定页面内的所有的网络请求函数和数据处理函数;
生成模块,用于基于所述网络请求函数和所述数据处理函数,构建多端的界面数据模型,并根据所述界面数据模型生成各端代码以实现统一多端逻辑开发。
9.一种电子设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述程序时实现如权利要求1至7任一项所述统一多端逻辑开发的方法的步骤。
10.一种非暂态计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至7任一项所述统一多端逻辑开发的方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110397788.4A CN112799670B (zh) | 2021-04-14 | 2021-04-14 | 一种统一多端逻辑开发的方法及系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110397788.4A CN112799670B (zh) | 2021-04-14 | 2021-04-14 | 一种统一多端逻辑开发的方法及系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112799670A true CN112799670A (zh) | 2021-05-14 |
CN112799670B CN112799670B (zh) | 2021-08-03 |
Family
ID=75811332
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110397788.4A Active CN112799670B (zh) | 2021-04-14 | 2021-04-14 | 一种统一多端逻辑开发的方法及系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112799670B (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113742361A (zh) * | 2021-08-25 | 2021-12-03 | 的卢技术有限公司 | Js开发环境下使用sql存储json数据的方法及系统 |
CN114661407A (zh) * | 2022-05-20 | 2022-06-24 | 浙江简捷物联科技有限公司 | 一种界面配置的方法、bms和存储介质 |
Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20190205101A1 (en) * | 2018-01-02 | 2019-07-04 | Samsung Electronics Co., Ltd. | Method, system and apparatus for generating source code from table and using the same |
CN110333999A (zh) * | 2019-05-06 | 2019-10-15 | 北京盛威时代科技有限公司 | 一种用于手机客户端进行测试环境切换的方法 |
CN110968325A (zh) * | 2019-10-28 | 2020-04-07 | 苏宁云计算有限公司 | 一种小程序转换方法及装置 |
CN111625310A (zh) * | 2020-05-11 | 2020-09-04 | 镇江纵陌阡横信息科技有限公司 | 一种通用型多端小程序系统 |
CN111666068A (zh) * | 2020-06-01 | 2020-09-15 | 北京软通智慧城市科技有限公司 | 一种平台开发框架、构建方法、设备及介质 |
US20200301939A1 (en) * | 2012-07-26 | 2020-09-24 | Mongodb, Inc. | Systems and methods for data visualization, dashboard creation and management |
CN111880785A (zh) * | 2020-06-23 | 2020-11-03 | 北京三快在线科技有限公司 | 程序代码转换方法、装置,电子设备 |
CN112416533A (zh) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | 在浏览器上运行应用程序的方法、装置及电子设备 |
CN112579092A (zh) * | 2020-12-07 | 2021-03-30 | 广东亿润网络技术有限公司 | 多功能小程序多端更新发布系统 |
CN112650529A (zh) * | 2020-12-31 | 2021-04-13 | 城云科技(中国)有限公司 | 可配置生成移动端app代码的系统及方法 |
-
2021
- 2021-04-14 CN CN202110397788.4A patent/CN112799670B/zh active Active
Patent Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20200301939A1 (en) * | 2012-07-26 | 2020-09-24 | Mongodb, Inc. | Systems and methods for data visualization, dashboard creation and management |
US20190205101A1 (en) * | 2018-01-02 | 2019-07-04 | Samsung Electronics Co., Ltd. | Method, system and apparatus for generating source code from table and using the same |
CN110333999A (zh) * | 2019-05-06 | 2019-10-15 | 北京盛威时代科技有限公司 | 一种用于手机客户端进行测试环境切换的方法 |
CN110968325A (zh) * | 2019-10-28 | 2020-04-07 | 苏宁云计算有限公司 | 一种小程序转换方法及装置 |
CN111625310A (zh) * | 2020-05-11 | 2020-09-04 | 镇江纵陌阡横信息科技有限公司 | 一种通用型多端小程序系统 |
CN111666068A (zh) * | 2020-06-01 | 2020-09-15 | 北京软通智慧城市科技有限公司 | 一种平台开发框架、构建方法、设备及介质 |
CN111880785A (zh) * | 2020-06-23 | 2020-11-03 | 北京三快在线科技有限公司 | 程序代码转换方法、装置,电子设备 |
CN112579092A (zh) * | 2020-12-07 | 2021-03-30 | 广东亿润网络技术有限公司 | 多功能小程序多端更新发布系统 |
CN112650529A (zh) * | 2020-12-31 | 2021-04-13 | 城云科技(中国)有限公司 | 可配置生成移动端app代码的系统及方法 |
CN112416533A (zh) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | 在浏览器上运行应用程序的方法、装置及电子设备 |
Non-Patent Citations (4)
Title |
---|
CHAMELEON社区: "Chameleon 简易教程", 《HTTPS://ZHUANLAN.ZHIHU.COM/P/56536565》 * |
IMYUNG: "前端技术框架选型,跨端框架盘点", 《HTTPS://JUEJIN.CN/POST/6854573218485927949》 * |
SIMON GRIMM: "Start, Build & Deploy Your First Capacitor PWA with Ionic", 《HTTPS://IONICFRAMEWORK.COM/BLOG/START-BUILD-DEPLOY-YOUR-FIRST-CAPACITOR-PWA-WITH-IONIC/》 * |
卤代烃: "跨端框架的核心技术到底是什么", 《HTTPS://ZHUANLAN.ZHIHU.COM/P/312903746》 * |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113742361A (zh) * | 2021-08-25 | 2021-12-03 | 的卢技术有限公司 | Js开发环境下使用sql存储json数据的方法及系统 |
CN113742361B (zh) * | 2021-08-25 | 2024-05-28 | 西藏宁算科技集团有限公司 | Js开发环境下使用sql存储json数据的方法及系统 |
CN114661407A (zh) * | 2022-05-20 | 2022-06-24 | 浙江简捷物联科技有限公司 | 一种界面配置的方法、bms和存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN112799670B (zh) | 2021-08-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10726195B2 (en) | Filtered stylesheets | |
CN112799670B (zh) | 一种统一多端逻辑开发的方法及系统 | |
US9152619B2 (en) | System and method for constructing markup language templates and input data structure specifications | |
CN101667171A (zh) | 生成报表的方法及报表生成装置 | |
CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
CN111459501A (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
US20230119466A1 (en) | Code block element for integrated graphic design system | |
CN112817568A (zh) | 微框架下的子应用样式设置方法及装置 | |
CN112783494A (zh) | 一种骨架屏自动生成方法、应用程序页面更新方法及装置 | |
CN114091423A (zh) | 一种自定义报表的生成方法、装置、设备及存储介质 | |
CN111831277B (zh) | 虚拟数据生成方法、系统、设备及计算机可读存储介质 | |
CN112000416B (zh) | 卡片视图生成方法、装置及计算机可读存储介质 | |
CN111880813B (zh) | 实现安卓卡片ui的方法、存储介质 | |
CN117519877A (zh) | 快应用卡片的渲染方法、装置、存储介质及电子设备 | |
CN111199568B (zh) | 矢量图的绘制方法、装置及计算机可读存储介质 | |
CN113094138A (zh) | 界面显示方法、装置、电子设备及存储介质 | |
CN111061466A (zh) | 行为控制脚本语言的自动化转化方法、系统、终端及介质 | |
CN107391116B (zh) | 一种组件帮助弹窗渲染方法及装置 | |
WO2023069561A1 (en) | Code block element for integrated graphic design system | |
CN114489619A (zh) | 一种界面视图显示方法及终端设备、计算机可读存储介质 | |
CN112799745B (zh) | 一种页面显示控制方法及装置 | |
CN113849164A (zh) | 数据处理方法、装置、电子设备和存储器 | |
CN113961279A (zh) | 页面渲染方法、装置、服务器和存储介质 | |
CN112632436A (zh) | 一种网页显示方法、装置、电子设备及存储介质 | |
CN116009863B (zh) | 前端页面渲染方法、设备及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |