CN111158818B - 一种页面渲染方法和装置 - Google Patents
一种页面渲染方法和装置 Download PDFInfo
- Publication number
- CN111158818B CN111158818B CN201911349413.XA CN201911349413A CN111158818B CN 111158818 B CN111158818 B CN 111158818B CN 201911349413 A CN201911349413 A CN 201911349413A CN 111158818 B CN111158818 B CN 111158818B
- Authority
- CN
- China
- Prior art keywords
- micro
- application
- parameters
- component
- container
- 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.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 83
- 238000000034 method Methods 0.000 title claims abstract description 61
- 238000012545 processing Methods 0.000 claims abstract description 34
- 230000003993 interaction Effects 0.000 claims abstract description 17
- 230000008569 process Effects 0.000 claims description 20
- 238000013507 mapping Methods 0.000 claims description 12
- 238000004590 computer program Methods 0.000 claims description 8
- 244000035744 Hura crepitans Species 0.000 claims description 6
- 230000008676 import Effects 0.000 claims description 5
- 238000012546 transfer Methods 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 20
- 230000006870 function Effects 0.000 description 30
- 238000010586 diagram Methods 0.000 description 15
- 238000004891 communication Methods 0.000 description 11
- 230000000694 effects Effects 0.000 description 9
- 238000007726 management method Methods 0.000 description 9
- 230000002457 bidirectional effect Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000008901 benefit Effects 0.000 description 3
- 238000010276 construction Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 239000012634 fragment Substances 0.000 description 2
- 238000004806 packaging method and process Methods 0.000 description 2
- 238000012536 packaging technology Methods 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 229910000510 noble metal Inorganic materials 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000036632 reaction speed Effects 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 229920006395 saturated elastomer Polymers 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
- G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
本发明公开了页面渲染方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理；将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理；接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序。从而，本发明的实施方式能够解决现有微应用生态平台开发模式性能具有很大局限性，用户体验差的问题。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种页面渲染方法和装置。
背景技术
市场现有手机银行大部分使用安卓、IOS原生开发。随着手机银行的业务迭代，手机银行的体积越来越臃肿。即使有些银行使用的手机银行是混合模式开发，其内部资源的更新，也均涵盖了手机银行的所有功能。
而每个手机银行用户，其常用功能的范围是有着巨大不同的，有些人关注外汇，有些人关注基金。有些人关注贵金属等。微应用生态平台，可以为这些不同使用习惯的用户，提供即插即用式的资源加载服务。让每个用户手机里的手机银行，存放的都是自己乐意使用的模块。从而整体上解决手机银行因通用业务迭代产生的雍容与手机终端用户的性能、轻量需求的矛盾。
在实现本发明过程中，发明人发现现有技术中至少存在如下问题：
Native APP开发模式针对iOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，Native APP由于利用的是官方提供的语言和工具并且能够直接操控硬件设备(比如多点触控、NFC、读取短信等)，在应用性能上和交互体验上应该是最好的。同时Native APP访问和兼容的能力也比较好。但Native APP开发门槛高，开发人才稀缺，至少比前端和后端少，同时对开发环境配置有较高要求，开发成本相对昂贵。并且，Native APP无法跨平台，开发的成本比较大，各个操作系统需要独立开发，而应用市场逐渐饱和。
另外，Web App是一种框架型APP开发模式，具有跨平台的优势。但由于Web技术本身的限制，不能直接访问设备硬件和离线存储，所以在体验和性能上有很大的局限性。对联网要求高，离线不能做任何操作，APP反应速度慢，页面切换流畅性较差。
发明内容
有鉴于此，本发明实施例提供一种页面渲染方法和装置，能够解决现有微应用生态平台开发模式性能具有很大局限性，用户体验差的问题。
为实现上述目的，根据本发明实施例的一个方面，提供了一种页面渲染方法，包括创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理；
将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理；
接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序。
可选地，创建微应用容器实例，包括：
获取微应用的运行配置参数，并下载最新的微应用资源包及桥接以释放到应用程序沙箱；
根据运行配置参数，在容器管理类中创建容器实例，以使所述容器通过本地配置读取组件与原生代码的映射关系；
将微应用资源包装载到所述容器中运行并渲染。
可选地，所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理，包括：
基于预设组件与事件的映射关系，所述原生组件库根据传入参数，通过桥接调用相应类型的接口，以访问到容器顶层，进而容器顶层将传入参数分发至对应组件处理该事件；其中，所述传入参数包括事件类型。
可选地，所述原生组件库根据传入参数，调用相应类型的接口之后，包括：
调用到exec.js模块，生成一个唯一的callbackId参数，以通过该callbackId参数能够使对应组件将执行结果通过渲染引擎回调到微应用程序的回调接收函数。
可选地，由对应组件通过渲染引擎回调到微应用程序，还包括：
对应组件通过CallbackContext在sendPluginResult中查找到对应的callbackId参数，以通过渲染引擎回调到微应用程序的回调接收函数。
可选地，包括：
所述渲染引擎为基于WebView的HTML渲染运行库，并提供调用原生组件库的接口。
可选地，还包括：
所述原生组件库通过JavascriptInterface进行封装，以供微应用程序调用。
另外，本发明还提供了一种页面渲染装置，包括第一模块，用于创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理；将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理；
第二模块，用于接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序。
上述发明中的一个实施例具有如下优点或有益效果：因为采用创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理；将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理；接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序的技术手段，所以克服了现有微应用生态平台开发模式性能局限性大，用户体验差的技术问题。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明第一实施例的页面渲染方法的主要流程的示意图；
图2是根据本发明实施例的页面渲染架构图；
图3是根据本发明实施例的微应用SDK的架构图；
图4是根据本发明实施例的页面渲染装置的主要模块的示意图；
图5是本发明实施例可以应用于其中的示例性系统架构图；
图6是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
图1是根据本发明第一实施例的页面渲染方法的主要流程的示意图，如图1所示，所述页面渲染方法包括：
步骤S101，创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理。
较佳的，所述的渲染引擎为基于WebView的HTML渲染运行库，并提供调用原生组件库的接口。而所述的原生组件库通过JavascriptInterface进行封装，以供微应用程序调用。
在一些实施例中，创建微应用容器实例时，可以获取微应用的运行配置参数，并下载最新的微应用资源包及桥接以释放到应用程序沙箱。根据运行配置参数，在容器管理类中创建容器实例，以使所述容器通过本地配置读取组件与原生代码的映射关系。然后，将微应用资源包装载到所述容器中运行并渲染。
作为进一步地实施例，基于预设组件与事件的映射关系，所述原生组件库根据传入参数，通过桥接调用相应类型的接口，以访问到容器顶层，进而容器顶层将传入参数分发至对应组件处理该事件。其中，所述传入参数包括事件类型。
步骤S102，将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理。
其中，所述的SDK为软件开发工具包，为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合。
步骤S103，接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序。
在一些实施例中，为了能够使由对应组件通过渲染引擎回调到微应用程序，在步骤S101执行调用相应类型的接口之后，会调用到exec.js模块，生成一个唯一的callbackId参数，进而步骤S103通过该callbackId参数能够使对应组件将执行结果通过渲染引擎回调到微应用程序的回调接收函数。进一步地，在使对应组件将执行结果通过渲染引擎回调到微应用程序的回调接收函数时，可以对应组件通过CallbackContext在sendPluginResult中查找到对应的callbackId参数，以通过渲染引擎回调到微应用程序的回调接收函数。
其中，CallbackContext是原生类，用于回调，包括success，error，sendPluginResult，isFinished，isChangingThreads，getCallbackId方法。
综上所述，本发明提出了的页面渲染方法，因为兼容JavaScript和XML、css语法规范，这将会使开发门槛更低，开发一个程序将会变得更简单。减少了在开发过程中的人力投入。同时开发者将能够借助平台快速的获得较大的流量，这将比应用程序的流量获取更加容易，也能让营销成本变得更低。同时，本发明具有即开即用特性，将会减轻手机的应用压力，避免资源浪费。同时快速更新的特性可以让用户更快地享受到优质的服务。
作为本发明的另一个具体的实施例，可以使用基于node.js和webpack打包技术的vue开源前端框架构建(例如采用vue 2.5.2，vue-router 3.0.1搭建)，node在开发者本地创建一个javascript运行环境，依赖于Chrome V8引擎进行代码解释，借助node.js的事件驱动，非阻塞I/O模型使项目运行变得轻量、高效、可伸缩，适用于实时数据交互应用。
使用webpack打包技术模块化管理，项目由开发到打包上线一步到位，可实现代码拆分(支持异步模块加载)和功能丰富的插件系统，配合loader转换器将各种类型的资源转换成javascript模块，即任何资源都可以成为webpack可处理的模块。另外基于vue开源前端框架，灵活运用双向数据绑定特性改造封装接口、组件供开发者使用。在框架底层page，与原生交互实现对用户使用微应用期间的行为数据采集，实现用户行为的数据化和结构化管理分析。
图2是根据本发明实施例的页面渲染架构图，能同时存在容器的多个实例，每个容器实例里都包含一套渲染引擎实例和组件库对象实例。容器管理模块负责创建和管理微应用容器实例(例如微应用容器1)，微应用程序通过渲染引擎传入参数并调用到原生组件库，原生组件库根据传入参数和调用的接口类型分发到具体组件。SDK交互模块根据调用的组件具体功能和传入的参数决策分发到SDK功能模块处理还是宿主App(即应用程序)交互模块处理。宿主App交互模块(可以与宿主App功能交互)处理或SDK功能模块接收到组件处理结果执行UI操作或数据处理，并将执行结果返回到组件，由组件通过渲染引擎回调到微应用程序的回调接收函数。当然，可以将渲染过程中的数据存储至数据存储模块。
其中，渲染引擎为基于WebView的HTML渲染运行库，为微应用进行UI渲染和提供HTML接口。同时，渲染引擎作为原生组件库和微应用的中间桥接者，为微应用提供调用原生及硬件设备等接口。
而原生组件库通过JavascriptInterface进行封装与Javascript通信交互，使用插件模式封装了一系列组件，以提供给微应用调用，用以扩展微应用访问系统资源、硬件设备资源等。
作为进一步地实施例，本发明启动时需要先从服务端获取微应用的运行配置参数，取得窗口模式、微应用id、版本等数据。然后，从服务端下载最新的微应用资源包及桥接以释放到应用程序沙箱。
待微应用资源包及桥接释放成功后，根据运行配置参数在容器管理类中创建容器实例并开始初始化容器。其中，初始化容器时可以通过本地配置的config.xml读取组件plugin与原生代码的映射关系。
容器初始化成功后，将微应用资源包装载到容器中运行并渲染。在微应用资源包的微应用程序运行过程中，通过桥接调用相应接口，此时产生一个调用映射plugin-action，桥接根据已有plugin映射访问到容器顶层，容器顶层根据传入的参数分发到具体组件plugin处理此action。组件根据传入的action判断处理逻辑，最终由SDK功能模块或宿主应用程序交互模块消费此事件，执行完成后原路回调数据到微应用程序。
需要说明的是，所述的容器可以为直接承载者Android Fragment，由Fragment生命周期触发框架一系列的生命周期。也可以为间接承载者Android Activity，整个框架的容器最终均为Activity，并借由Activity TaskAffinity实现多窗口模式(多任务栈)。框架内实现容器管理器，管理单窗口模式和多窗口模式微应用的窗口和数据，并为容器提供运行时数据(微应用id、运行模式、名称描述等)。
或者所述的容器可以基于iOS，javascript使用了两种方式来与Objective-C通信。例如：javascript端使用XMLHttpRequest发起了一个请求：execXhr.open('HEAD',"/！gap_exec？"+(+new Date()),true)。请求的地址是：/！gap_exec。并把请求的数据放在了请求的header里面：
execXhr.setRequestHeader('cmds',
iOSExec.nativeFetchMessages())；。
而在Objective-C端使用一个NSURLProtocol的子类来检查每个请求，如果地址是/！gap_exec，则认为是Cordova通信的请求，直接拦截，拦截后就可以通过分析请求的数据，分发到不同的插件类(CDVPlugin类的子类)的方法中。
在javascript端创建一个透明的iframe，设置ifame的src为自定义的协议，而ifame的src更改时，UIWebView会先回调其delegate的webView:shouldStartLoadWithRequest:navigationType方法。
值得说明的是，为了能够使由对应组件通过渲染引擎回调到微应用程序，调用相应类型的接口之后，会调用到exec.js模块的androidExec方法，并在该方法中生成一个唯一的callbackId参数。其中，该callbackId参数格式可以通过组件名称和数字组成。在javascript调用原生组件库时会传到原生代码，当原生代码返回时，会把callbackId参数返回javascript，从而使得javascript能够判断返回参数对应的插件模块，再根据success和error方法便能输出原生返回javascript的数据。
较佳的，所有的原生组件库到javascript的通信在框架中都是通过BrideMode来完成，桥接触发到原生容器，进而将plugin-action分发到具体组件，组件根据具体传入参数判断该调用由SDK框架(即SDK功能模块)实现还是宿主实现处理(即宿主应用程序交互模块)，原生层处理完成后通过CallbackContext回调，CallbackContext经过sendPluginResult查找到对应的callbackId参数，最终将执行结果回调到对应的javascript调用者(即微应用程序的回调接收函数)。
图3是根据本发明实施例的微应用SDK的架构图，微应用SDK框架包括微应用程序、HTML渲染引擎和组件库。其中，本发明从服务端获取微应用程序(可以包括HTML、JavaScript、CSS和资源文件)到客户端，并将微应用程序送入HTML渲染引擎。HTML渲染引擎负责解析渲染微应用程序界面及运行微应用程序代码，也是微应用程序和组件库的沟通桥梁。组件库封装了一系列原生功能组件(例如定位组件、地图组件等等)，以提供给微应用调用使用。
在更进一步地实施例中，从服务端下载微应用程序资源包到手机本地存储，并将此微应用程序资源装载到HTML渲染引擎。HTML渲染引擎解析微应用程序内的HTML、JavaScript、CSS渲染出微应用界面，运行微应用程序。微应用程序运行过程中，触发调用某个原生功能(例如相机组件的拍照功能)，HTML渲染引擎接收到调用后，转发到组件库中，组件库接收调用请求并分发到具体组件，组件执行调用请求完成后，将结果数据按原路径返回数据到微应用程序，微应用程序取得结果数据使用。
另外，微应用程序与HTML渲染引擎之间可以通过HTM接口或微应用接口交互。而HTML渲染引擎与组件库之间可以通过微应用原生接口交互。
在本发明的具体实施例中，微应用程序采取px和rem，rem的设置采用flexible.js。package.json新增npm run test，打包不压缩页面代码(非工程代码)；对比npm run build,注释了webpack.prod.conf.js中的new UglifyJsPlugin函数。更改webpack.dev.conf.js中的merge配置，更改plugins中的html配置为runtime.html；(原因：index.html和runtime.html中引入了不同的js文件)。配置文件.babelrc中plugins新增transform-es2015-modules-commonjs，兼容module.exports和import的混用且能导出JS常规对象(如jquery.js)。vue-loader.conf.js默认导出transformToRequire中image配置值配为src；(因为image为组件，若不配置，则任何情况下必须使用require引入图片路径)。
对于全局的main.js：通用组件引入,全局变量、方法写入。其中rootVue：外部(如安卓，ios端)调用获取的vue对象。ccb：任何时候均可调用ccb方法：
ccbzhrmghgwswswwsMapList_createMapContext_ccbzhrmghgwsws wwsMapList：地图对象new BMap.Map、id集合。ccbAutoGetClassName：class类名获取节点的兼容函数。ccb_handle_arr：用于组件props数组对象更改数组单值的监听且显示，其目的是解决vue机制Object.defineProperty带来的数组无法深度监听问题。
对于全局的App.vue：配置每一个页面都具备keep-alive，设置页面切换动画，配置全局配置。
对于全局的router/page.js，setlocal设置页面标题函数,每一个页面的setlocal函数只被调用一次；故项目定义了全局标题参数集合dataList。生命周期activated会被重复执行，故取dataList对应的值设置原生标题；(注意：项目首页为：”/”和用户自定义首页路径)。对应微信小程序写法，转换data对象内容，转换生命周期写法。其中，与vue同名写法，this指向vue；不同名，this指向该函数的执行上下文。
对于全局的router/component.js，由于子组件需要向父组件传递事件,为避免this指向问题(这里是的this指向问题,page.js存在),修改vue源码。保证原有生命周期的同时,增加自定义生命周期mounted>>ready，activated>>attached，deactivated>>detached。
这里的setData并非像page一样更新data数据,而是直接更新vue对象原型链上的数值；(备注：组件的其他写法,兼容原有vue的基础上,同时需要兼容微信小程序,如triggerEvent事件传递等等)。
对于全局的router/app.js，设置导出APP和getApp对象。
在本发明的具体实施例中，对应VUE搭建前端开发框架的特殊组件，设置了例如input：输入框，html5自带，全局定义css样式，修改vue源码，使value具备v-model效果，非自定义组件。label：用来改进表单组件的可用性，html5自带，非自定义组件。picker：从底部弹起的滚动选择器,提供多种类型选择，如时间，日历，省市区等等。picker-view：嵌入页面的滚动选择器。picker-view-column：滚动选择器子项。radio：单选项目，修改vue源码，使之为<input type＝”radio”/>,同时使checked具备v-model效果。radio-group：单项选择器，内部由多个radio组成。slider：滑动选择器，修改vue源码，使value具备v-model双向数据绑定效果。switch：开关选择器，修改vue源码，使value具备v-model双向数据绑定效果。textarea：多行输入框，修改vue源码，使value具备v-model双向数据绑定效果。
在本发明的具体实施例中，对应VUE搭建前端开发框架的vue源码，设置了例如vue后缀文件无法被浏览器解析，从webpack.base.conf.js中可看出编译此模块的是vue-loader包。从vue-loader包入口文件进入，可以看出加载内容，资源是parse函数，parse来源parser.js，看parser.js代码可知compiler是使得vue编译生效的；compiler来源vue-template-compiler；故vue-template-compiler是项目npm run dev启动前生效的代码包。vue-template-compiler入口文件index.js,模块导出源自bulid.js。main.js中引入vue包,此包为npm run dev运行时生效的包，编辑时生效包为vue.esm.js。vue/dist/vue.esm.js将关键字view,map等从中删除，增加生命周期ready、attached、detached并添加相关逻辑代码。
在本发明的具体实施例中，对应VUE搭建前端开发框架的页面拆分与合并，设置了将ccbml中的内容拼接到vue中的template中(template中本身存在一个view)，将json内容拼接到vue中的setlocal函数中，将js内容拼接到vue中的script中并添加固定引入内容，将ccbss内容拼接到style中。
综上所述，本发明通过尽可能简单、高效的方式让开发者可以在手机银行中开发具有原生APP体验的服务。并且，框架提供了自己的视图层描述语言HTML和CSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
在本发明的实施例中，框架的核心是一个响应的数据绑定系统，整个系统分为两块视图层(View)和逻辑层(App Service)。框架可以让数据与视图非常简单地保持同步。当需要进行数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
框架管理整个微应用的页面路由，实现页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进框架中，其他的一切复杂的操作都交由框架处理。
还有，框架提供了一套基础的组件，这些组件自带手机银行风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的手机银行微应用。
图4是根据本发明实施例的页面渲染装置的主要模块的示意图，如图4所示，所述页面渲染装置400包括第一模块401和第二模块402。其中，第一模块401创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理；将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理。第二模块402接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序。
较佳的，所述渲染引擎为基于WebView的HTML渲染运行库，并提供调用原生组件库的接口。
而所述原生组件库通过JavascriptInterface进行封装，以供微应用程序调用。
在一些实施例中，第一模块401创建微应用容器实例时，可以获取微应用的运行配置参数，并下载最新的微应用资源包及桥接以释放到应用程序沙箱；根据运行配置参数，在容器管理类中创建容器实例，以使所述容器通过本地配置读取组件与原生代码的映射关系；将微应用资源包装载到所述容器中运行并渲染。
进一步地实施例，第一模块401在所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理时，包括：
基于预设组件与事件的映射关系，所述原生组件库根据传入参数，通过桥接调用相应类型的接口，以访问到容器顶层，进而容器顶层将传入参数分发至对应组件处理该事件；其中，所述传入参数包括事件类型。
作为另一些实施例，第一模块401在所述原生组件库根据传入参数，调用相应类型的接口之后，包括：
调用到exec.js模块，生成一个唯一的callbackId参数，以通过该callbackId参数能够使对应组件将执行结果通过渲染引擎回调到微应用程序的回调接收函数。
进一步地实施例，第一模块401由对应组件通过渲染引擎回调到微应用程序，还包括：
对应组件通过CallbackContext在sendPluginResult中查找到对应的callbackId参数，以通过渲染引擎回调到微应用程序的回调接收函数。
需要说明的是，在本发明所述页面渲染方法和所述页面渲染装置在具体实施内容上具有相应关系，故重复内容不再说明。
图5示出了可以应用本发明实施例的页面渲染方法或页面渲染装置的示例性系统架构500。
如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。
终端设备501、502、503可以是具有页面渲染屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。
需要说明的是，本发明实施例所提供的页面渲染方法一般由服务器505执行，相应地，计算装置一般设置于服务器505中。
应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
下面参考图6，其示出了适于用来实现本发明实施例的终端设备的计算机系统600的结构示意图。图6示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM603中，还存储有计算机系统600操作所需的各种程序和数据。CPU601、ROM602以及RAM603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。
以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶页面渲染器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。
特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本发明的系统中限定的上述功能。
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括第一模块和第二模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定。
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理；将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理；接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序。
根据本发明实施例的技术方案，能够解决现有微应用生态平台开发模式性能具有很大局限性，用户体验差的问题。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。
Claims (9)
1.一种页面渲染方法，其特征在于，包括：
创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理；其中，创建微应用容器实例，包括：获取微应用的运行配置参数，并下载最新的微应用资源包及桥接以释放到应用程序沙箱；根据运行配置参数，在容器管理类中创建容器实例，以使所述容器通过本地配置读取组件与原生代码的映射关系；将微应用资源包装载到所述容器中运行并渲染；
将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理；
接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序。
2.根据权利要求1所述的方法，其特征在于，所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理，包括：
基于预设组件与事件的映射关系，所述原生组件库根据传入参数，通过桥接调用相应类型的接口，以访问到容器顶层，进而容器顶层将传入参数分发至对应组件处理该事件；其中，所述传入参数包括事件类型。
3.根据权利要求1所述的方法，其特征在于，所述原生组件库根据传入参数，调用相应类型的接口之后，包括：
调用到exec.js模块，生成一个唯一的callbackId参数，以通过该callbackId参数能够使对应组件将执行结果通过渲染引擎回调到微应用程序的回调接收函数。
4.根据权利要求3所述的方法，其特征在于，由对应组件通过渲染引擎回调到微应用程序，还包括：
对应组件通过CallbackContext在sendPluginResult中查找到对应的callbackId参数，以通过渲染引擎回调到微应用程序的回调接收函数。
5.根据权利要求1所述的方法，其特征在于，包括：
所述渲染引擎为基于WebView的HTML渲染运行库，并提供调用原生组件库的接口。
6.根据权利要求1-5任一所述的方法，其特征在于，还包括：
所述原生组件库通过JavascriptInterface进行封装，以供微应用程序调用。
7.一种页面渲染装置，其特征在于，包括：
第一模块，用于创建微应用容器实例，以使微应用程序通过渲染引擎传入参数并调用到原生组件库，进而所述原生组件库根据传入参数，调用相应类型的接口，以将所述传入参数分发至对应组件处理；将处理结果分发至SDK功能模块或宿主应用程序交互模块，以执行用户界面操作或数据处理；其中，创建微应用容器实例，包括：获取微应用的运行配置参数，并下载最新的微应用资源包及桥接以释放到应用程序沙箱；根据运行配置参数，在容器管理类中创建容器实例，以使所述容器通过本地配置读取组件与原生代码的映射关系；将微应用资源包装载到所述容器中运行并渲染；
第二模块，用于接收执行结果并返回至对应组件，进而由对应组件通过渲染引擎回调到微应用程序。
8.一种电子设备，其特征在于，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。
9.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-6中任一所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911349413.XA CN111158818B (zh) | 2019-12-24 | 2019-12-24 | 一种页面渲染方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911349413.XA CN111158818B (zh) | 2019-12-24 | 2019-12-24 | 一种页面渲染方法和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111158818A CN111158818A (zh) | 2020-05-15 |
| CN111158818B true CN111158818B (zh) | 2023-12-01 |
Family
ID=70557911
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911349413.XA Active CN111158818B (zh) | 2019-12-24 | 2019-12-24 | 一种页面渲染方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111158818B (zh) |
Families Citing this family (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111651141B (zh) * | 2020-05-25 | 2023-02-28 | 北京百度网讯科技有限公司 | 小程序落地页的展现方法、装置、电子设备和存储介质 |
| CN111949251A (zh) * | 2020-07-21 | 2020-11-17 | 广州钢铁侠信息科技有限公司 | 一种跨平台实现软件开发与运行的方法 |
| CN112100552A (zh) * | 2020-08-06 | 2020-12-18 | 北京沃东天骏信息技术有限公司 | 页面渲染方法、装置、设备及计算机可读存储介质 |
| CN112083966B (zh) * | 2020-08-14 | 2024-02-27 | 杭州当虹科技股份有限公司 | 一种加载远程vue组件的方法 |
| CN112035112B (zh) * | 2020-09-02 | 2024-04-05 | 北京思明启创科技有限公司 | 应用程序开发方法、系统、介质和电子设备 |
| CN112559928B (zh) * | 2020-12-24 | 2023-09-26 | 成都新希望金融信息有限公司 | 基于混合开发的页面处理方法、装置、电子设备及存储介质 |
| CN112988418A (zh) * | 2021-03-05 | 2021-06-18 | 杭州天阙科技有限公司 | Web端与移动端的通信方法、移动终端及系统 |
| CN112882711A (zh) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | 渲染方法、装置、设备以及存储介质 |
| CN113504898A (zh) * | 2021-06-10 | 2021-10-15 | 深圳市云网万店科技有限公司 | 实现业务编排的前端组件快速处理方法、系统及计算机存储介质 |
| CN113590125A (zh) * | 2021-08-17 | 2021-11-02 | 世纪龙信息网络有限责任公司 | 一种小程序开发方法及装置 |
| CN113626105B (zh) * | 2021-08-18 | 2023-10-27 | 赞同科技股份有限公司 | 移动端混合模式的sdk系统与移动设备 |
| CN113806014A (zh) * | 2021-08-26 | 2021-12-17 | 浪潮卓数大数据产业发展有限公司 | 一种基于虚拟多开的webview加载优化方法 |
| CN113722538B (zh) * | 2021-09-08 | 2023-09-05 | 北京奇艺世纪科技有限公司 | 一种界面动态渲染方法及装置 |
| CN113835691A (zh) * | 2021-09-27 | 2021-12-24 | 工银科技有限公司 | 一种iOS应用开发方法、系统、设备、介质和程序产品 |
| CN114741126A (zh) * | 2022-03-15 | 2022-07-12 | 北京贝壳时代网络科技有限公司 | 小程序运行方法、装置、电子设备、存储介质及程序产品 |
| CN114968457B (zh) * | 2022-05-11 | 2024-05-03 | 支付宝(杭州)信息技术有限公司 | 应用于子程序的表单处理方法及装置 |
| CN117616394A (zh) * | 2022-06-20 | 2024-02-27 | 北京小米移动软件有限公司 | 混合渲染应用系统、渲染方法、电子设备和存储介质 |
| CN115113874B (zh) * | 2022-08-30 | 2023-01-31 | 广州市玄武无线科技股份有限公司 | 基于小程序的配置开发方法、系统、设备及存储介质 |
| CN116243899B (zh) * | 2022-12-06 | 2023-09-15 | 浙江讯盟科技有限公司 | 一种基于网络环境的自定义编排容器和方法 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
| CN105574049A (zh) * | 2014-10-30 | 2016-05-11 | 阿里巴巴集团控股有限公司 | 移动应用的页面处理方法、装置和系统 |
| CN107193546A (zh) * | 2017-04-11 | 2017-09-22 | 国网天津市电力公司信息通信公司 | 一种微服务化业务应用系统 |
| CN108572818A (zh) * | 2017-03-08 | 2018-09-25 | 阿里巴巴集团控股有限公司 | 一种用户界面渲染方法及装置 |
| CN109117174A (zh) * | 2018-07-04 | 2019-01-01 | 北京德惠众合信息技术有限公司 | 兼容不同引擎的前端页面的系统及方法 |
-
2019
- 2019-12-24 CN CN201911349413.XA patent/CN111158818B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
| CN105574049A (zh) * | 2014-10-30 | 2016-05-11 | 阿里巴巴集团控股有限公司 | 移动应用的页面处理方法、装置和系统 |
| CN108572818A (zh) * | 2017-03-08 | 2018-09-25 | 阿里巴巴集团控股有限公司 | 一种用户界面渲染方法及装置 |
| CN107193546A (zh) * | 2017-04-11 | 2017-09-22 | 国网天津市电力公司信息通信公司 | 一种微服务化业务应用系统 |
| CN109117174A (zh) * | 2018-07-04 | 2019-01-01 | 北京德惠众合信息技术有限公司 | 兼容不同引擎的前端页面的系统及方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111158818A (zh) | 2020-05-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111158818B (zh) | 一种页面渲染方法和装置 | |
| WO2018228211A1 (zh) | 应用转换方法、装置及设备 | |
| WO2018177260A1 (zh) | 一种应用程序开发方法及其工具、设备、存储介质 | |
| US10185558B2 (en) | Language-independent program composition using containers | |
| WO2018072626A1 (zh) | 组件调用的方法和装置、组件数据处理的方法和装置 | |
| TW201441829A (zh) | 頁面處理方法和裝置以及頁面生成方法和裝置 | |
| CN111381817A (zh) | 实现跨平台多语言开发的方法、装置、介质和电子设备 | |
| CN110895471A (zh) | 安装包生成方法、装置、介质及电子设备 | |
| CN113419710B (zh) | 小程序的开发方法、装置、电子设备和介质 | |
| CN111338623A (zh) | 一种开发用户界面的方法、装置、介质和电子设备 | |
| CN108804100B (zh) | 创建界面元素的方法、装置、存储介质及移动终端 | |
| CN111813381A (zh) | 跨平台生成可运行程序的方法、装置、介质和电子设备 | |
| CN113760324A (zh) | 构建微前端应用的方法和装置 | |
| CN110968340A (zh) | 一种实现多版本依赖隔离的方法和装置 | |
| CN111459497A (zh) | 基于webpack的资源包编译方法、系统、服务器和存储介质 | |
| CN101876998B (zh) | 一种实现数据编辑的方法和系统 | |
| CN113568661A (zh) | 一种基于Android sdk实现app混合开发的方法 | |
| WO2023124657A1 (zh) | 微应用的运行方法、装置、设备、存储介质及程序产品 | |
| WO2023083071A1 (zh) | 视图交互方法、装置、电子设备及计算机可读介质 | |
| CN108804088A (zh) | 协议处理方法和装置 | |
| CN115080109A (zh) | 基于混合开发的多云端环境联调方法、装置、系统和设备 | |
| CN105320499A (zh) | 一种应用程序的适配方法和相关装置 | |
| CN114840310A (zh) | 容器创建方法、装置、电子设备和计算机可读存储介质 | |
| CN114489607A (zh) | 跨栈应用处理与页面渲染方法、装置、设备及存储介质 | |
| CN113961279A (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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20220920 Address after: 25 Financial Street, Xicheng District, Beijing 100033 Applicant after: CHINA CONSTRUCTION BANK Corp. Address before: 25 Financial Street, Xicheng District, Beijing 100033 Applicant before: CHINA CONSTRUCTION BANK Corp. Applicant before: Jianxin Financial Science and Technology Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |