CN110750255A - 一种小程序渲染方法和装置 - Google Patents

Abstract

本说明书提供一种小程序渲染方法和装置，其中方法包括：在无界面浏览器开启的目标页面，加载待渲染的小程序包的本地访问地址，以获取和运行所述小程序包；通过浏览器通信控制模块拦截所述目标页面发送的框架代码请求，所述框架代码请求用于请求加载小程序框架代码；向所述框架代码请求返回本地框架代码，并加载运行所述本地框架代码；通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，所述通信桥接模块用于负责小程序的通信。

Description

一种小程序渲染方法和装置

技术领域

本说明书涉及数据处理技术，特别涉及一种小程序渲染方法和装置。

背景技术

小程序是一种全新的开放模式，可以被便捷地获取和传播，为终端用户提供更优的用户体验。在小程序的发展中，同时也要保障小程序的内容安全，对小程序内容进行质量风险防控是一项重要的工作。而小程序是运行在客户端的，如果在服务端进行小程序质量风险防控，那么如何实现小程序在服务端的渲染是需要解决的问题。

发明内容

有鉴于此，本说明书至少一个实施例提供一种小程序渲染方法和装置，以实现服务端的小程序渲染，且成本较低。

具体地，本说明书是通过如下技术方案实现的：

第一方面，提供了一种小程序渲染方法，所述方法包括：

在无界面浏览器开启的目标页面，加载待渲染的小程序包的本地访问地址，以获取和运行所述小程序包；

通过浏览器通信控制模块拦截所述目标页面发送的框架代码请求，所述框架代码请求用于请求加载小程序框架代码；

向所述框架代码请求返回本地框架代码，并加载运行所述本地框架代码；

通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，所述通信桥接模块用于负责小程序的通信。

第二方面，提供一种小程序渲染装置，所述装置包括：

初始加载模块，用于在无界面浏览器开启的目标页面，加载待渲染的小程序包的本地访问地址，以获取和运行所述小程序包；

框架获取模块，用于通过浏览器通信控制模块拦截所述目标页面发送的框架代码请求，所述框架代码请求用于请求加载小程序框架代码；

框架加载模块，用于向所述框架代码请求返回本地框架代码，并加载运行所述本地框架代码；

渲染处理模块，用于通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，所述通信桥接模块用于负责小程序的通信。

第三方面，提供一种小程序渲染设备，所述设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现本说明书任一实施例所述的小程序渲染方法的步骤。

本说明书至少一个实施例提供的小程序渲染方法和装置，通过使用服务端能运行的技术方案，实现了小程序的服务端渲染；并且，通过使用无界面浏览器实现小程序在服务端的无界面运行，减少线上安全风险。

附图说明

图1是本说明书至少一个实施例提供的一种浏览器准备工作流程；

图2是本说明书至少一个实施例提供的一种框架代码请求的示意图；

图3是本说明书至少一个实施例提供的一种小程序通信的原理图；

图4是本说明书至少一个实施例提供的一种小程序通信的细化架构图；

图5是本说明书至少一个实施例提供的一种小程序渲染方法的示意图；

图6是本说明书至少一个实施例提供的一种小程序渲染装置的结构图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书的一些方面相一致的装置和方法的例子。

本公开实施例的目的是提供一种在服务端渲染小程序的方法，实现了服务端的小程序渲染，才能抓取小程序页面内容，进行小程序内容的安全防控。例如，可以在基于Linux的服务器进行小程序渲染。并且，通过本说明书实施例提供的方法，在服务端渲染小程序时，可以不依赖显示装置，该显示装置例如包括但不限于：显示器、显卡、附带界面的设备、显卡模拟器等。

实现小程序的服务端渲染，可以通过四个步骤：小程序构建包准备、浏览器准备、小程序环境准备和小程序运行。

详细描述如下：

1)小程序构建包准备

其中，所述的小程序构建包是待渲染的小程序包，该小程序包与小程序在客户端运行时的客户端访问包一致，这样能够保证渲染的小程序页面与客户端运行时用户看到的小程序页面相同。

将小程序包可以放置在本地访问地址，该本地访问地址可以是服务端的某个本地指定地址。例如，所述本地指定地址可以是http://127.0.0.1:8000/index.html，并在该本地指定地址开启对小程序包的本地静态资源服务(Local Server)。这样后续浏览器可以访问该地址以加载运行小程序包。

