CN114741126A - 小程序运行方法、装置、电子设备、存储介质及程序产品 - Google Patents

小程序运行方法、装置、电子设备、存储介质及程序产品 Download PDF

Info

Publication number
CN114741126A
CN114741126A CN202210255130.4A CN202210255130A CN114741126A CN 114741126 A CN114741126 A CN 114741126A CN 202210255130 A CN202210255130 A CN 202210255130A CN 114741126 A CN114741126 A CN 114741126A
Authority
CN
China
Prior art keywords
page
page operation
layer
service layer
rendering
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
Application number
CN202210255130.4A
Other languages
English (en)
Inventor
夏园园
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Shell Time Network Technology Co ltd
Original Assignee
Beijing Shell Time Network Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Shell Time Network Technology Co ltd filed Critical Beijing Shell Time Network Technology Co ltd
Priority to CN202210255130.4A priority Critical patent/CN114741126A/zh
Publication of CN114741126A publication Critical patent/CN114741126A/zh
Pending legal-status Critical Current

Links

Images

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/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
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Stored Programmes (AREA)

Abstract

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

Description

小程序运行方法、装置、电子设备、存储介质及程序产品
技术领域
本发明实施例涉及小程序技术领域，具体涉及一种小程序运行方法、装置、电子设备、存储介质及程序产品。
背景技术
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
作为一种web产品，小程序的交互体验是否简易流畅备受人们关注。目前，小程序在交互衔接上存在一些web常见问题，比如，web网页在首次打开或二次打开时，会存在一个白屏的过程。在移动端，受限于设备性能和网络速度，白屏的出现更加明显，尤其是较为复杂的网页。
发明内容
本发明实施例提供一种小程序运行方法，包括：并行执行在Service层加载脚本资源及在View层加载渲染资源；响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
根据本发明实施例提供的一种小程序运行方法，利用所述Service层根据所述页面操作产生页面操作处理指令，包括：利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法；通过所述页面操作方法将所述页面操作转换成对应的所述页面操作处理指令。
根据本发明实施例提供的一种小程序运行方法，在所述利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法之前，所述方法还包括：在所述Service层，安装react框架，新建ReactElement元素，将web项目源代码作为所述ReactElement元素的子元素传入；在所述Service层，安装react-reconciler构造器，配置hostConfig协议，将所述hostConfig协议作为所述react-reconciler构造器的输入，得到一个构造器实例；其中，所述配置hostConfig协议包括配置页面操作方法；将所述ReactElement元素传入所述构造器实例中，所述构造器实例的启动入口为updateContainer方法，所述ReactElement元素为所述updateContainer方法的参数。
根据本发明实施例提供的一种小程序运行方法，所述页面操作方法包括创建元素方法、更新元素方法及删除元素方法。
根据本发明实施例提供的一种小程序运行方法，所述根据所述页面操作处理指令渲染页面，包括：利用单独的进程根据所述页面操作处理指令渲染页面；所述方法还包括：在页面关闭后，将页面状态保存到后台。
根据本发明实施例提供的一种小程序运行方法，所述根据所述页面操作处理指令渲染页面，包括：解析所述页面操作指令，根据所述页面操作指令处理文档对象模型元素，完成页面渲染。
本发明实施例还提供一种小程序运行装置，包括：资源加载模块，用于：并行执行在Service层加载脚本资源及在View层加载渲染资源；页面初始化模块，用于：响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；页面监听模块，用于：响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；页面操作处理模块，用于：响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；页面渲染模块，用于：响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
本发明实施例还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述小程序运行方法的步骤。
本发明实施例还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述小程序运行方法的步骤。
本发明实施例还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述小程序运行方法的步骤。
本发明实施例提供的小程序运行方法、装置、电子设备、存储介质及程序产品，通过在不同的执行环境中并行加载脚本资源和渲染资源，并对Service层和View层的动作进行有效协调，显著地解决了白屏问题，提高了交互显示的流畅性。
附图说明
为了更清楚地说明本发明的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种小程序运行方法的流程示意图之一；
图2是本发明实施例提供的小程序运行方法中Service层、Native层和View层的关系模型示意图；
图3是本发明实施例提供的小程序运行方法的流程示意图之二；
图4是本发明实施例提供的小程序运行方法的通信架构图；
图5是本发明实施例提供的小程序运行方法中Service层指令产生过程示意图；
图6是本发明实施例提供的小程序运行方法中View层实现流程示意图；
图7是本发明实施例提供的小程序运行装置的结构示意图；
图8是本发明实施例提供的电子设备的结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
图1是本发明实施例提供的一种小程序运行方法的流程示意图之一。如图1所示，所述方法包括：
步骤101、并行执行在Service层加载脚本资源及在View层加载渲染资源。
现有的脚本资源和渲染资源在同一环境中加载，属于串行的加载方式，比如，加载部分渲染资源后，根据页面展示需要再加载部分脚本资源，再加载部分渲染资源，再加载部分脚本资源，直至脚本资源和渲染资源加载完成。由于脚本资源和渲染资源的串行加载方式造成资源加载时间过长、资源阻塞等问题，从而出现页面展示的白屏问题。
本发明实施例将脚本资源和渲染资源在不同的执行环境中并行加载。其中，在Service层加载脚本资源，在View层加载渲染资源，二者并行执行。由于并行加载资源，资源加载不会阻塞，避免或降低了资源加载时间过长、资源阻塞等造成的白屏问题。
步骤102、响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面。
图2是本发明实施例提供的小程序运行方法中Service层、Native层和View层的关系模型示意图。如图2所示，Service层是数据和指令产生的地方。对于安卓操作系统，Service层可以使用V8；对于IOS操作系统，Service层可以使用JavascriptCore(简称JSCore)。V8和JavascriptCore都属于Javascript引擎。View层主要用于解析指令，将数据渲染到界面，并监听界面上用户的操作，再回馈给Service层进行处理。对于安卓操作系统和IOS操作系统，View层都可使用系统自带的WebView(一种可视化组件)。
Service层和View层不直接通信，而是通过Native层实现双方通信。Native层作为Service层和View层中间的通信层，且提供更多Native原生能力(APP的原生能力，基于APP开发小程序)。
为提高交互的流畅性，需要设置通信各方的交互顺序，避免等待和冲突。脚本资源和渲染资源加载完成后才会给View层发送指令进行渲染。Service层用于加载脚本资源，能够获知脚本资源加载的进度。View层用于加载渲染资源，为使得Service层及时获取到渲染资源加载完成的信息，以及时进行页面初始化指令的发送，本发明实施例View层在加载完成渲染资源后，通过Native层向Service层发送渲染资源加载完成的信息，以在渲染资源加载完成后及时通知Service层。Service层在脚本资源加载完成且接收到渲染资源加载完成的信息后，通过Native层向View层发送页面初始化指令，View层解析页面初始化指令并渲染页面。
步骤103、响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层。
页面初始化后，View层实时监听页面操作。若监听到页面操作，View层将页面操作通过Native层及时反馈给Service层。
步骤104、响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层。
Service层接收到View层通过Native层发送的页面操作后，根据页面操作产生页面操作处理指令，并通过Native层将页面操作处理指令传递给View层。
步骤105、响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
View层接收到页面操作处理指令后，解析页面操作处理指令，根据页面操作处理指令渲染页面。
通过以上步骤103～105，进一步实现了页面初始化后页面操作的及时处理。
图3是本发明实施例提供的小程序运行方法的流程示意图之二。如图3所示，该方法包括：
从小程序服务器下载小程序压缩包，解压后得到渲染资源和脚本资源；
分别初始化Service层(V8或JavascriptCore)和View层(WebView)；
Service层加载脚本资源，产生第一次指令(页面初始化指令)；等待渲染资源加载完成；
View层加载渲染资源(和Service层加载脚本资源并行执行)，并在加载完成后，将渲染资源加载完成的信息通过Native层通知Service层；等待第一次指令；
Service层接收到渲染资源加载完成的信息，若此时已经加载完脚本资源，则通过Native层向View层发送产生的第一次指令；等待处理页面操作；
View层解析第一次指令，渲染页面；
View层监听页面操作，并在监听到页面操作后，通过Native层向Service层回馈页面操作；等待第二次指令；
Service层接收到页面操作，处理页面操作，产生第二次指令(页面操作处理指令)，通过Native层向View层发送第二次指令；等待处理页面操作；
View层解析第二次指令，更新页面；
View层监听页面操作，并在监听到页面操作后，通过Native层向Service层回馈页面操作；等待第三次指令；
Service层接收到页面操作，处理页面操作，产生第三次指令(页面操作处理指令)，通过Native层向View层发送第三次指令；
……
根据以上过程逐步对后续的页面操作进行处理及渲染。
图4是本发明实施例提供的小程序运行方法的通信架构图。如图4所示，需要在Service层和View层设置收、发消息机制，用于收发消息。Native层作为Service层和View层的桥梁，需要构造统一的方法接收和转发由Service层和View层传递的数据，同时还要兼顾消息的异步性，保证收、发消息的正确执行。
本发明实施例提供的小程序运行方法，通过在不同的执行环境中并行加载脚本资源和渲染资源，并对Service层和View层的动作进行有效协调，显著地解决了白屏问题，提高了交互显示的流畅性。
根据本发明实施例提供的一种小程序运行方法，利用所述Service层根据所述页面操作产生页面操作处理指令，包括：利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法；通过所述页面操作方法将所述页面操作转换成对应的所述页面操作处理指令。
根据页面操作的处理需要，Service层设置多种页面操作方法，在接收到页面操作后，相应的页面操作方法会接收到对应操作的结果，相应的页面操作方法将页面操作转换成对应的页面操作处理指令。页面操作指令的相关内容可以在页面操作方法中预先写好。
本发明实施例提供的小程序运行方法，通过根据利用Service层根据页面操作的类型，将页面操作传递给对应的页面操作方法，通过页面操作方法将页面操作转换成对应的页面操作处理指令，实现了页面操作指令的快速生成。
根据本发明实施例提供的一种小程序运行方法，在所述利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法之前，所述方法还包括：在所述Service层，安装react框架，新建ReactElement元素，将web项目源代码作为所述ReactElement元素的子元素传入；在所述Service层，安装react-reconciler构造器，配置hostConfig协议，将所述hostConfig协议作为所述react-reconciler构造器的输入，得到一个构造器实例；其中，所述配置hostConfig协议包括配置页面操作方法；将所述ReactElement元素传入所述构造器实例中，所述构造器实例的启动入口为updateContainer方法，所述ReactElement元素为所述updateContainer方法的参数。
微信小程序有自己的一套框架，其框架的语法与react框架具有较大差异，因此，微信小程序的框架不能直接复用在基于react框架的APP的小程序开发中，基于微信小程序的框架开发react框架下的小程序，无论是学习还是项目迁移都有过高成本。为解决此问题，本发明实施例提供一种使用react框架开发小程序的方法。本方法中，可以使用react搭建的web项目，无缝迁移成小程序项目，能够使用更多客户端的能力，还会拥有更友好的交互体验。
图5是本发明实施例提供的小程序运行方法中Service层指令产生过程示意图。如图5所示，Service层指令产生过程包括：
(1)在Service层，安装react框架，新建一个ReactElement元素，将web项目源代码作为ReactElement元素的子元素传入；其中，web项目源代码为待转换成小程序的基于react框架的web项目代码，比如可以是一键生成的react项目代码。图5中的<App/>为代码示例。
(2)在Service层，安装react-reconciler构造器，配置hostConfig协议，将hostConfig协议作为react-reconciler构造器的输入，得到一个构造器实例。其中，配置hostConfig协议包括配置页面操作方法。
(3)将得到的ReactElement元素传入的构造器实例中，构造器实例的启动入口为updateContainer方法，ReactElement元素为updateContainer方法的参数。
(4)hostConfig协议中配置的页面操作方法，如创建元素、删除元素、更新元素的方法需要根据需求自行实现，该方法会接收到对应页面操作的结果。
(5)页面操作方法接收到页面操作后，将各结果自行转换成各指令，通过收、发消息机制传递给Native层，由Native将指令转发到View层进行页面渲染。
本发明实施例提供的小程序运行方法，通过在Service层，安装react框架，新建ReactElement元素，将web项目源代码作为ReactElement元素的子元素传入，在Service层，安装react-reconciler构造器，配置hostConfig协议，将hostConfig协议作为react-reconciler构造器的输入，得到一个构造器实例，将ReactElement元素传入构造器实例中，实现了基于react框架的小程序的运行，支持开发者使用react框架实现小程序应用。
根据本发明实施例提供的一种小程序运行方法，所述页面操作方法包括创建元素方法、更新元素方法及删除元素方法。
页面操作方法可以根据需要进行设置，比如可以包括常用的创建元素方法、更新元素方法及删除元素方法。更新元素的方法的具体方法进一步可以根据需要灵活设置。
本发明实施例提供的小程序运行方法，通过设置页面操作方法包括创建元素方法、更新元素方法及删除元素方法，为页面交互提供了基础保障。
根据本发明实施例提供的一种小程序运行方法，所述根据所述页面操作处理指令渲染页面，包括：利用单独的进程根据所述页面操作处理指令渲染页面；所述方法还包括：在页面关闭后，将页面状态保存到后台。
针对移动端加载的web网页，一旦关闭，将会丢失用户操作的所有状态，增加用户二次交互成本的问题，本发明实施例在根据页面操作处理指令渲染页面时，利用单独的进程根据页面操作处理指令渲染页面。
每渲染一个页面，安卓都需要单独使用一个进程来加载WebView进行页面渲染，该进程受主进程管理。IOS是使用一个Native页面加载一个WebView的方式进行页面渲染。上述方式都属于利用单独的进程根据页面操作处理指令渲染页面，即将渲染流程抽离成单独的进程。
利用单独的进程根据页面操作处理指令渲染页面，可以在页面关闭后，将页面状态保存到后台。如此，再次打开页面时，可以保持先前的页面状态，避免重复操作。IOS中，根据内存中WebView的上下文是否被销毁来模拟保持页面状态的效果。
本发明实施例提供的一种小程序运行方法，通过利用单独的进程根据页面操作处理指令渲染页面，在页面关闭后，将页面状态保存到后台，通过建立页面多进程概念，保留了用户的使用状态，使得交互体验更加友好。
根据本发明实施例提供的一种小程序运行方法，所述根据所述页面操作处理指令渲染页面，包括：解析所述页面操作指令，根据所述页面操作指令处理文档对象模型元素，完成页面渲染。
图6是本发明实施例提供的小程序运行方法中View层实现流程示意图。如图6所示，在View层，需要实现以下功能：
(1)实现收、发消息机制。
(2)实现将来自Service层的指令，渲染到WebView上的方法，包括创建文档对象模型元素(Document Object Model，DOM)、更新文档对象模型元素、删除文档对象模型元素等。在接收到来自Service层的指令后，解析指令，根据指令的内容触发相应的方法进行页面元素处理，完成界面渲染(页面渲染)。
(3)监听各个已经渲染的元素，如果页面出现任何交互操作，需要立即触发回馈操作，将页面操作通过Native层通知到Service层处理。
本发明实施例提供的小程序运行方法，通过解析所述页面操作指令，根据所述页面操作指令处理文档对象模型元素，完成页面渲染，实现了页面操作的响应。
本发明实施例提供的小程序运行方法，可以解决与移动端进行交互时的白屏问题、丢失用户操作状态的问题，提高移动端web项目的交互体验；可以解决对新框架学习成本高、项目迁移难的问题，提升对移动端能力的复用，降低web开发者开发小程序的成本。
下面对本发明实施例提供的小程序运行装置进行描述，下文描述的小程序运行装置与上文描述的小程序运行方法可相互对应参照。
图7是本发明实施例提供的小程序运行装置的结构示意图。如图7所示，所述装置包括资源加载模块10、页面初始化模块20、页面监听模块30、页面操作处理模块40及页面渲染模块50，其中：资源加载模块10用于：并行执行在Service层加载脚本资源及在View层加载渲染资源；页面初始化模块20用于：响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；页面监听模块30用于：响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；页面操作处理模块40用于：响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；页面渲染模块50用于：响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
本发明实施例提供的小程序运行装置，通过在不同的执行环境中并行加载脚本资源和渲染资源，并对Service层和View层的动作进行有效协调，显著地解决了白屏问题，提高了交互显示的流畅性。
根据本发明实施例提供的一种小程序运行装置，页面操作处理模块40在利用Service层根据所述页面操作产生页面操作处理指令时，具体用于：利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法；通过所述页面操作方法将所述页面操作转换成对应的所述页面操作处理指令。
本发明实施例提供的小程序运行装置，通过根据利用Service层根据页面操作的类型，将页面操作传递给对应的页面操作方法，通过页面操作方法将页面操作转换成对应的页面操作处理指令，实现了页面操作指令的快速生成。
根据本发明实施例提供的一种小程序运行装置，页面操作处理模块40在用于利用所述Service层根据所述页面操作的类型，将所述页面操作传递给对应的页面操作方法之前，还用于：在所述Service层，安装react框架，新建ReactElement元素，将web项目源代码作为所述ReactElement元素的子元素传入；在所述Service层，安装react-reconciler构造器，配置hostConfig协议，将所述hostConfig协议作为所述react-reconciler构造器的输入，得到一个构造器实例；其中，所述配置hostConfig协议包括配置页面操作方法；将所述ReactElement元素传入所述构造器实例中，所述构造器实例的启动入口为updateContainer方法，所述ReactElement元素为所述updateContainer方法的参数。
本发明实施例提供的小程序运行装置，通过在Service层，安装react框架，新建ReactElement元素，将web项目源代码作为ReactElement元素的子元素传入，在Service层，安装react-reconciler构造器，配置hostConfig协议，将hostConfig协议作为react-reconciler构造器的输入，得到一个构造器实例，将ReactElement元素传入构造器实例中，实现了基于react框架的小程序的运行，支持开发者使用react框架实现小程序应用。
根据本发明实施例提供的一种小程序运行装置，所述页面操作方法包括创建元素方法、更新元素方法及删除元素方法。
本发明实施例提供的小程序运行装置，通过设置页面操作方法包括创建元素方法、更新元素方法及删除元素方法，为页面交互提供了基础保障。
根据本发明实施例提供的一种小程序运行装置，页面渲染模块50在用于根据所述页面操作处理指令渲染页面时，具体用于：利用单独的进程根据所述页面操作处理指令渲染页面；页面渲染模块50还用于：在页面关闭后，将页面状态保存到后台。
本发明实施例提供的一种小程序运行装置，通过利用单独的进程根据页面操作处理指令渲染页面，在页面关闭后，将页面状态保存到后台，通过建立页面多进程概念，保留了用户的使用状态，使得交互体验更加友好。
根据本发明实施例提供的一种小程序运行装置，页面渲染模块50在用于根据所述页面操作处理指令渲染页面时，具体用于：解析所述页面操作指令，根据所述页面操作指令处理文档对象模型元素，完成页面渲染。
本发明实施例提供的小程序运行装置，通过解析所述页面操作指令，根据所述页面操作指令处理文档对象模型元素，完成页面渲染，实现了页面操作的响应。
图8是本发明实施例提供的电子设备的结构示意图，如图8所示，该电子设备可以包括：处理器(processor)810、通信接口(Communications Interface)820、存储器(memory)830和通信总线840，其中，处理器810，通信接口820，存储器830通过通信总线840完成相互间的通信。处理器810可以调用存储器830中的逻辑指令，以执行小程序运行方法，该方法包括：并行执行在Service层加载脚本资源及在View层加载渲染资源；响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
此外，上述的存储器830中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Ran文档对象模型Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
另一方面，本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，计算机程序可存储在非暂态计算机可读存储介质上，所述计算机程序被处理器执行时，计算机能够执行上述各方法所提供的小程序运行方法，该方法包括：并行执行在Service层加载脚本资源及在View层加载渲染资源；响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
又一方面，本发明实施例还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各方法提供的小程序运行方法，该方法包括：并行执行在Service层加载脚本资源及在View层加载渲染资源；响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

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元素为所述updateContainer方法的参数。
4.根据权利要求3所述的小程序运行方法，其特征在于，所述页面操作方法包括创建元素方法、更新元素方法及删除元素方法。
5.根据权利要求1所述的小程序运行方法，其特征在于，所述根据所述页面操作处理指令渲染页面，包括：利用单独的进程根据所述页面操作处理指令渲染页面；
所述方法还包括：在页面关闭后，将页面状态保存到后台。
6.根据权利要求1所述的小程序运行方法，其特征在于，所述根据所述页面操作处理指令渲染页面，包括：
解析所述页面操作指令，根据所述页面操作指令处理文档对象模型元素，完成页面渲染。
7.一种小程序运行装置，其特征在于，包括：
资源加载模块，用于：并行执行在Service层加载脚本资源及在View层加载渲染资源；
页面初始化模块，用于：响应于所述脚本资源加载完成且所述Service层接收到所述渲染资源加载完成的信息，利用所述Service层通过Native层向所述View层发送页面初始化指令，利用所述View层解析所述页面初始化指令并渲染页面；
页面监听模块，用于：响应于所述View层监听到页面操作，利用所述View层将所述页面操作通过所述Native层反馈给所述Service层；
页面操作处理模块，用于：响应于所述Service层接收到所述页面操作，利用所述Service层根据所述页面操作产生页面操作处理指令，并通过Native层将所述页面操作处理指令传递给所述View层；
页面渲染模块，用于：响应于所述View层接收到所述页面操作处理指令，利用所述View层解析所述页面操作处理指令，并根据所述页面操作处理指令渲染页面。
8.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述小程序运行方法的步骤。
9.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述小程序运行方法的步骤。
10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述小程序运行方法的步骤。
CN202210255130.4A 2022-03-15 2022-03-15 小程序运行方法、装置、电子设备、存储介质及程序产品 Pending CN114741126A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210255130.4A CN114741126A (zh) 2022-03-15 2022-03-15 小程序运行方法、装置、电子设备、存储介质及程序产品

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210255130.4A CN114741126A (zh) 2022-03-15 2022-03-15 小程序运行方法、装置、电子设备、存储介质及程序产品

