终端的UI显示方法、装置、存储介质及终端与流程

终端的ui显示方法、装置、存储介质及终端
技术领域
1.本发明涉及计算机技术领域，尤其涉及一种终端的ui显示方法、装置、存储介质及终端。

背景技术：

2.目前，相关技术中具有多操作系统的终端上要实现用户界面(user interface,ui)的展示，通常需要针对每一个操作系统均设置一套ui显示逻辑，以便终端按照各操作系统对应的ui显示逻辑在各自操作系统中展示真实ui。由于每个操作系统均需设置一套ui显示逻辑，这样会造成开发工作量比较大。

技术实现要素：

3.有鉴于此，本发明提供一种终端的ui显示方法、装置、存储介质及终端，用以减少ui开发工作量。
4.具体地，本发明是通过如下技术方案实现的：
5.根据本发明的第一方面，提供一种终端的ui显示方法，所述终端包括至少两个操作系统，所述方法包括：
6.构建虚拟ui，并将所述虚拟ui解析成虚拟节点树；其中，所述虚拟ui包含目标ui的所有信息；
7.在接收到所述目标ui的显示指令时，采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树；
8.根据所述端上节点树，在所述终端上展示所述目标ui。
9.在一些实施例中，所述构建虚拟ui，包括：
10.采用用于构建ui的框架构建虚拟ui，所述框架为vue、react或angular。
11.在一些实施例中，所述将所述虚拟ui解析成虚拟节点树，包括：
12.采用javascript引擎将所述虚拟ui解析成虚拟节点树。
13.在一些实施例中，所述当前操作系统为安卓android操作系统，所述采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树，包括：
14.采用android操作系统中的j2v8引擎，将所述虚拟节点树解析成所述android操作系统中的端上节点树。
15.在一些实施例中，所述当前操作系统为ios操作系统，所述采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树，包括：
16.采用ios操作系统中的jscore，将所述虚拟节点树解析成所述ios操作系统中的端上节点树。
17.在一些实施例中，所述根据所述端上节点树，在所述终端上展示所述目标ui，包括：
18.采用yoga引擎，将所述端上节点树解析成用于在终端上展示的视图树；
19.基于所述视图树，渲染所述目标ui，并在所述终端上展示。
20.在一些实施例中，在所述终端上展示所述目标ui之后，所述方法还包括：
21.在监测到所述目标ui的信息发生变化时，通过diff算法计算所述虚拟节点树中被改变的部分；
22.对所述被改变的部分进行原生javascript的文档对象模型dom操作，然后下发所述被改变的部分的补丁；其中，原生javascript的dom操作包括如下至少一项操作：dom节点的创建、更改、删除、属性操作；
23.基于所述补丁，在所述当前操作系统中更新所述目标ui。
24.根据本发明的第二方面，提供了一种终端的ui显示装置，所述装置包括用于执行第一方面或第一方面的任意可能的实现方式中的终端的ui显示方法的模块。
25.根据本发明的第三方面，提供一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现第一方面或第一方面的任意可能的实现方式中的终端的ui显示方法的步骤。
26.根据本发明的第四方面，提供一种终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面或第一方面的任意可能的实现方式中的终端的ui显示方法的步骤。
27.本发明提供的技术方案至少带来以下有益效果：
28.本发明提供的技术方案通过在前端构建一套虚拟ui，并将虚拟ui解析成虚拟节点树，然后终端中的各操作系统对虚拟节点树进行解析，而后将其渲染成真实ui。从上述ui的显示过程可知，本发明提供的技术方案只需要设置一套虚拟ui逻辑，就可在终端的所有操作系统中实现ui的展示效果，因此可以大大减少ui开发工作量。
附图说明
29.图1为本发明实施例提供的一种终端的ui显示方法的流程示意图；
30.图2为本发明实施例中js引擎的架构图；
31.图3为本发明实施例提供的另一种终端的ui显示方法的流程示意图；
32.图4为本发明实施例提供的终端的ui显示方法的总体流程图；
33.图5为本发明实施例提供的终端的ui显示方法的原理图；
34.图6为本发明实施例提供的一种终端的ui显示装置的结构示意图；
35.图7为本发明实施例提供的另一种终端的ui显示装置的结构示意图；
36.图8为本发明实施例提供的终端的结构示意图。
具体实施方式
37.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。
38.在本发明使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数
形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
39.应当理解，尽管在本发明可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本发明范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”。
40.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。
41.参见图1，本发明实施例提供了一种终端的ui显示方法，所述终端包括至少两个操作系统，例如，终端包括android操作系统和ios操作系统，终端可以为智能手机、平板电脑(pad)、pda(personal digital assistant，个人数字助手)、可穿戴设备等，该方法可以包括如下步骤：
42.s101、构建虚拟ui，并将所述虚拟ui解析成虚拟节点树；其中，所述虚拟ui包含目标ui(即需在终端上显示的真实ui)的所有信息。
43.在一些实施例中，步骤s101中构建虚拟ui，包括：
44.采用用于构建ui的框架构建虚拟ui，所述框架为vue、react或angular。
45.例如，采用vue构建虚拟ui，来实现ui逻辑。即采用vue写templete，page等前端vue文件，作为ui的元素。
46.在一些实施例中，步骤s101中将所述虚拟ui解析成虚拟节点树，包括：
47.采用javascript引擎(javascriptframework，简称js引擎)将所述虚拟ui解析成虚拟节点树。
48.其中，虚拟节点树以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构，即虚拟节点树记录了整颗树的ui组织结构。
49.本实施例中，js引擎的架构图如图2所示，js引擎包括编译器和变化侦测模块，编译器被配置为将虚拟ui解析成虚拟节点树，变化侦测模块被配置为监测ui的信息变化。
50.s102、在接收到所述目标ui的显示指令时，采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树。
51.本实施例中，端上节点树也包含了目标ui的所有信息。需要指出的是，当前操作系统中解析的端上节点树的语言语法当前操作系统可以理解，而当前操作系统中解析的端上节点树的语言语法别的操作系统不一定能够理解，因此，本发明是采用当前操作系统中的解析引擎对虚拟节点树进行解析，然后在当前操作系统中进行渲染，从而得到真实的ui。
52.在一些实施例中，当前操作系统为安卓(android)操作系统，步骤s102中采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树，包括：
53.采用android操作系统中的j2v8引擎，将所述虚拟节点树解析成所述android操作系统中的端上节点树。
54.在另一些实施例中，当前操作系统为ios操作系统，步骤s102中采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树，包括：
55.采用ios操作系统中的jscore，将所述虚拟节点树解析成所述ios操作系统中的端上节点树。
56.s103、根据所述端上节点树，在所述终端上展示所述目标ui。
57.在一些实施例中，步骤s103中根据所述端上节点树，在所述终端上展示所述目标ui，包括：
58.采用yoga引擎，将所述端上节点树解析成用于在终端上展示的视图树(view tree)；
59.基于所述视图树，渲染所述目标ui，并在所述终端上展示。
60.例如，可以采用yoga引擎，从端上节点树的根节点开始解析，将端上节点树解析成用于在终端上展示的视图树，然后根据视图树在终端上展示目标ui。
61.在一些实施例中，如图3所示，在所述终端上展示所述目标ui之后，所述方法还包括：
62.s104、在监测到所述目标ui的信息发生变化时，通过diff算法计算所述虚拟节点树中被改变的部分。
63.例如，js引擎在监测到所述目标ui的信息发生变化时，会触发dom-diff，通过diff算法计算虚拟节点树中被改变的部分。
64.s105、对所述被改变的部分进行原生javascript的文档对象模型dom操作，然后下发所述被改变的部分的补丁(patch)；其中，原生javascript的dom操作包括如下至少一项操作：dom节点的创建、更改、删除、属性操作；
65.s106、基于所述补丁，在所述当前操作系统中更新所述目标ui。
66.本实施例中，在ui的信息发生变化时，通过diff算法计算被改变的部分，然后对被改变的部分进行操作，这样就不用重新渲染整个ui。
67.如图4、图5所示，下面以终端包括android操作系统和ios操作系统为例，说明本发明实施例提供的终端的ui显示方法的流程。
68.在编译阶段：
69.s201、采用vue构建虚拟ui，虚拟ui包含目标ui的所有信息；
70.s202、采用js引擎将虚拟ui解析成虚拟节点树；
71.在模版运行阶段：
72.若当前操作系统为android操作系统时，则执行步骤s203，若当前操作系统为ios操作系统时，则执行步骤s204。
73.s203、在接收到目标ui的显示指令时，采用android操作系统中的j2v8引擎，将所述虚拟节点树解析成所述android操作系统中的端上节点树；
74.s204、在接收到目标ui的显示指令时，采用ios操作系统中的jscore，将所述虚拟节点树解析成所述ios操作系统中的端上节点树；
75.在渲染阶段：
76.若当前操作系统为android操作系统时，则执行步骤s205和s206，若当前操作系统为ios操作系统时，则执行步骤s207和s208。
77.s205、采用yoga引擎，将端上节点树解析成用于在android操作系统中展示的视图树；
78.s206、基于该视图树，渲染目标ui，并在android操作系统中展示目标ui；
79.s207、采用yoga引擎，将端上节点树解析成用于在ios操作系统中展示的视图树；
80.s208、基于该视图树，渲染目标ui，并在ios操作系统中展示目标ui。
81.基于同一发明构思，如图6所示，本发明实施例还提供了一种终端的ui显示装置，所述终端包括至少两个操作系统，所述装置包括：构建模块11、第一编译模块12、第二编译模块13和展示模块14。
82.构建模块11，被配置为构建虚拟ui，其中，所述虚拟ui包含目标ui的所有信息；
83.第一编译模块12，被配置为将所述虚拟ui解析成虚拟节点树；
84.第二编译模块13，被配置为在接收到所述目标ui的显示指令时，采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树；
85.展示模块14，被配置为根据所述端上节点树，在所述终端上展示所述目标ui。
86.在一些实施例中，构建模块11被配置为：
87.采用用于构建ui的框架构建虚拟ui，所述框架为vue、react或angular。
88.在一些实施例中，第一编译模块12被配置为：
89.采用javascript引擎将所述虚拟ui解析成虚拟节点树。
90.在一些实施例中，当前操作系统为安卓android操作系统，第二编译模块13被配置为：
91.采用android操作系统中的j2v8引擎，将所述虚拟节点树解析成所述android操作系统中的端上节点树。
92.在一些实施例中，当前操作系统为ios操作系统，第二编译模块13被配置为：
93.采用ios操作系统中的jscore，将所述虚拟节点树解析成所述ios操作系统中的端上节点树。
94.在一些实施例中，展示模块14被配置为：
95.采用yoga引擎，将所述端上节点树解析成用于在终端上展示的视图树；
96.基于所述视图树，渲染所述目标ui，并在所述终端上展示。
97.在一些实施例中，如图7所示，上述终端的ui显示装置还包括：变化侦测模块15和更新模块16；
98.变化侦测模块15，被配置为在监测到所述目标ui的信息发生变化时，通过diff算法计算所述虚拟节点树中被改变的部分；对所述被改变的部分进行原生javascript的文档对象模型dom操作，然后下发所述被改变的部分的补丁；其中，原生javascript的dom操作包括如下至少一项操作：dom节点的创建、更改、删除、属性操作；
99.更新模块16，被配置为基于所述补丁，在所述当前操作系统中更新所述目标ui。
100.上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。
101.对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本发明方案的目的。本领域普通技术人员在不付
出创造性劳动的情况下，即可以理解并实施。
102.基于同一发明构思，本发明实施例还提供了一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任意可能的实现方式中的终端的ui显示方法的步骤。
103.可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。
104.基于同一发明构思，本发明实施例还提供了一种计算机程序产品，包括计算机程序，所述程序被处理器执行时实现上述任意可能的实现方式中的终端的ui显示方法的步骤。
105.基于同一发明构思，本发明实施例还提供了一种终端，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序；所述终端包括至少两个操作系统；
106.其中，所述处理器用于：
107.构建虚拟ui，并将所述虚拟ui解析成虚拟节点树；其中，所述虚拟ui包含目标ui的所有信息；
108.在接收到所述目标ui的显示指令时，采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树；
109.根据所述端上节点树，在所述终端上展示所述目标ui。
110.如图8所示，图8是本发明根据一示例性实施例示出的一种终端1700的一结构示意图。例如，终端1700可以是具有路由功能的移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
111.参照图8，终端1700可以包括以下一个或多个组件：处理组件1702，存储器1704，电源组件1706，多媒体组件1708，音频组件1710，输入/输出(i/o)的接口1712，传感器组件1714，以及通信组件1716。
112.处理组件1702通常控制终端1700的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件1702可以包括一个或多个处理器1720来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件1702可以包括一个或多个模块，便于处理组件1702和其他组件之间的交互。例如，处理组件1702可以包括多媒体模块，以方便多媒体组件1708和处理组件1702之间的交互。
113.存储器1704被配置为存储各种类型的数据以支持在终端1700的操作。这些数据的示例包括用于在终端1700上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器1704可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，磁盘或光盘。
114.电源组件1706为终端1700的各种组件提供电力。电源组件1706可以包括电源管理系统，一个或多个电源，及其他与为终端1700生成、管理和分配电力相关联的组件。
115.多媒体组件1708包括在所述终端1700和用户之间的提供一个输出接口的屏幕。在
一些实施例中，屏幕可以包括液晶显示器(lcd)和触摸面板(tp)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件1708包括一个前置摄像头和/或后置摄像头。当终端1700处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
116.音频组件1710被配置为输出和/或输入音频信号。例如，音频组件1710包括一个麦克风(mic)，当终端1700处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器1704或经由通信组件1716发送。在一些实施例中，音频组件1710还包括一个扬声器，用于输出音频信号。
117.i/o接口1712为处理组件1702和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。
118.传感器组件1714包括一个或多个传感器，用于为终端1700提供各个方面的状态评估。例如，传感器组件1714可以检测到终端1700的打开/关闭状态，组件的相对定位，例如所述组件为终端1700的显示器和小键盘，传感器组件1714还可以检测终端1700或终端1700一个组件的位置改变，用户与终端1700接触的存在或不存在，终端1700方位或加速/减速和终端1700的温度变化。传感器组件1714可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件1714还可以包括光传感器，如cmos或ccd图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件1714还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器，微波传感器或温度传感器。
119.通信组件1716被配置为便于终端1700和其他设备之间有线或无线方式的通信。终端1700可以接入基于通信标准的无线网络，如wifi，2g或3g，或它们的组合。在一个示例性实施例中，通信组件1716经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件1716还包括近场通信(nfc)模块，以促进短程通信。例如，在nfc模块可基于射频识别(rfid)技术，红外数据协会(irda)技术，超宽带(uwb)技术，蓝牙(bt)技术和其他技术来实现。
120.在示例性实施例中，终端1700可以被一个或多个应用专用集成电路(asic)、数字信号处理器(dsp)、数字信号处理设备(dspd)、可编程逻辑器件(pld)、现场可编程门阵列(fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行如图1所示的终端的ui显示方法。
121.在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器1704，上述指令可由终端1700的处理器1720执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。
122.以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

技术特征：

1.一种终端的ui显示方法，其特征在于，所述终端包括至少两个操作系统，所述方法包括：构建虚拟ui，并将所述虚拟ui解析成虚拟节点树；其中，所述虚拟ui包含目标ui的所有信息；在接收到所述目标ui的显示指令时，采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树；根据所述端上节点树，在所述终端上展示所述目标ui。2.根据权利要求1所述的方法，其特征在于，所述构建虚拟ui，包括：采用用于构建ui的框架构建虚拟ui，所述框架为vue、react或angular。3.根据权利要求1所述的方法，其特征在于，所述将所述虚拟ui解析成虚拟节点树，包括：采用javascript引擎将所述虚拟ui解析成虚拟节点树。4.根据权利要求1所述的方法，其特征在于，所述当前操作系统为安卓android操作系统，所述采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树，包括：采用android操作系统中的j2v8引擎，将所述虚拟节点树解析成所述android操作系统中的端上节点树。5.根据权利要求1所述的方法，其特征在于，所述当前操作系统为ios操作系统，所述采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树，包括：采用ios操作系统中的jscore，将所述虚拟节点树解析成所述ios操作系统中的端上节点树。6.根据权利要求1所述的方法，其特征在于，所述根据所述端上节点树，在所述终端上展示所述目标ui，包括：采用yoga引擎，将所述端上节点树解析成用于在终端上展示的视图树；基于所述视图树，渲染所述目标ui，并在所述终端上展示。7.根据权利要求1-6任一项所述的方法，其特征在于，在所述终端上展示所述目标ui之后，所述方法还包括：在监测到所述目标ui的信息发生变化时，通过diff算法计算所述虚拟节点树中被改变的部分；对所述被改变的部分进行原生javascript的文档对象模型dom操作，然后下发所述被改变的部分的补丁；其中，原生javascript的dom操作包括如下至少一项操作：dom节点的创建、更改、删除、属性操作；基于所述补丁，在所述当前操作系统中更新所述目标ui。8.一种终端的ui显示装置，其特征在于，所述终端包括至少两个操作系统，所述装置包括：构建模块，被配置为构建虚拟ui，其中，所述虚拟ui包含目标ui的所有信息；第一编译模块，被配置为将所述虚拟ui解析成虚拟节点树；第二编译模块，被配置为在接收到所述目标ui的显示指令时，采用当前操作系统中的
解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树；展示模块，被配置为根据所述端上节点树，在所述终端上展示所述目标ui。9.根据权利要求8所述的装置，其特征在于，所述装置还包括：变化侦测模块和更新模块；所述变化侦测模块，被配置为在监测到所述目标ui的信息发生变化时，通过diff算法计算所述虚拟节点树中被改变的部分；对所述被改变的部分进行原生javascript的文档对象模型dom操作，然后下发所述被改变的部分的补丁；其中，原生javascript的dom操作包括如下至少一项操作：dom节点的创建、更改、删除、属性操作；所述更新模块，被配置为基于所述补丁，在所述当前操作系统中更新所述目标ui。10.一种存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1-7任一项所述方法的步骤。11.一种终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-7任一项所述方法的步骤。

技术总结

本发明提供一种终端的UI显示方法、装置、存储介质及终端，用以减少UI开发工作量。所述终端包括至少两个操作系统，所述方法包括：构建虚拟UI，并将所述虚拟UI解析成虚拟节点树；其中，所述虚拟UI包含目标UI的所有信息；在接收到所述目标UI的显示指令时，采用当前操作系统中的解析引擎，将所述虚拟节点树解析成所述当前操作系统中的端上节点树；根据所述端上节点树，在所述终端上展示所述目标UI。在所述终端上展示所述目标UI。在所述终端上展示所述目标UI。