2)浏览器准备

本实施例中使用的浏览器可以是无界面浏览器，在服务端运行时不需要可视化界面，采用无界面浏览器运行可以降低实现成本。例如，可以使用Headless Chromium浏览器，在不显示界面的情况下运行Chromium浏览器。

请参见图1的流程，描述浏览器准备工作如下：

在步骤100中，开启浏览器的一个页面。

例如，可以通过CDP(Chrome DevTools Protocol)命令，该CDP命令也可以称为远程调试协议，开启Headless Chromium浏览器，并打开浏览器中的一个新页面，该新页面可以用Page标识，该新页面可以称为目标页面。其中，CDP命令是一个用于远程控制Chrome/Chromium行为的通信协议，可以用于开启浏览器/开启页面/拦截请求/提取页面内容等操作。执行CDP命令的模块也可以称为浏览器通信控制模块。

在步骤102中，在页面中注入通信桥接模块。

本步骤中，可以在页面的JS环境中注入Bridge模块，该Bridge模块是用于小程序框架(af-appx)向外部通讯的桥梁，在后续小程序运行的步骤中使用。该Bridge模块可以称为通信桥接模块。

在步骤104中，在页面中打开小程序包的访问地址，以加载运行小程序包。

本步骤中，可以在页面中打开上述访问地址http://127.0.0.1:8000/index.html，以通过该地址获取小程序包并加载运行。小程序包中可以包括index.worker.js、index.js等各个文件。

3)小程序环境准备

本步骤中的环境准备，主要是在目标页面中加载小程序框架的框架代码，小程序框架可以用于小程序的运行管理。这个过程属于小程序初始化的过程。

其中，小程序的框架代码也可以包括多个代码部分，对应的，通过多个框架代码请求去分别请求不同的代码部分。

例如，请参见图2的示意，小程序可以运行一个线程，该线程通过一个框架代码请求(NetworkRequest请求)去请求框架代码中的af-appx.js。小程序还可以运行另一个线程，该线程也通过一个框架代码请求(NetworkRequest请求)去请求框架代码中的af-appx.worker.js。即通过多个线程分别执行不同的框架代码请求。

本实施例中，浏览器可以通过浏览器通信控制模块CDP命令，拦截上述小程序的目标页面发送的用于请求加载小程序框架代码的框架代码请求。

例如，上述的请求小程序框架代码的处理，可以是这样的：在页面的JS环境中注入Bridge模块有两个不同环境的衍生体，一个在Render一个Worker，本实施例是WebWorker。对于Render里面的Bridge运行环境为浏览器正常的Render环境，Worker中的Bridge是WebWorker环境下的。Render和WebWorker都会发送对于小程序框架appx的请求，Render发送对于af-appx.js的请求，WebWorker发送对于af-appx.worker.js的请求。浏览器通信控制模块可以通过CDP命令对上述请求都进行拦截。

如上，可以将Render中的浏览器通信控制模块称为第一控制单元，将WebWorker中的浏览器通信控制模块称为第二控制单元；将af-appx.js称为第一框架代码，将af-appx.worker.js称为第二框架代码。那就是第一控制单元拦截目标页面发送的用于请求第一框架代码的请求，第二控制单元拦截目标页面发送的对第二框架代码的请求。

在拦截后，向该框架代码请求返回本地替代脚本，该本地替代脚本可以称为本地框架代码，该本地框架代码运行后同样可以运行小程序框架，只不过NetworkRequest请求是向外部获取框架代码，而本实施例的框架代码是放在了服务端本地获取。这加快了小程序的加载速度。

此外，小程序业务代码执行线程是通过WebWorker实现的。请求af-appx.worker.js的NetworkRequest请求也在WebWorker中发起。该WebWorker是无界面浏览器自带的worker，也是可以通过执行CDP命令进行请求的拦截。

需要说明的是，在小程序运行前的准备工作中，或者在小程序运行中，涉及到的业务代码执行环境，可以使用无界面浏览器自带的WebWorker来模拟。该浏览器自带的Worker不仅实现成本低，而且能够与CDP命令互通，可以通过CDP命令执行请求拦截、JS脚本注入等。

在其他的实现方式中，业务代码执行环境也可以用Nodejs的child_process替代，但是需要在执行上下文补全importScripts和fetch等WebWorker中才存在的变量及方法。此外，无界面浏览器自带的ServiceWorker，存在无法与CDP命令互通的问题，做资源拦截会存在障碍。

本步骤中，获取到框架代码后，加载本地框架代码，以运行小程序框架。

4)小程序运行

在初始化过程完成后，小程序就可以开始执行业务逻辑过程。

本步骤中，小程序可以与外界通信，以获取到小程序页面内容，实现小程序渲染。其中，通信桥接模块Bridge可以负责小程序与外界的通信。例如，图3所示是由Bridge模块控制小程序的外界通信。

图4是通过Bridge模块控制的小程序与外界通信的细化架构示意图，如图4所示，浏览器加载运行的小程序包中，可以包括两种类型的代码，分别运行在worker(WebWorker)以及render渲染层，如下可以简称worker和render。worker运行小程序的逻辑处理代码，包括事件处理，API调用以及框架的生命周期管理。render运行小程序的渲染代码，主要包括模版/样式和框架的跨终端的js组件，获取逻辑层的数据操作渲染引擎(小程序框架)进行渲染。worker和render会建立连接，将需要渲染的数据传递给对应的render进行渲染，而render则将组件的触发事件送到对应的worker处理，同时可以接受worker的setData调用小程序框架重新渲染。

请继续参见图4，本实施例的通信桥接模块Bridge可以包括两个定制Bridge，该两个定制Bridge分别位于worker和render中。render和worker都可能发起jsapi的请求，都会先经过小程序框架(af-appx，af-appx.worker)，之后转发到bridge模块(Bridge模块在render和worker中都有，作用都是进行jsapi的收发)，bridge模块之后将信息转发到NodeJS这一侧的bridgeCall,这个模块集中处理各类jsapi。

在小程序要与外界通信时，例如，worker中的业务逻辑代码要向另一个服务器请求获取小程序页面内容，那么业务逻辑代码可以指示小程序框架封装一个业务请求，该小程序框架的业务请求再接着由Bridge模块进一步进行格式封装后，发送给NodeJS中的BridgeCall进行处理，比如向外界服务器发送该请求。

如下一个示例：小程序业务逻辑代码确定要去外部服务器获取用户信息，小程序框架(appx)生成一个向外界的业务请求my.getUserInfo()。如图4所示，小程序框架将该请求发送至worker中的定制Bridge模块，该定制的Bridge模块会根据该请求进一步封装为***jsbridge.call(getUserInfo)，并基于该封装后的业务请求执行通信处理，以获取业务请求对应的小程序页面内容，比如，将该封装后的业务请求发送至NodeJS(bridgeCall)。该NodeJS(bridgeCall)可以调用相应的API，根据上述请求生成rpc.request('getUserInfo')，向外界服务器请求获取用户信息，该用户信息就相当于小程序页面内容。待外界返回用户信息后，NodeJS将该用户信息返回worker，worker和render中的Bridge模块之间交互将该用户信息传递至render进行渲染。当然，在无界面浏览器中，render的渲染不进行可视化显示。

类似的，其他涉及到小程序与外界的通信，或者小程序的render和worker之间的通信，都由Bridge模块辅助完成。所述“Bridge模块”包括将Bridge根据小程序框架af-appx的通信需求定制各类API，以实现正常小程序通信为目标。

此外，上述例子是以小程序向外界服务器获取页面用户信息为例，在其他的实现方式中，对于小程序向外界的通信请求中的一些涉及到与用户相关的授权流程，比如，需要用户来选择某些选项，或者由用户来提供某些输入信息，可以通过Bridge进行定制化返回请求结果。

例如，请参见图4，NodeJS中的BridgeCall在接收到某些涉及到用户授权的外界通信请求时，可以调用对应的API接口，该API接口能够直接返回定制化的结果，该结果可以是模拟用户对某些信息的响应。

通过如上四个步骤，完成服务端的小程序渲染。在渲染过程中获取到小程序页面后，可以通过CDP命令提取小程序页面内容，以进行安全检测或者其他应用。具体提取的小程序内容可以根据实际业务需求确定。

根据以上描述，得到本说明书提供的小程序渲染方法参见图5所示：

在步骤500中，在无界面浏览器开启的目标页面，加载待渲染的小程序包的本地访问地址，以获取和运行所述小程序包。

本步骤中，在无界面浏览器开启一个页面，在所述页面加载运行小程序包，并在所述页面注入用于负责小程序外部通信的通信桥接模块。

在步骤502中，通过浏览器通信控制模块拦截所述目标页面发送的框架代码请求，所述框架代码请求用于请求加载小程序框架代码。

在步骤504中，向所述框架代码请求返回本地框架代码，并加载运行所述本地框架代码。

在步骤506中，通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，所述通信桥接模块用于负责小程序的通信。

本实施例的小程序渲染方法，通过使用了JavaScript、Nodejs及Chromium等Linux服务端能运行的技术方案，实现了小程序的服务端渲染；并且，通过使用无界面浏览器实现小程序在服务端的无界面运行，减少线上安全风险。该方法还使用了WebWorker作为小程序业务代码执行环境的实现方案，通过定制化Bridge模块完成和小程序框架(Appx)框架通讯，使用CDP命令拦截网络请求、资源注入和重定向，保证小程序渲染正常进行，加快加载效率；还使用Bridge模块定制化返回结果，保证无界面模式正常运行。

图6是本说明书至少一个实施例提供的小程序渲染装置的结构示意图，该装置可以执行本说明书任一实施例的小程序渲染方法。

如图6所示，该装置可以包括：初始加载模块61、框架获取模块62、框架加载模块63和渲染处理模块64。

初始加载模块61，用于在无界面浏览器开启的目标页面，加载待渲染的小程序包的本地访问地址，以获取和运行所述小程序包；

框架获取模块62，用于通过浏览器通信控制模块拦截所述目标页面发送的框架代码请求，所述框架代码请求用于请求加载小程序框架代码；

框架加载模块63，用于向所述框架代码请求返回本地框架代码，并加载运行所述本地框架代码；

渲染处理模块64，用于通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，所述通信桥接模块用于负责小程序的通信。

在一个例子中，所述浏览器通信控制模块包括：运行在Render中的第一控制单元和运行在WebWorker中的第二控制单元；所述小程序框架代码包括：第一框架代码和第二框架代码；

所述框架获取模块62，在用于通过浏览器通信控制模块拦截目标页面发送的框架代码请求时，包括：通过浏览器通信控制模块中的第一控制单元拦截所述目标页面发送的对所述第一框架代码的请求；通过浏览器通信控制模块中的第二控制单元拦截所述目标页面发送的对所述第二框架代码的请求。

在一个例子中，渲染处理模块64，具体用于：通过所述通信桥接模块，对小程序框架的业务请求进行封装，基于封装后的业务请求执行通信处理，以获取所述业务请求对应的小程序页面内容。

在一个例子中，所述渲染处理模块64，在用于控制小程序页面渲染时，包括：对于小程序的业务请求，返回定制的请求结果，所述请求结果用于模拟用户对所述业务请求的响应。

在一个例子中，所述渲染处理模块64，还用于通过所述浏览器通信控制模块，提取小程序页面内容。

本说明书至少一个实施例还提供了一种小程序渲染设备，所述设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现本说明书任一实施例所述的小程序渲染方法中的步骤。

本说明书至少一个实施例还提供了一种计算机可读存储介质，该介质上存储有计算机程序，该程序被处理器执行时，可以实现本说明书任一实施例所述的小程序渲染方法中的处理步骤，或者可以实现本说明书任一实施例所述的小程序渲染方法的处理步骤。

上述方法实施例中所示流程中的各个步骤，其执行顺序不限制于流程图中的顺序。此外，各个步骤的描述，可以实现为软件、硬件或者其结合的形式，例如，本领域技术人员可以将其实现为软件代码的形式，可以为能够实现所述步骤对应的逻辑功能的计算机可执行指令。当其以软件的方式实现时，所述的可执行指令可以存储在存储器中，并被设备中的处理器执行。

