CN114356324A - 界面处理方法、装置、设备和存储介质 - Google Patents
界面处理方法、装置、设备和存储介质 Download PDFInfo
- Publication number
- CN114356324A CN114356324A CN202111547966.3A CN202111547966A CN114356324A CN 114356324 A CN114356324 A CN 114356324A CN 202111547966 A CN202111547966 A CN 202111547966A CN 114356324 A CN114356324 A CN 114356324A
- Authority
- CN
- China
- Prior art keywords
- interface
- rendering
- native
- layer
- interface resource
- 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.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 20
- 238000009877 rendering Methods 0.000 claims abstract description 124
- 238000011161 development Methods 0.000 claims abstract description 40
- 238000000034 method Methods 0.000 claims abstract description 26
- 238000012545 processing Methods 0.000 claims abstract description 12
- 238000010586 diagram Methods 0.000 description 13
- 230000006870 function Effects 0.000 description 6
- 238000004590 computer program Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 230000009471 action Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 4
- 238000013461 design Methods 0.000 description 4
- 238000004806 packaging method and process Methods 0.000 description 3
- 238000013475 authorization Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 101100498818 Arabidopsis thaliana DDR4 gene Proteins 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Images
Landscapes
- Stored Programmes (AREA)
Abstract
本申请实施例提供了一种界面处理方法、装置、设备和存储介质，终端设备的应用程序设置有软件开发工具包，所述终端设备使用原生编码语言和其他编码语言，所述软件开发工具包使用所述原生编码语言开发所得，所述方法包括：在接收到展示指定用户界面的请求时，从所述软件开发工具包中获取所述指定用户界面的原生界面资源；所述原生界面资源为原生编码语言对应的界面资源；通过所述软件开发工具包获取述指定用户界面的自定义界面资源；所述自定义界面资源为所述其他编码语言的界面资源；将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中。本申请实施例在混合开发的终端设备中，可以基于通过原生的SDK自定义UI界面，完全满足了用户任意的UI布局需求。
Description
技术领域
本申请涉及计算机技术领域，特别是涉及一种界面处理方法和装置、一种电子设备和一种存储介质。
背景技术
终端设备的应用程序(App，Application)的本质上是无数个UI(User Interface，用户界面)界面的集合。在实际中，应用程序的一些特殊UI界面，例如授权登录界面，需要通过唤起应用程序的SDK(Software Development Kit，软件开发工具包)来提供UI界面，使得用户能够通过UI界面进行相应的操作。
然而，部分终端设备是混合开发，即混合使用原生编码语言和其他编码语言，如果是使用原生编码语言的SDK要提供给混合开发的终端设备使用，一般需要封装成该终端设备的标准的插件模式，而一旦该SDK中有涉及UI界面的操作，由于终端设备和SDK使用的编码语言不同，因此无法将UI界面的相关参数全部传递至SDK中，导致UI界面可自定义性变差。
发明内容
本申请实施例提供了一种界面处理方法，以解决在混合开发的终端设备中，无法通过原生的SDK自定义UI界面的问题。
相应的，本申请实施例还提供了一种界面处理装置、一种电子设备以及一种存储介质，用以保证上述方法的实现及应用。
为了解决上述问题，本申请实施例公开了一种界面处理方法，终端设备的应用程序设置有软件开发工具包，所述终端设备使用原生编码语言和其他编码语言，所述软件开发工具包使用所述原生编码语言开发所得，所述方法包括：
在接收到展示指定用户界面的请求时，从所述软件开发工具包中获取所述指定用户界面的原生界面资源；所述原生界面资源为原生编码语言对应的界面资源；
通过所述软件开发工具包获取述指定用户界面的自定义界面资源；所述自定义界面资源为所述其他编码语言的界面资源；
将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中。
可选地，所述将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中，包括：
生成所述指定用户界面的渲染图层；所述渲染图层包括第一渲染图层和第二渲染图层，所述第一渲染图层为透明的图层，所述第一渲染图层位于所述第二渲染图层之上；
将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层。
可选地，所述原生编码语言至少包括Android语言和iOS语言；所述其他编码语言至少包括Web语言和类Web语言。
可选地，所述通过所述软件开发工具包获取述指定用户界面的自定义界面资源，包括：
通过所述软件开发工具包中的指定接口参数，从服务器中获取所述指定用户界面的自定义界面资源。
可选地，所述终端设备内置混合开发框架，所述自定义界面资源为使用所述混合开发框架所得，所述将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层，包括：
通过所述混合开发框架将所述原生界面资源渲染至所述第一渲染图层，以及通过所述混合开发框架将所述自定义界面资源渲染至所述第二渲染图层。
可选地，所述混合开发框架包括weex框架和vue框架。
本申请实施例还公开了一种界面处理装置，终端设备的应用程序设置有软件开发工具包，所述终端设备使用原生编码语言和其他编码语言，所述软件开发工具包使用所述应用程序使用的所述原生编码语言开发所得，所述装置包括：
界面请求模块，用于在接收到展示指定用户界面的请求时，从所述软件开发工具包中获取所述指定用户界面的原生界面资源；所述原生界面资源为原生编码语言对应的界面资源；
界面资源获取模块，用于通过所述软件开发工具包获取述指定用户界面的自定义界面资源；所述自定义界面资源为所述其他编码语言的界面资源；
界面渲染模块，用于将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中。
可选地，所述界面渲染模块，用于生成所述指定用户界面的渲染图层；所述渲染图层包括第一渲染图层和第二渲染图层，所述第一渲染图层为透明的图层，所述第一渲染图层位于所述第二渲染图层之上；将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层。
可选地，所述界面资源获取模块，用于通过所述软件开发工具包中的指定接口参数，从服务器中获取所述指定用户界面的自定义界面资源。
可选地，所述终端设备内置混合开发框架，所述自定义界面资源为使用所述混合开发框架所得，所述界面渲染模块，用于通过所述混合开发框架将所述原生界面资源渲染至所述第一渲染图层，以及通过所述混合开发框架将所述自定义界面资源渲染至所述第二渲染图层。
本申请实施例还公开了一种电子设备，包括：处理器；和存储器，其上存储有可执行代码，当所述可执行代码被执行时，使得所述处理器执行如本申请实施例中一个或多个所述的界面处理方法。
本申请实施例还公开了一个或多个机器可读介质，其上存储有可执行代码，当所述可执行代码被执行时，使得处理器执行如本申请实施例中一个或多个所述的界面处理方法。
与现有技术相比，本申请实施例包括以下优点：
在本申请实施例中，在混合使用原生编码语言和其他编码语言的终端设备，即混合开发的终端设备，该终端设备中的应用程序设置有软件开发工具包，其中，软件开发工具包使用应用程序使用的原生编码语言开发所得，在接收到展示指定用户界面的请求时，从软件开发工具包中获取指定用户界面的原生界面资源，并通过软件开发工具包获取指定用户界面的自定义界面资源，然后将原生界面资源和自定义界面资源分别渲染至指定用户界面的不同的渲染图层中，以得到指定用户界面。本申请实施例在混合开发的终端设备中，可以基于通过原生的SDK自定义UI界面，完全满足了用户任意的UI布局需求。
附图说明
图1是本申请的一种界面处理方法实施例的步骤流程图；
图2是本申请的另一种界面处理方法实施例的步骤流程图；
图3是本申请的一种授权登录界面布局原理的示意图；
图4是本申请的一种使用Web端的UI组件自定义的用户界面的示意图；
图5是本申请的再一种界面处理装置可选实施例的结构框图；
图6是本申请一实施例提供的装置的结构示意图。
具体实施方式
为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。
对于本申请实施例涉及的一些技术术语进行说明：
SDK(Software Development Kit，软件开发工具包)是指辅助开发某一类应用软件的软件包、软件框架、硬件平台、操作***等建立应用软件时的相关文档、范例和工具的集合。
原生开发：基于终端设备的原生操作***，比如Android(安卓)或者iOS(苹果)等原生编程语言进行开发，原生开发的应用程序可以直接运行在原生操作***中。
混合开发：采用非原生编程语言，例如Web语言或者类Web语言，与终端设备的原生编程语言混合使用进行开发，混合开发的部分应用程序运行在浏览器内核中或者一些js引擎中，一般通过jsbrridge的方式与原生操作***进行交互。
Web组件：为了方便后续描述，将混合开发的终端设备中使用的UI组件称为Web组件。
目前行业内对混合开发的终端设备的UI界面自定义，通常采用的一种方案是，在SDK插件内，按照原生操作***常用的UI组件进行封装，封装成Web组件，并且将其经常会用到的一些布局参数封装成组件的参数，通过Json(JavaScript Object Notation,JS对象简谱)文件进行传递。
然而，该方案有个很明显的缺点，由于不可能对原生操作***所有的UI组件进行转换封装，并且也不可能对原生操作***的UI组件的所有属性进行参数化封装，因此它所能实现的界面效果是有限的，稍微复杂一点的界面布局就无法实现，进而导致无法完全满足客户的界面布局需求，只能迁就原生操作***的组件的能力来进行界面设计调整。
另外，在应用程序中不能够直接开放一些重要的能力，例如授权登录的能力，因此需要通过SDK来提供一个指定用户界面实现(例如实现授权登录的能力的用户界面)，通过唤起应用程序的SDK内置的授权登录界面进行操作。然而每个用户的应用的场景不一样，每个应用程序的设计风格也不同，需要授权登录界面与应用程序的整体风格保持一致，因此对授权登录界面自定义的能力有很高的要求。然而在混合开发场景下，UI开发与原生操作***的UI开发完全不同，因此没办法做到高自由度的用户界面自定义。
针对上述问题，本申请提出一种界面处理方法，通过放弃对原生操作***的界面资源(UI组件)的封装，取而代之的是通过View(视图)的布局层次原理，将用户界面自定义的能力，完全交给了Web端的界面资源，即浏览器内核的界面资源，因此无需迁就原生操作***的组件的能力来进行界面设计调整，可以完全满足用户任意的界面布局需求，实现了高自由度的用户界面自定义，为用户带来了更好的用户体验。
参照图1，是本申请的一种界面处理方法实施例的步骤流程图，终端设备的应用程序设置有软件开发工具包，所述终端设备使用原生编码语言和其他编码语言，所述软件开发工具包使用所述应用程序使用的所述原生编码语言开发所得。
其中，终端设备可以是手机、平板电脑、个人数字助理、个人计算机等等。终端设备的操作***是原生操作***，例如可以包括Android(安卓)、IOS(苹果)等等。
在本申请实施例中，终端设备是混合使用原生编码语言和其他编码语言的终端设备，即混合开发的终端设备,其中，所述原生编码语言至少包括Android语言和iOS语言；所述其他编码语言至少包括Web语言和类Web语言。应用程序是使用终端设备的原生操作***开发的应用程序，例如可以是通过Android开发的应用程序、通过IOS开发的应用程序等等，其中，应用程序设置有SDK，并且，该SDK可以是使用应用程序使用的原生编码语言开发所得，即，如果应用程序是通过Android开发，则该应用程序的SDK也是Android开发，如果应用程序是通过IOS开发，则该应用程序的SDK也是IOS开发。
具体而言，所述界面处理方法可以包括如下步骤：
步骤102、在接收到展示指定用户界面的请求时，从所述软件开发工具包中获取所述指定用户界面的原生界面资源；所述原生界面资源为原生编码语言对应的界面资源。
其中，指定用户界面可以是应用程序的主界面，或者应用程序的子界面，具体可以是应用程序的一些特殊UI界面，例如号码认证中授权登录界面，需要通过唤起应用程序的SDK来提供给用户，使得用户可以基于该用户界面进行相应的操作。指定用户界面必须由SDK厂商提供，而不是开发人员自己实现，因此在相关技术中，开发人员只能基于SDK提供的接口对指定用户界面可改动部分进行界面的自定义。原生界面资源为原生操作***的界面资源，例如原生操作***中的UI组件。组件是指将一段或几段完成各自功能的代码段封装为一个或几个独立的部分，UI组件包含了一个或几个具有各自功能的代码段，基于UI组件可以完成用户界面的显示。
在本申请实施例中，在SDK中，针对指定用户界面，可以按照原生操作***的UI组件进行封装，封装成Web组件，并且将Web组件需要使用到的布局参数封装成组件的参数，并通过Json文件进行布局参数的传递。
在本申请实施例中，在接收到展示指定用户界面的请求时，由于需要通过SDK来提供该用户界面，因此可以先从SDK中获取到与指定用户界面相关的UI组件，以及该UI组件的布局参数，从而可以基于布局参数和UI组件布局生成指定用户界面。
步骤104、通过所述软件开发工具包获取述指定用户界面的自定义界面资源；所述自定义界面资源为所述其他编码语言的界面资源。
其中，自定义界面资源是指非原生操作***的界面资源，例如Web端的使用Web语言和类Web语言的UI组件。
在实际开发过程中，开发人员可以将希望在指定用户界面上展示的内容，打包至由Web端的UI组件(html5、css、js)构建的资源文件中，然后可以将包含Web端的UI组件的资源文件传递给SDK。因此，在本申请实施例中，可以通过SDK来获取到除了原生操作***的UI组件之外的Web端的UI组件，通过利用Web端的UI组件，可以实现Web所有的UI能力，从而实现复杂的界面布局，而无需局限于原生操作***的UI组件的能力。
步骤106、将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中。
在本申请实施例中，对于原生操作***的UI组件和Web端的UI组件，可以分别渲染至指定用户界面的不同的渲染图层中，得到最终在终端设备中提供给用户的指定用户界面。示例性地，指定用户界面可以生成两个渲染图层，然后可以将原生操作***的UI组件布局渲染至其中一个渲染图层，然后将Web端的UI组件布局渲染至另一个渲染图层，两个渲染图层。
在上述界面处理方法中，在混合使用原生编码语言和其他编码语言的终端设备，即混合开发的终端设备，该终端设备中的应用程序设置有软件开发工具包，其中，软件开发工具包使用应用程序使用的原生编码语言开发所得，在接收到展示指定用户界面的请求时，从软件开发工具包中获取指定用户界面的原生界面资源，并通过软件开发工具包获取指定用户界面的自定义界面资源，然后将原生界面资源和自定义界面资源分别渲染至指定用户界面的不同的渲染图层中，以得到指定用户界面。本申请实施例在混合开发的终端设备中，可以基于通过原生的SDK自定义UI界面，完全满足了用户任意的UI布局需求。
参照图2，是本申请的另一种界面处理方法实施例的步骤流程图，终端设备的应用程序设置有软件开发工具包，所述终端设备使用原生编码语言和其他编码语言，所述软件开发工具包使用所述应用程序使用的所述原生编码语言开发所得，所述界面处理方法可以包括如下步骤：
步骤202、在接收到展示指定用户界面的请求时，从所述软件开发工具包中获取所述指定用户界面的原生界面资源；所述原生界面资源为原生编码语言对应的界面资源。
步骤204、通过所述软件开发工具包中的指定接口参数，从服务器中获取所述指定用户界面的自定义界面资源；所述自定义界面资源为所述其他编码语言的界面资源。
步骤206、生成所述指定用户界面的渲染图层；所述渲染图层包括第一渲染图层和第二渲染图层，所述第一渲染图层为透明的图层，所述第一渲染图层位于所述第二渲染图层之上。
步骤208、将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层。
在原生操作***的终端设备中，开发人员是可以在SDK中使用原生操作***的UI组件，然而如果终端设备为混合开发，则而原生操作***的原生编程语言无法与混合开发语言互通，因此在本发明实施例中，所以用webview(网页视图)作了媒介，通过利用Web端的UI组件来进行自定义界面的布局，转换了指定用户界面的布局方式。因此，在本申请实施例中，针对指定用户界面，对于一些必须由原生操作***的UI组件的内容，可以通过SDK内置的原生操作***的UI组件生成，而对于一些自定义UI组件的内容，则可以通过SDK，从服务器中获取到Web端的UI组件，实现自定义的界面布局。
在本申请实施例中，可以生成指定用户界面的至少两个渲染图层，例如，第一渲染图层和第二渲染图层，渲染图层之间互不影响对方的UI组件的布局。具体地，第一渲染图层可以位于位于第二渲染图层之上，并且该第一渲染图层可以设置为具有一定透明度，例如完全透明，从而在底层的第二渲染图层的内容可以通过第一渲染图层展示在终端设备的屏幕中。可选地，第一渲染图层和第二渲染图层的大小可以与终端设备的屏幕尺寸大小相同。
在本申请实施例中，放弃对原生操作***的UI组件的封装，通过View的布局层次原理，将自定义的能力，完全交给了Web端的UI组件。具体地，参照图3，是本申请的一种授权登录界面布局原理的示意图，底层是原生操作***的父View，全屏大小，然后在父View中里增加一层与父View同样大小的WebView(第二渲染图层)，该View之上是与其同为兄弟View的原生View(第一渲染图层)，这一层是透明的，为了能够让其底层WebView的内容无差别的展示到屏幕上。具体地，在第一渲染图层中可以布局授权登录界面必须的原生操作***的UI组件，例如“Title”、“一键登录按钮”、“隐私协议”等等，在第二渲染图层中可以布局希望在授权登录界面展示的内容，例如视频、图片等等。
基于以上布局，开发人员就可以通过中间层的WebView来完全自定义界面的UI样式，实现一些复杂的界面布局，而无需迁就原生操作***的UI组件的能力。
在本申请的一种可选实施例中，所述终端设备内置混合开发框架，所述自定义界面资源为使用所述混合开发框架所得，所述步骤208、将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层，可以包括如下步骤：
通过所述混合开发框架将所述原生界面资源渲染至所述第一渲染图层，以及通过所述混合开发框架将所述自定义界面资源渲染至所述第二渲染图层。
在本申请的一种可选实施例中，所述混合开发框架可以包括weex框架和vue框架。
在具体实现中，虽然借助WebView将原生操作***的界面布局转化成了Web端的界面布局，可以让混合开发者以Web语言或者类Web语言来定义指定用户界面中的UI组件，由于原生操作***的Webview会有一定的适配问题和性能问题，为了使得用户体验更好，在本申请实施例中进一步利用了混合开发框架，例如Dcloud内部集成的Weex框架。
Dcloud是混合开发的一个平台，大部分的开发人员都是基于这个平台进行混合开发的。Weex框架是一个混合开发框架，支持开发人员以Web的语言或者Web化(类Web语言)的Weex语言对用户界面进行开发，基于Weex框架能够提供更好的适配性和性能。
因此在本申请实施例中可以支持使用weex或者vue等框架编译好的界面资源，直接对指定用户界面进行渲染，内部依赖了Dcloud内置集成的weex框架进行渲染，从而使用户界面的表现与原生操作***的用户界面无差别化，用户界面与应用程序的整体风格保持一致。
应用本申请实施例，在自定义指定用户界面时，没有使用原生操作***的UI组件，而是利用原生操作***内置的webview及weex框架，将对指定用户界面的界面布局改为完全由Web端的UI组件实现，这样就不会受到原生操作***的UI组件的丰富度及属性的限制，从而开发人员可以无需迁就原生操作***的UI组件的能力，可以灵活进行界面设计，自由布局。
综上，在本申请实施例中，实现用户界面的处理内容包括：1、开发人员根据自己要定义的UI效果，通过weex工程实现出来，所有代码都为web代码。2、通过weex工具将UI代码编译成一个js bundle文件；(该部分也可通过原生的html5来实现)。3、将js文件放到dcloud app的工程中进行打包渲染，并且通过SDK指定的接口参数，将js的路径传递给SDK。4、SDK通过内置的weex框架或者webview(如果传递的是html文件)进行分别渲染，得到完整的用户界面。
为了使本领域技术人员更好地理解本申请实施例，以下采用一个具体的示例进行说明。参照图4，是本申请的一种使用Web端的UI组件自定义的指定用户界面的示意图。SDK内置的一些原生操作***的UI组件，一般要求必须展示，且有一定的规范要求，仅能做一些字***置的简单变更，例如手机号掩码和登录按钮。假如开发人员还需要在用户界中增加其他的UI组件的布局，比如增加一个背景视频或者增加轮播的背景图片，以及一个切换到其他应用程序的登录按钮，则开发者需要将其他的UI组件，例如Web端的UI组件，统一放到一个单独的html文件或者是由weex编译出来的js bundle中。
SDK内置的原生操作***的UI组件与自定义的Web端的UI组件渲染方式不同，开发人员可以在用户界面中自由定义希望展示的UI组件，在分别将原生操作***的UI组件和Web端的UI组件分别渲染到不同的用户界面的渲染图层后，就可以得到一个完整的用户界面，当该用户界面在终端设备的屏幕中展示时，用户视角看起来就是一个完整的界面。
需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本申请实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本申请实施例所必须的。
在上述实施例的基础上，本实施例还提供了一种界面处理装置，应用于移动终端、服务器等电子设备中。
参照图5，示出了本申请的一种界面处理装置实施例的结构框图，终端设备的应用程序设置有软件开发工具包，所述终端设备使用原生编码语言和其他编码语言，所述软件开发工具包使用所述应用程序使用的所述原生编码语言开发所得，所述装置具体可以包括如下模块：
界面请求模块502，用于在接收到展示指定用户界面的请求时，从所述软件开发工具包中获取所述指定用户界面的原生界面资源；所述原生界面资源为原生编码语言对应的界面资源；
界面资源获取模块504，用于通过所述软件开发工具包获取述指定用户界面的自定义界面资源；所述自定义界面资源为所述其他编码语言的界面资源；
界面渲染模块506，用于将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中。
在本申请的一种可选实施例中，所述界面渲染模块506，用于生成所述指定用户界面的渲染图层；所述渲染图层包括第一渲染图层和第二渲染图层，所述第一渲染图层为透明的图层，所述第一渲染图层位于所述第二渲染图层之上；将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层。
在本申请的一种可选实施例中，所述原生编码语言至少包括Android语言和iOS语言；所述其他编码语言至少包括Web语言和类Web语言。
在本申请的一种可选实施例中，所述界面资源获取模块504，用于通过所述软件开发工具包中的指定接口参数，从服务器中获取所述指定用户界面的自定义界面资源。
在本申请的一种可选实施例中，所述终端设备内置混合开发框架，所述自定义界面资源为使用所述混合开发框架所得，所述界面渲染模块506，用于通过所述混合开发框架将所述原生界面资源渲染至所述第一渲染图层，以及通过所述混合开发框架将所述自定义界面资源渲染至所述第二渲染图层。
在本申请的一种可选实施例中，所述混合开发框架包括weex框架和vue框架。
综上，在本申请实施例中，在混合使用原生编码语言和其他编码语言的终端设备，即混合开发的终端设备，该终端设备中的应用程序设置有软件开发工具包，其中，软件开发工具包使用应用程序使用的原生编码语言开发所得，在接收到展示指定用户界面的请求时，从软件开发工具包中获取指定用户界面的原生界面资源，并通过软件开发工具包获取指定用户界面的自定义界面资源，然后将原生界面资源和自定义界面资源分别渲染至指定用户界面的不同的渲染图层中，以得到指定用户界面。本申请实施例在混合开发的终端设备中，可以基于通过原生的SDK自定义UI界面，完全满足了用户任意的UI布局需求。
本申请实施例还提供了一种非易失性可读存储介质，该存储介质中存储有一个或多个模块(programs)，该一个或多个模块被应用在设备时，可以使得该设备执行本申请实施例中各方法步骤的指令(instructions)。
本申请实施例提供了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得电子设备执行如上述实施例中一个或多个所述的方法。本申请实施例中，所述电子设备包括终端设备、服务器(集群)等各类型的设备。
本公开的实施例可被实现为使用任意适当的硬件，固件，软件，或及其任意组合进行想要的配置的装置，该装置可包括终端设备、服务器(集群)等电子设备。图6示意性地示出了可被用于实现本申请中所述的各个实施例的示例性装置600。
对于一个实施例，图6示出了示例性装置600，该装置具有一个或多个处理器602、被耦合到(一个或多个)处理器602中的至少一个的控制模块(芯片组)604、被耦合到控制模块604的存储器606、被耦合到控制模块604的非易失性存储器(NVM)/存储设备608、被耦合到控制模块604的一个或多个输入/输出设备610，以及被耦合到控制模块604的网络接口612。
处理器602可包括一个或多个单核或多核处理器，处理器602可包括通用处理器或专用处理器(例如图形处理器、应用处理器、基频处理器等)的任意组合。在一些实施例中，装置600能够作为本申请实施例中所述终端设备、服务器(集群)等设备。
在一些实施例中，装置600可包括具有指令614的一个或多个计算机可读介质(例如，存储器606或NVM/存储设备608)以及与该一个或多个计算机可读介质相合并被配置为执行指令614以实现模块从而执行本公开中所述的动作的一个或多个处理器602。
对于一个实施例，控制模块604可包括任意适当的接口控制器，以向(一个或多个)处理器602中的至少一个和/或与控制模块604通信的任意适当的设备或组件提供任意适当的接口。
控制模块604可包括存储器控制器模块，以向存储器606提供接口。存储器控制器模块可以是硬件模块、软件模块和/或固件模块。
存储器606可被用于例如为装置600加载和存储数据和/或指令614。对于一个实施例，存储器606可包括任意适当的易失性存储器，例如，适当的DRAM。在一些实施例中，存储器606可包括双倍数据速率类型四同步动态随机存取存储器(DDR4SDRAM)。
对于一个实施例，控制模块604可包括一个或多个输入/输出控制器，以向NVM/存储设备608及(一个或多个)输入/输出设备610提供接口。
例如，NVM/存储设备608可被用于存储数据和/或指令614。NVM/存储设备608可包括任意适当的非易失性存储器(例如，闪存)和/或可包括任意适当的(一个或多个)非易失性存储设备(例如，一个或多个硬盘驱动器(HDD)、一个或多个光盘(CD)驱动器和/或一个或多个数字通用光盘(DVD)驱动器)。
NVM/存储设备608可包括在物理上作为装置600被安装在其上的设备的一部分的存储资源，或者其可被该设备访问可不必作为该设备的一部分。例如，NVM/存储设备608可通过网络经由(一个或多个)输入/输出设备610进行访问。
(一个或多个)输入/输出设备610可为装置600提供接口以与任意其他适当的设备通信，输入/输出设备610可以包括通信组件、音频组件、传感器组件等。网络接口612可为装置600提供接口以通过一个或多个网络通信，装置600可根据一个或多个无线网络标准和/或协议中的任意标准和/或协议来与无线网络的一个或多个组件进行无线通信，例如接入基于通信标准的无线网络，如WiFi、2G、3G、4G、5G等，或它们的组合进行无线通信。
对于一个实施例，(一个或多个)处理器602中的至少一个可与控制模块604的一个或多个控制器(例如，存储器控制器模块)的逻辑封装在一起。对于一个实施例，(一个或多个)处理器602中的至少一个可与控制模块604的一个或多个控制器的逻辑封装在一起以形成***级封装(SiP)。对于一个实施例，(一个或多个)处理器602中的至少一个可与控制模块604的一个或多个控制器的逻辑集成在同一模具上。对于一个实施例，(一个或多个)处理器602中的至少一个可与控制模块604的一个或多个控制器的逻辑集成在同一模具上以形成片上***(SoC)。
在各个实施例中，装置600可以但不限于是：服务器、台式计算设备或移动计算设备(例如，膝上型计算设备、手持计算设备、平板电脑、上网本等)等终端设备。在各个实施例中，装置600可具有更多或更少的组件和/或不同的架构。例如，在一些实施例中，装置600包括一个或多个摄像机、键盘、液晶显示器(LCD)屏幕(包括触屏显示器)、非易失性存储器端口、多个天线、图形芯片、专用集成电路(ASIC)和扬声器。
其中，检测装置中可采用主控芯片作为处理器或控制模块，传感器数据、位置信息等存储到存储器或NVM/存储设备中，传感器组可作为输入/输出设备，通信接口可包括包括网络接口。
对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
本申请实施例是参照根据本申请实施例的方法、终端设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程界面处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程界面处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程界面处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程界面处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
以上对本申请所提供的一种界面处理方法和装置，一种电子设备和一种存储介质，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。
Claims (10)
1.一种界面处理方法，其特征在于，终端设备的应用程序设置有软件开发工具包，所述终端设备使用原生编码语言和其他编码语言，所述软件开发工具包使用所述原生编码语言开发所得，所述方法包括：
在接收到展示指定用户界面的请求时，从所述软件开发工具包中获取所述指定用户界面的原生界面资源；所述原生界面资源为原生编码语言对应的界面资源；
通过所述软件开发工具包获取述指定用户界面的自定义界面资源；所述自定义界面资源为所述其他编码语言的界面资源；
将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中。
2.根据权利要求1所述的方法，其特征在于，所述将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中，包括：
生成所述指定用户界面的渲染图层；所述渲染图层包括第一渲染图层和第二渲染图层，所述第一渲染图层为透明的图层，所述第一渲染图层位于所述第二渲染图层之上；
将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层。
3.根据权利要求1所述的方法，其特征在于，所述原生编码语言至少包括Android语言和iOS语言；所述其他编码语言至少包括Web语言和类Web语言。
4.根据权利要求1所述的方法，其特征在于，所述通过所述软件开发工具包获取述指定用户界面的自定义界面资源，包括：
通过所述软件开发工具包中的指定接口参数，从服务器中获取所述指定用户界面的自定义界面资源。
5.根据权利要求1所述的方法，其特征在于，所述终端设备内置混合开发框架，所述自定义界面资源为使用所述混合开发框架所得，所述将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层，包括：
通过所述混合开发框架将所述原生界面资源渲染至所述第一渲染图层，以及通过所述混合开发框架将所述自定义界面资源渲染至所述第二渲染图层。
6.根据权利要求5所述的方法，其特征在于，所述混合开发框架包括weex框架和vue框架。
7.一种界面处理装置，其特征在于，终端设备的应用程序设置有软件开发工具包，所述终端设备使用原生编码语言和其他编码语言，所述软件开发工具包使用所述应用程序使用的所述原生编码语言开发所得，所述装置包括：
界面请求模块，用于在接收到展示指定用户界面的请求时，从所述软件开发工具包中获取所述指定用户界面的原生界面资源；所述原生界面资源为原生编码语言对应的界面资源；
界面资源获取模块，用于通过所述软件开发工具包获取述指定用户界面的自定义界面资源；所述自定义界面资源为所述其他编码语言的界面资源；
界面渲染模块，用于将所述原生界面资源和所述自定义界面资源分别渲染至所述指定用户界面的不同的渲染图层中。
8.根据权利要求7所述的装置，其特征在于，所述界面渲染模块，用于生成所述指定用户界面的渲染图层；所述渲染图层包括第一渲染图层和第二渲染图层，所述第一渲染图层为透明的图层，所述第一渲染图层位于所述第二渲染图层之上；将所述原生界面资源渲染至所述第一渲染图层，以及将所述自定义界面资源渲染至所述第二渲染图层。
9.一种电子设备，其特征在于，包括：处理器；和
存储器，其上存储有可执行代码，当所述可执行代码被执行时，使得所述处理器执行如权利要求1-6中一个或多个所述的界面处理方法。
10.一个或多个机器可读介质，其上存储有可执行代码，当所述可执行代码被执行时，使得处理器执行如权利要求1-6中一个或多个所述的界面处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111547966.3A CN114356324A (zh) | 2021-12-16 | 2021-12-16 | 界面处理方法、装置、设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111547966.3A CN114356324A (zh) | 2021-12-16 | 2021-12-16 | 界面处理方法、装置、设备和存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114356324A true CN114356324A (zh) | 2022-04-15 |
Family
ID=81099273
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111547966.3A Pending CN114356324A (zh) | 2021-12-16 | 2021-12-16 | 界面处理方法、装置、设备和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114356324A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2024021743A1 (zh) * | 2022-07-27 | 2024-02-01 | 腾讯科技（深圳）有限公司 | 数据处理方法、装置、设备以及可读存储介质 |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104572042A (zh) * | 2013-10-15 | 2015-04-29 | 航天信息股份有限公司 | 移动终端设备的跨平台中间件装置及其实现方法 |
| WO2016015527A1 (zh) * | 2014-07-31 | 2016-02-04 | 优视科技有限公司 | 基于合成渲染加速的网页更新方法和装置 |
| CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
| CN107025100A (zh) * | 2016-02-01 | 2017-08-08 | 阿里巴巴集团控股有限公司 | 播放多媒体数据的方法、界面渲染方法及装置、设备 |
| WO2018103550A1 (zh) * | 2016-12-05 | 2018-06-14 | 腾讯科技（深圳）有限公司 | 应用程序页面处理方法和装置 |
| WO2018161812A1 (zh) * | 2017-03-08 | 2018-09-13 | 阿里巴巴集团控股有限公司 | 一种用户界面渲染方法及装置 |
| CN109684580A (zh) * | 2017-10-18 | 2019-04-26 | 中移(苏州)软件技术有限公司 | 一种动态页面的展示方法及电子设备 |
| CN110618847A (zh) * | 2018-06-20 | 2019-12-27 | 华为技术有限公司 | 一种用户界面的显示方法和终端设备 |
| CN111273985A (zh) * | 2020-01-20 | 2020-06-12 | 北京无限光场科技有限公司 | 页面渲染方法、装置、电子设备及计算机可读存储介质 |
| CN111966354A (zh) * | 2020-08-17 | 2020-11-20 | Oppo（重庆）智能科技有限公司 | 一种页面显示方法、装置及计算机可读存储介质 |
| US20210173681A1 (en) * | 2019-12-10 | 2021-06-10 | Beijing Xiaomi Mobile Software Co., Ltd. | Method and device for displaying interface, electronic equipment, server, and storage medium |
-
2021
- 2021-12-16 CN CN202111547966.3A patent/CN114356324A/zh active Pending
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104572042A (zh) * | 2013-10-15 | 2015-04-29 | 航天信息股份有限公司 | 移动终端设备的跨平台中间件装置及其实现方法 |
| WO2016015527A1 (zh) * | 2014-07-31 | 2016-02-04 | 优视科技有限公司 | 基于合成渲染加速的网页更新方法和装置 |
| CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
| CN107025100A (zh) * | 2016-02-01 | 2017-08-08 | 阿里巴巴集团控股有限公司 | 播放多媒体数据的方法、界面渲染方法及装置、设备 |
| WO2018103550A1 (zh) * | 2016-12-05 | 2018-06-14 | 腾讯科技（深圳）有限公司 | 应用程序页面处理方法和装置 |
| WO2018161812A1 (zh) * | 2017-03-08 | 2018-09-13 | 阿里巴巴集团控股有限公司 | 一种用户界面渲染方法及装置 |
| CN109684580A (zh) * | 2017-10-18 | 2019-04-26 | 中移(苏州)软件技术有限公司 | 一种动态页面的展示方法及电子设备 |
| CN110618847A (zh) * | 2018-06-20 | 2019-12-27 | 华为技术有限公司 | 一种用户界面的显示方法和终端设备 |
| US20210173681A1 (en) * | 2019-12-10 | 2021-06-10 | Beijing Xiaomi Mobile Software Co., Ltd. | Method and device for displaying interface, electronic equipment, server, and storage medium |
| CN111273985A (zh) * | 2020-01-20 | 2020-06-12 | 北京无限光场科技有限公司 | 页面渲染方法、装置、电子设备及计算机可读存储介质 |
| CN111966354A (zh) * | 2020-08-17 | 2020-11-20 | Oppo（重庆）智能科技有限公司 | 一种页面显示方法、装置及计算机可读存储介质 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2024021743A1 (zh) * | 2022-07-27 | 2024-02-01 | 腾讯科技（深圳）有限公司 | 数据处理方法、装置、设备以及可读存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6740373B2 (ja) | ページコンポーネント動的レイアウト | |
| CN109597617B (zh) | 基于模板快速生成业务页面的方法和装置 | |
| CN108647076B (zh) | 一种页面处理方法、装置及设备 | |
| CN110874217B (zh) | 快应用的界面显示方法、装置及存储介质 | |
| TWI700638B (zh) | 混合視圖的顯示方法及裝置 | |
| KR102210369B1 (ko) | 멀티-스크린 애플리케이션들 위한 스크린캐스팅 | |
| US10614155B2 (en) | Single page application authoring in a content management system | |
| CN109344352B (zh) | 页面加载方法、装置及电子设备 | |
| CN109145238B (zh) | 一种卡片显示方法、装置及移动设备 | |
| WO2017148298A1 (zh) | 混合模型列表项重用的方法及设备 | |
| CN105335132B (zh) | 一种自定义应用程序功能的方法、装置以及*** | |
| EP3416054B1 (en) | Method and device for page display, and storage medium | |
| US20130036196A1 (en) | Method and system for publishing template-based content | |
| KR101416104B1 (ko) | 하이브리드 웹 어플리케이션의 네이티브 기능을 수행하는 자바스크립트 코드의 동적 로딩 장치와 방법 | |
| WO2017107851A1 (zh) | 一种桌面应用组件发布、更新方法及装置 | |
| US20140325349A1 (en) | Real-time Representations of Edited Content | |
| CN108170430B (zh) | 一种界面展示的方法及*** | |
| CN110865863B (zh) | 快应用的界面显示方法、装置及存储介质 | |
| CN112651475A (zh) | 二维码显示方法、装置、设备及介质 | |
| CN114356324A (zh) | 界面处理方法、装置、设备和存储介质 | |
| CN110262749B (zh) | 一种网页操作方法、装置、容器、设备及介质 | |
| CN108228139B (zh) | 基于html5浏览器框架的单片机开发***及装置 | |
| CN113778405A (zh) | 一种跨平台app构建方法、装置、***及介质 | |
| CN110618811B (zh) | 信息呈现方法和装置 | |
| CN111506841B (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 |