小程序运行方法、装置、电子设备、存储介质及程序产品制造方法及图纸

本发明专利技术实施例提供一种小程序运行方法、装置、电子设备、存储介质及程序产品，该方法包括：并行执行Service层加载脚本资源、View层加载渲染资源；Service层向View层发送页面初始化指令，View层解析指令并渲染页面；响应于View层监听到页面操作，View层将页面操作反馈给Service层；Service层根据页面操作产生页面操作处理指令并传递给View层；View层解析页面操作处理指令并渲染页面；Service层和View层通过Native层通信。本发明专利技术实施例通过并行加载脚本和渲染资源，对Service层和View层的动作进行协调，显著地解决了白屏问题，提高了交互显示的流畅性。显示的流畅性。显示的流畅性。

Small program operation method, device, electronic equipment, storage medium and program product

【技术实现步骤摘要】
小程序运行方法、装置、电子设备、存储介质及程序产品


[0001]本专利技术实施例涉及小程序
，具体涉及一种小程序运行方法、装置、电子设备、存储介质及程序产品。

技术介绍

[0002]小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
[0003]作为一种web产品，小程序的交互体验是否简易流畅备受人们关注。目前，小程序在交互衔接上存在一些web常见问题，比如，web网页在首次打开或二次打开时，会存在一个白屏的过程。在移动端，受限于设备性能和网络速度，白屏的出现更加明显，尤其是较为复杂的网页。

技术实现思路

[0004]本专利技术实施例提供一种小程序运行方法，包括：并行执行在Service层加载脚本资源及在View层加载渲染资源；响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
[0005]根据本专利技术实施例提供的一种小程序运行方法，利用所述Service层根据所述页面操作产生页面操作处理指令，包括：利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法；通过所述页面操作方法将所述页面操作转换成对应的所述页面操作处理指令。
[0006]根据本专利技术实施例提供的一种小程序运行方法，在所述利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法之前，所述方法还包括：在所述Service层，安装react框架，新建ReactElement元素，将web项目源代码作为所述ReactElement元素的子元素传入；在所述Service层，安装react
‑
reconciler构造器，配置hostConfig协议，将所述hostConfig协议作为所述react
‑
reconciler构造器的输入，得到一个构造器实例；其中，所述配置hostConfig协议包括配置页面操作方法；将所述ReactElement元素传入所述构造器实例中，所述构造器实例的启动入口为updateContainer方法，所述ReactElement元素为所述updateContainer方法的参数。
[0007]根据本专利技术实施例提供的一种小程序运行方法，所述页面操作方法包括创建元素
方法、更新元素方法及删除元素方法。
[0008]根据本专利技术实施例提供的一种小程序运行方法，所述根据所述页面操作处理指令渲染页面，包括：利用单独的进程根据所述页面操作处理指令渲染页面；所述方法还包括：在页面关闭后，将页面状态保存到后台。
[0009]根据本专利技术实施例提供的一种小程序运行方法，所述根据所述页面操作处理指令渲染页面，包括：解析所述页面操作指令，根据所述页面操作指令处理文档对象模型元素，完成页面渲染。
[0010]本专利技术实施例还提供一种小程序运行装置，包括：资源加载模块，用于：并行执行在Service层加载脚本资源及在View层加载渲染资源；页面初始化模块，用于：响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；页面监听模块，用于：响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；页面操作处理模块，用于：响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；页面渲染模块，用于：响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
[0011]本专利技术实施例还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述小程序运行方法的步骤。
[0012]本专利技术实施例还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述小程序运行方法的步骤。
[0013]本专利技术实施例还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述小程序运行方法的步骤。
[0014]本专利技术实施例提供的小程序运行方法、装置、电子设备、存储介质及程序产品，通过在不同的执行环境中并行加载脚本资源和渲染资源，并对Service层和View层的动作进行有效协调，显著地解决了白屏问题，提高了交互显示的流畅性。
附图说明
[0015]为了更清楚地说明本专利技术的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0016]图1是本专利技术实施例提供的一种小程序运行方法的流程示意图之一；
[0017]图2是本专利技术实施例提供的小程序运行方法中Service层、Native层和View层的关系模型示意图；
[0018]图3是本专利技术实施例提供的小程序运行方法的流程示意图之二；
[0019]图4是本专利技术实施例提供的小程序运行方法的通信架构图；
[0020]图5是本专利技术实施例提供的小程序运行方法中Service层指令产生过程示意图；
[0021]图6是本专利技术实施例提供的小程序运行方法中View层实现流程示意图；
[0022]图7是本专利技术实施例提供的小程序运行装置的结构示意图；
[0023]图8是本专利技术实施例提供的电子设备的结构示意图。
具体实施方式
[0024]为使本专利技术的目的、技术方案和优点更加清楚，下面将结合本专利技术中的附图，对本专利技术中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种小程序运行方法，其特征在于，包括：并行执行在Service层加载脚本资源及在View层加载渲染资源；响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。2.根据权利要求1所述的小程序运行方法，其特征在于，所述利用所述Service层根据所述页面操作产生页面操作处理指令，包括：利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法；通过所述页面操作方法将所述页面操作转换成对应的所述页面操作处理指令。3.根据权利要求2所述的小程序运行方法，其特征在于，在所述利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法之前，所述方法还包括：在所述Service层，安装react框架，新建ReactElement元素，将web项目源代码作为所述ReactElement元素的子元素传入；在所述Service层，安装react
‑
reconciler构造器，配置hostConfig协议，将所述hostConfig协议作为所述react
‑
reconciler构造器的输入，得到一个构造器实例；其中，所述配置hostConfig协议包括配置页面操作方法；将所述ReactElement元素传入所述构造器实例中，所述构造器实例的启动入口为updateContainer方法，所述ReactElement元素为所述updateContaine...

【专利技术属性】
技术研发人员：夏园园，
申请(专利权)人：北京贝壳时代网络科技有限公司，
类型：发明
国别省市：