上述实施例阐明的装置或模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本说明书一个或多个实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本说明书一个或多个实施例可提供为方法、***、或计算机程序产品。因此，本说明书一个或多个实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书一个或多个实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书一个或多个实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书一个或多个实施例，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于数据采集设备或者数据处理设备实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

以上所述仅为本说明书的较佳实施例而已，并不用以限制本说明书，凡在本说明书的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本说明书保护的范围之内。

Claims (13)

1.一种小程序渲染方法，所述方法包括：

在无界面浏览器开启的目标页面，加载待渲染的小程序包的本地访问地址，以获取和运行所述小程序包；

通过浏览器通信控制模块拦截所述目标页面发送的框架代码请求，所述框架代码请求用于请求加载小程序框架代码；

向所述框架代码请求返回本地框架代码，并加载运行所述本地框架代码；

通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，所述通信桥接模块用于负责小程序的通信。

2.根据权利要求1所述的方法，所述在无界面浏览器开启的目标页面，加载待渲染的小程序包的本地访问地址之前，所述方法还包括：

获取待渲染的所述小程序包，所述小程序包与客户端访问包一致；

在本地访问地址开启对所述小程序包的本地静态资源服务，以使得在无界面浏览器的所述目标页面访问所述本地访问地址加载所述小程序包。

3.根据权利要求1所述的方法，所述浏览器通信控制模块包括：运行在Render中的第一控制单元和运行在WebWorker中的第二控制单元；所述小程序框架代码包括：第一框架代码和第二框架代码；

所述通过浏览器通信控制模块拦截目标页面发送的框架代码请求，包括：所述第一控制单元拦截所述目标页面发送的对所述第一框架代码的请求；所述第二控制单元拦截所述目标页面发送的对所述第二框架代码的请求。

4.根据权利要求3所述的方法，所述第一框架代码是af-appx.js；所述第二框架代码是af-appx.worker.js；所述WebWorker是无界面浏览器自带的Worker。

5.根据权利要求1所述的方法，所述通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，包括：

通过所述通信桥接模块，对小程序框架的业务请求进行封装；

基于封装后的业务请求执行通信处理，以获取所述业务请求对应的小程序页面内容。

6.根据权利要求1所述的方法，所述通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，包括：对于小程序的业务请求，返回定制的请求结果，所述请求结果用于模拟用户对所述业务请求的响应。

7.根据权利要求1所述的方法，所述方法还包括：通过所述浏览器通信控制模块，提取小程序页面内容。

8.一种小程序渲染装置，所述装置包括：

初始加载模块，用于在无界面浏览器开启的目标页面，加载待渲染的小程序包的本地访问地址，以获取和运行所述小程序包；

框架获取模块，用于通过浏览器通信控制模块拦截所述目标页面发送的框架代码请求，所述框架代码请求用于请求加载小程序框架代码；

框架加载模块，用于向所述框架代码请求返回本地框架代码，并加载运行所述本地框架代码；

渲染处理模块，用于通过所述目标页面中设置的通信桥接模块，控制小程序页面渲染，所述通信桥接模块用于负责小程序的通信。

9.根据权利要求8所述的装置，所述浏览器通信控制模块包括：运行在Render中的第一控制单元和运行在WebWorker中的第二控制单元；所述小程序框架代码包括：第一框架代码和第二框架代码；

所述框架获取模块，在用于通过浏览器通信控制模块拦截目标页面发送的框架代码请求时，包括：通过浏览器通信控制模块中的第一控制单元拦截所述目标页面发送的对所述第一框架代码的请求；通过浏览器通信控制模块中的第二控制单元拦截所述目标页面发送的对所述第二框架代码的请求。

10.根据权利要求8所述的装置，

所述渲染处理模块，具体用于：通过所述通信桥接模块，对小程序框架的业务请求进行封装，基于封装后的业务请求执行通信处理，以获取所述业务请求对应的小程序页面内容。

11.根据权利要求8所述的装置，所述渲染处理模块，在用于控制小程序页面渲染时，包括：对于小程序的业务请求，返回定制的请求结果，所述请求结果用于模拟用户对所述业务请求的响应。

12.根据权利要求8所述的装置，所述渲染处理模块，还用于通过所述浏览器通信控制模块，提取小程序页面内容。

13.一种小程序渲染设备，所述设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1至7任一所述的小程序渲染方法的步骤。

Images