Publications (1)

Publication Number Publication Date
CN114741126A true CN114741126A (zh) 2022-07-12

Family

ID=82277115

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210255130.4A Pending CN114741126A (zh) 2022-03-15 2022-03-15 小程序运行方法、装置、电子设备、存储介质及程序产品

Country Status (1)

Country Link
CN (1) CN114741126A (zh)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106294658A (zh) * 2016-08-04 2017-01-04 腾讯科技（深圳）有限公司 网页快速展示方法和装置
CN111158818A (zh) * 2019-12-24 2020-05-15 中国建设银行股份有限公司 一种页面渲染方法和装置

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106294658A (zh) * 2016-08-04 2017-01-04 腾讯科技（深圳）有限公司 网页快速展示方法和装置
CN111158818A (zh) * 2019-12-24 2020-05-15 中国建设银行股份有限公司 一种页面渲染方法和装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
武思怡等: "微信小程序开发研究", 《无线互联科技》, no. 11, 30 June 2008 (2008-06-30), pages 1 - 3 *

Similar Documents

Publication Publication Date Title
CN111158818B (zh) 一种页面渲染方法和装置
CN109800173B (zh) 程序调试方法、装置及存储介质
JP6092381B2 (ja) ウェブクライアントを介したリモートアプリケーションへのアクセスを提供する方法、システム、及びコンピュータ読取可能記憶媒体
US20140082511A1 (en) Method and system for emulating desktop software applications in a mobile communication network
CN107479867B (zh) 应用软件插件化运行方法及装置
CN112260853B (zh) 容灾切换方法、装置、存储介质及电子设备
US10404568B2 (en) Agent manager for distributed transaction monitoring system
CN111182019B (zh) 跨平台通信方法及装置、电子设备
CN110389755B (zh) 代码处理方法及装置、电子设备和计算机可读存储介质
EP4119207A1 (en) Vibration control method and apparatus, and electronic device and computer-readable storage medium
WO2019201340A1 (zh) 处理器核心调度方法、装置、终端及存储介质
CN111459539A (zh) 基于镜像分层的持续集成流水线运行方法及装置
CN111026439A (zh) 应用程序的兼容方法、装置、设备及计算机存储介质
CN112947905B (zh) 一种图片加载方法、装置
CN111694620A (zh) 第三方业务的交互方法、装置、设备及计算机存储介质
CN108228139B (zh) 基于html5浏览器框架的单片机开发系统及装置
CN114218052A (zh) 一种业务交互图生成方法、装置、设备及存储介质
CN113157270A (zh) 一种页面适配方法和装置
CN114741126A (zh) 小程序运行方法、装置、电子设备、存储介质及程序产品
CN115878226A (zh) 一种h5离线包加载方法及装置
CN110599112A (zh) 一种网络页面开发、维护方法和装置
CN114028801A (zh) 基于云端的用户输入方法、装置、设备及存储介质
CN113297522A (zh) 一种页面渲染方法、装置、电子设备及可读存储介质
CN113626330A (zh) 混合模式移动应用调试方法及系统
CN110995565A (zh) 一种基于mvvm架构的页面显示方法

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