本发明专利技术公开了页面渲染方法和装置,涉及计算机技术领域。该方法的一具体实施方式包括创建微应用容器实例,以使微应用程序通过渲染引擎传入参数并调用到原生组件库,进而所述原生组件库根据传入参数,调用相应类型的接口,以将所述传入参数分发至对应组件处理;将处理结果分发至SDK功能模块或宿主应用程序交互模块,以执行用户界面操作或数据处理;接收执行结果并返回至对应组件,进而由对应组件通过渲染引擎回调到微应用程序。从而,本发明专利技术的实施方式能够解决现有微应用生态平台开发模式性能具有很大局限性,用户体验差的问题。
A method and device of page rendering
【技术实现步骤摘要】
一种页面渲染方法和装置
本专利技术涉及计算机
,尤其涉及一种页面渲染方法和装置。
技术介绍
市场现有手机银行大部分使用安卓、IOS原生开发。随着手机银行的业务迭代,手机银行的体积越来越臃肿。即使有些银行使用的手机银行是混合模式开发,其内部资源的更新,也均涵盖了手机银行的所有功能。而每个手机银行用户,其常用功能的范围是有着巨大不同的,有些人关注外汇,有些人关注基金。有些人关注贵金属等。微应用生态平台,可以为这些不同使用习惯的用户,提供即插即用式的资源加载服务。让每个用户手机里的手机银行,存放的都是自己乐意使用的模块。从而整体上解决手机银行因通用业务迭代产生的雍容与手机终端用户的性能、轻量需求的矛盾。在实现本专利技术过程中,专利技术人发现现有技术中至少存在如下问题:NativeAPP开发模式针对iOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,NativeAPP由于利用的是官方提供的语言和工具并且能够直接操控硬件设备(比如多点触控、NFC、读取短信等),在应用性能上和交互体验上应该是最好的。同时NativeAPP访问和兼容的能力也比较好。但NativeAPP开发门槛高,开发人才稀缺,至少比前端和后端少,同时对开发环境配置有较高要求,开发成本相对昂贵。并且,NativeAPP无法跨平台,开发的成本比较大,各个操作系统需要独立开发,而应用市场逐渐饱和。另外,WebApp是一种框架型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进行封装,以供微应用程序调用。在一些实施例中,创建微应用容器实例时,可以获取微应用的运行配置参数,并下载最新的微应用资源包及桥接以释放到应用程序沙箱。根据运行配置参数,在容器管理类中创建容器实例,以使所述容器通过本地配置读取组件与原生代码的映射关系。然后,将微应用资源包装载到所述容器中运行并渲染。作为进一步地实施例,基于预设组件与事件的映射关系,所述原生组件库根据传入参数,通过桥接调用相应类型的接口,以访问到容器顶层,进而容器顶层将传入参本文档来自技高网...
【技术保护点】
1.一种页面渲染方法,其特征在于,包括:/n创建微应用容器实例,以使微应用程序通过渲染引擎传入参数并调用到原生组件库,进而所述原生组件库根据传入参数,调用相应类型的接口,以将所述传入参数分发至对应组件处理;/n将处理结果分发至SDK功能模块或宿主应用程序交互模块,以执行用户界面操作或数据处理;/n接收执行结果并返回至对应组件,进而由对应组件通过渲染引擎回调到微应用程序。/n
【技术特征摘要】
1.一种页面渲染方法,其特征在于,包括:
创建微应用容器实例,以使微应用程序通过渲染引擎传入参数并调用到原生组件库,进而所述原生组件库根据传入参数,调用相应类型的接口,以将所述传入参数分发至对应组件处理;
将处理结果分发至SDK功能模块或宿主应用程序交互模块,以执行用户界面操作或数据处理;
接收执行结果并返回至对应组件,进而由对应组件通过渲染引擎回调到微应用程序。
2.根据权利要求1所述的方法,其特征在于,创建微应用容器实例,包括:
获取微应用的运行配置参数,并下载最新的微应用资源包及桥接以释放到应用程序沙箱;
根据运行配置参数,在容器管理类中创建容器实例,以使所述容器通过本地配置读取组件与原生代码的映射关系;
将微应用资源包装载到所述容器中运行并渲染。
3.根据权利要求2所述的方法,其特征在于,所述原生组件库根据传入参数,调用相应类型的接口,以将所述传入参数分发至对应组件处理,包括:
基于预设组件与事件的映射关系,所述原生组件库根据传入参数,通过桥接调用相应类型的接口,以访问到容器顶层,进而容器顶层将传入参数分发至对应组件处理该事件;其中,所述传入参数包括事件类型。
4.根据权利要求1所述的方法,其特征在于,所述原生组件库根据传入参数,调用相应类型的接口之后,包括:
调用到exec.js模块,生成一个唯一的callbackId参数,以通过该callbackId参数能够使对应组件将执行结果通过渲染引擎回调到微应用程序的回调接收函数。
5.根据权利...
【专利技术属性】
技术研发人员:袁潇锋,肖群,王进,胡仲强,
申请(专利权)人:中国建设银行股份有限公司,建信金融科技有限责任公司,
类型:发明
国别省市:北京;11
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。