CN113515286B - 一种小程序生成运行方法、装置、设备及存储介质 - Google Patents

一种小程序生成运行方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN113515286B
CN113515286B CN202110502394.0A CN202110502394A CN113515286B CN 113515286 B CN113515286 B CN 113515286B CN 202110502394 A CN202110502394 A CN 202110502394A CN 113515286 B CN113515286 B CN 113515286B
Authority
CN
China
Prior art keywords
applet
dom
bom
web application
code
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
Application number
CN202110502394.0A
Other languages
English (en)
Other versions
CN113515286A (zh
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.)
Shanghai Anchnet Network Technology Co ltd
Original Assignee
Shanghai Anchnet 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 Shanghai Anchnet Network Technology Co ltd filed Critical Shanghai Anchnet Network Technology Co ltd
Priority to CN202110502394.0A priority Critical patent/CN113515286B/zh
Publication of CN113515286A publication Critical patent/CN113515286A/zh
Application granted granted Critical
Publication of CN113515286B publication Critical patent/CN113515286B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/42—Syntactic analysis
    • G06F8/427—Parsing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/44—Encoding
    • G06F8/447—Target code generation
    • 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/44505—Configuring for program initiating, e.g. using registry, configuration files
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

本申请实施例涉及计算机技术领域，具体涉及一种小程序生成运行方法、装置、设备及存储介质，旨在实现快速地将基于web前端框架的应用作为标准软件工程向小程序平台进行转换分发。所述方法包括：将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，以作为所述小程序的基础代码文件；创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中；根据所述自定义DOM/BOM的API生成所述小程序对应的DOM Tree；根据所述DOM Tree生成所述小程序的页面。

Description

一种小程序生成运行方法、装置、设备及存储介质
技术领域
本申请实施例涉及计算机技术领域，具体而言，涉及一种小程序生成运行方法、装置、设备及存储介质。
背景技术
小程序是一种具有无需下载安装、扫码即用的特点的程序，在当下已经成为了一种最流行、最火热的营销方式及介质，应用在线上线下大部分场景中，在云逇。现有的小程序有自己的一套开发框架，现在有很多企业的营销应用是基于web(网页)前端框架编写的，若需要将原应用的程序转化为小程序，需要花费成本进行迁移，目前的迁移方法大多使用了在compiletime(编译时)将代码进行对应转换的方式，直接将原来程序的代码进行编译，编译为小程序代码。
现有技术的问题是将原来程序的代码直接进行编译，不能完全支持原有框架的语法特性、容易造成bug(漏洞)等，使得转换后的小程序不能完美的运行。
发明内容
本申请实施例提供一种一种小程序生成运行方法、装置、设备及存储介质，旨在实现快速地将基于web前端框架的应用作为标准软件工程向小程序平台进行转换分发。
本申请实施例第一方面提供一种小程序生成运行方法，所述方法包括：
将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，以作为所述小程序的基础代码文件；
创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中；
根据所述自定义DOM/BOM的API生成所述小程序对应的DOM Tree；
根据所述DOM Tree生成所述小程序的页面。
可选地，将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，所述方法包括：
将所述第一语言代码解析为抽象语法树；
对所述抽象语法树进行适应性修改，得到修改后的抽象语法树；
将所述修改后的抽象语法树转换为所述基础代码。
可选地，创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中，包括：
创建针对所述小程序的页面的自定义DOM/BOM；
将所述自定义的DOM/BOM的API放入新创建的所述web应用的运行时包中；
将所述运行时包注入到所述小程序中，并对所述运行时包中的代码进行优化。
可选地，根据所述自定义DOM/BOM的API生成所述小程序对应的DOM Tree，包括：
通过所述运行时包中所述自定义DOM/BOM的API来调用对应的DOM/BOM；
通过render函数，根据所述DOM/BOM生成所述小程序对应的DOM Tree。
可选地，根据所述DOM Tree生成所述小程序的页面，包括：
将所述小程序的所有原生组件进行模板化处理，得到所述小程序的原生组件对应的多个模板；
根据所述DOM Tree中包含的数据，按照所述多个模板对页面进行渲染，得到所述小程序的页面。
可选地，根据所述DOM Tree中包含的数据，按照所述多个模板对页面进行渲染，得到所述小程序的页面，包括：
读取所述DOM Tree中包含的多个节点的数据；
根据所述多个节点的数据，选择所述多个节点中每个节点对应的模板；
根据所述每个节点对应的模板，对所述每个节点中包含的元素进行渲染，得到所述小程序的页面。
本申请实施例第二方面提供一种小程序生成运行装置，所述装置包括：
代码编译模块，用于将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，以作为所述小程序的基础代码文件；
运行时包注入模块，用于创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中；
DOM Tree生成模块，用于根据所述自定义DOM/BOM的API生成所述小程序对应的DOM Tree；
页面生成模块，用于根据所述DOM Tree生成所述小程序的页面。
可选地，所述代码编译模块包括：
代码解析子模块，用于将所述第一语言代码解析为抽象语法树；
语法树修改子模块，用于对所述抽象语法树进行适应性修改，得到修改后的抽象语法树；
代码转换子模块，用于将所述修改后的抽象语法树转换为所述基础代码。
可选地，所述运行时包注入模块包括：
程序创建子模块，用于创建针对所述小程序的页面的自定义DOM/BOM；
运行时包创建子模块，用于将所述自定义的DOM/BOM的API放入新创建的所述web应用的运行时包中；
代码优化子模块，用于将所述运行时包注入到所述小程序中，并对所述运行时包中的代码进行优化。
可选地，所述DOM Tree生成模块包括：
程序设置子模块，用于通过所述运行时包中所述自定义DOM/BOM的API来调用对应的DOM/BOM；
DOM Tree生成子模块，用于通过render函数，根据所述DOM/BOM生成所述小程序对应的DOM Tree。
可选地，所述页面生成模块包括：
模板处理子模块，用于将所述小程序的所有原生组件进行模板化处理，得到所述小程序的原生组件对应的多个模板；
页面生成子模块，用于根据所述DOM Tree中包含的数据，按照所述多个模板对页面进行渲染，得到所述小程序的页面。
可选地，所述页面生成子模块包括：
数据读取子模块，用于读取所述DOM Tree中包含的多个节点的数据；
模板选择子模块，用于根据所述多个节点的数据，选择所述多个节点中每个节点对应的模板；
页面渲染子模块，用于根据所述每个节点对应的模板，对所述每个节点中包含的元素进行渲染，得到所述小程序的页面。
本申请实施例第三方面提供一种可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现如本申请第一方面所述的方法中的步骤。
本申请实施例第四方面提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现本申请第一方面所述的方法的步骤。
采用本申请提供的一种小程序生成运行方法，将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码；将自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中；根据所述自定义DOM/BOM生成所述小程序对应的DOM Tree；根据所述DOM Tree生成所述小程序的页面。本申请中将自定义针对小程序设计的BOM/DOM的API放入了新创建的web应用的运行时包中，将web应用的运行时包加入了小程序中，使得小程序在运行时有了一套适合的BOM/DOM,可以更加流畅完美的运行，利用web框架生成了DOM tree(节点树)，利用该DOM Tree的数据渲染生成小程序的页面，达到了将基于web前端框架编写的应用转换为小程序并完美运行的效果，降低了开发成本，实现移动端多平台应用的最大化复用。
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本申请一实施例提出的小程序生成运行方法的流程图；
图2是本申请一实施例提出的小程序生成运行装置的示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
参考图1，图1是本申请一实施例提出的一种小程序生成运行方法的流程图。如图1所示，该方法包括以下步骤：
S11：将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，以作为所述小程序的基础代码文件。
本实施例中，目标web应用就是需要转化为小程序的应用web(网页)应用是常见的一种应用，用户可以直接通过浏览器访问该程序，web应用通常是基于react或者vue框架进行编写(下面的实施例中以web应用的编写框架为react框架为例)，而小程序开发有自己的框架，因此web应用需要进行相应的处理转化才可以转化为小程序。第一语言代码是指目标web应用的原来的程序代码，首先需要编译工具将第一语言代码编译为目标web应用对应的小程序的基础代码，在该基础代码文件的基础上继续实现web应用迁移至小程序的必要功能。将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，以作为所述小程序的基础代码文件的具体的步骤为：
S11-1：将所述第一语言代码解析为抽象语法树。
本实施例中，可以使用语言编译工具，将第一语言代码输入语言编译工具中，语言编译工具首先将第一语言代码解析为抽象语法树，抽象语法树是源代码语法结构的一种抽象表示，以树状的形式表现编程语言的语法结构，书上的每一个节点都表示源代码中的一种结构。
示例地，第一语言代码为H5语言，编译工具为babel(一种编译器)，将H5语言编写的第一语言代码输入babel中后，首先由babel-parser将代码解析为抽象语法树。
S11-2：对所述抽象语法树进行适应性修改，得到修改后的抽象语法树。
本实施例中，需要对抽象语法树进行适应性修改，就是根据想要转化得到的语言的语言的结构特性对抽象语法树进行适应性修改。
示例地，编译工具为babel工具，在通过babel-parser得到抽象语法树之后，通过babel-types对抽象语法树进行适应性的修改，转换，得到修改后的抽象语法树，例如小程序的基础代码为JS格式，那么修改后的抽象语法树就是根据JS语言的规则和特征修改的抽象语法树。
S11-3：将所述修改后的抽象语法树转换为所述基础代码。
本实施例中，得到修改后的抽象语法树之后，该抽象语法树上的规则和语法是需要转化得到的语言的规则和语法，编译工具直接将该抽象语法树转换为小程序的基础代码。
示例地，编译工具为babel工具，babel中的babel-generate根据修改后的抽象语法树，生成编译后的新代码，这个新代码就是目标web应用对应的小程序的基础代码，基础代码的格式可以是WXML、WXSS、JS、JSON等。
至此，生成小程序的编译时的任务就完成了，得到了小程序的基础代码文件，但是该小程序的基础代码文件还不可以直接运行，需要进行进一步的处理。
S12：创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中。
本实施例中，DOM是文档对象模型，可以动态的访问浏览器程序和脚本，更新其内容、结构和风格。BOM是浏览器对象模型，主要处理浏览器和窗口框架。在web前端中，无论使用什么框架编写应用程序，其代码在运行之后都是调用了浏览器中的的DOM/BOM API，通过调用这些API，实现各种功能。
web应用的运行时(runtime)包是web应用在运行时必须的程序，其中包括了各种DOM/BOM API，本申请为了目标小程序自定义了一系列高效、精简版的DOM/BOM API，并使用专门的工具将该运行时包注入到小程序中。具体的步骤为：
S12-1：创建针对所述小程序的页面的自定义DOM/BOM。
本实施例中，为了使的目标web应用转换为小程序之后可以完美的运行，针对小程序创建了自定义的DOM/BOM，其中，创建的DOM为虚拟DOM，虚拟DOM是虚拟出来的节点，是可以代表DOM Tree的对象，在更新时付出的代价远小于真实的DOM Tree。
本实施例中自定义的DOM Tree中设置有记录功能，可以自动记录web前端框架运行时包含的所有组件的状态(组件就是将一段可以实现某功能的程序封装而成一个程序模块)，进而将这些组件通过DOM Tree更新到小程序页面中。
示例地，一些自定义DOM/BOM API包括：
createReactApp()(在小程序入口文件中调用，创建一个小程序App构造函数接受的小程序应用规范对象)。
createVueApp()(在小程序入口文件中调用，创建一个小程序App构造函数接受的小程序应用规范对象)。
createPageConfig()(在小程序页面文件中调用，创建一个小程序Page构造函数接受的小程序页面规范对象)。
window(在小程序端模仿浏览器的window实现的对象，在浏览器环境中返回浏览器本身的window。此对象通过Webpack的ProvidePlugin注入到全局对象以供第三方库调用)。
navigator(在小程序端模仿浏览器的navigator实现的对象，在浏览器环境中返回浏览器本身的navigator。此对象通过Webpack的ProvidePlugin注入到全局对象以供第三方库调用)。
Document(在小程序端模仿浏览器的document实现的对象，在浏览器环境中返回浏览器本身的document。此对象通过Webpack的ProvidePlugin注入到全局对象以供第三方库调用)。
S12-2：将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中。
本实施例中，小程序具有方便，快捷，无需下载的特征，所以小程序的代码也具有精简的特点，而web应用程序代码中的DOM/BOM是基于web前端框架编写的，代码相较于小程序代码来说较为繁琐，故本实施例自定义了一套精简版的API,通过这些API就可以调用自定义的DOM/BOM。自定义API可以采用
S12-3：将所述运行时包注入到所述小程序中，并对所述运行时包中的代码进行优化。
本实施例中，可以通过专门的工具将运行时包注入到小程序中，web程序的运行时包是在web程序的运行时才进行编译的，将运行时包注入到小程序中后，小程序可以在运行时对运行时包中的DOM/BOM的API进行访问，调用自定义的DOM/BOM。
本实施例中，运行时包中的程序被注入了小程序中的逻辑层，小程序中的逻辑层负责处理事物的逻辑，将数据进行处理后发送给视图层。
示例地，注入的工具可以是webpack的ProvidePlugin插件。
本实施例中，因为运行时包中的程序是基于web前端框架编写的，其中包含了大量浏览器相关的代码，导致运行时包容量过大，而这部分代码在小程序中并不需要，因此可以将不需要的地方进行删除。
示例地，目标web应用是使用H5语言在react框架上编写的，而react-DOM加入了运行时包中，因为react-DOM上包含了大量的浏览器兼容类代码，这部分代码是小程序不需要的，故将这部分代码进行删除，减少包的容量。
S13：根据所述自定义DOM/BOM生成所述小程序对应的DOM Tree。
本实施例中，DOM Tree就是DOM树，是由以DOM为节点元素，按照一定结构组成的。以react框架为例，在react源码架构中，最上层是react的核心部分，react-core，中间是react-reconciler，其职责是负责维护VirtualDOM树(虚拟DOM树)，内部实现了Diff/Fiber算法，决定虚拟DOM树的更新时间以及更新内容，下层是Render，负责具体平台的渲染工作，会提供宿主组件、处理事件等等。例如其中包含了react-DOM，react-DOM是一个渲染器，负责DOM节点的渲染和DOM事件的处理。在react框架中，要实现miniprogram(小程序)-react包，目的是用来连接react-reconciler和miniprogram-runtime(小程序运行时)的BOM/DOM的API，这样才可以创建出DOM Tree。
本实施例中，根据所述自定义DOM/BOM生成所述小程序对应的DOM Tree生成对应的DOM Tree的具体步骤是：
S13-1：通过所述运行时包中所述自定义DOM/BOM的API来调用对应的DOM/BOM。
本实施例中，可以预先对小程序进行配置，在设置中将小程序运行时调用的API设置为运行时包中对应的DOM/BOM的API，这样在小程序运行时，就可以调用自定义的DOM/BOM，而不是调用浏览器的DOM/BOM。
示例地，在react框架中，实现react-reconciler的hostConfig(默认设置)的配置，主要方式是在hostCofig的方法中调用对应的BOM/DOM的API。
S13-2：通过render函数，根据所述DOM/BOM生成所述小程序对应的DOM Tree。
本实施例中，render函数是渲染函数，通过render函数可以构建出DOM Tree，而render函数本身可以看成是创建DOM Tree的容器。本构建出的DOM Tree同样是虚拟DOMTree，这样更加方便DOM Tree的加载和更新。
S14：根据所述DOM Tree生成所述小程序的页面。
本实施例中，在得到S13-2创建的虚拟DOM-Tree后，需要将生成的虚拟DOM Tree更新到小程序页面，具体的步骤是：
S14-1：将所述小程序的所有原生组件进行模板化处理，得到所述小程序的原生组件对应的多个模板。
本实施例中，小程序的原生组件是小程序运行的APP上自带的组件，可以参与小程序页面的渲染，模板化处理就是将设置小程序的原生组件的渲染模板，这样渲染出的页面的样式会与模板相同。
示例地，小程序在微信上运行，则先将小程序上的微信原生组件进行模板化处理，就可以得到小程序组件对应的模板。
S14-2：根据所述DOM Tree中包含的数据，按照所述多个模板对页面进行渲染，得到所述小程序的页面。
本实施例中，因为小程序不同于web应用，小程序中并不暴露DOM Tree，故渲染页面时，只是用到了DOM Tree的数据，具体的步骤如下：
S14-2-1：读取所述DOM Tree中包含的多个节点的数据。
本实施例中，为了将DOM Tree更新到小程序页面，需要先读取DOM Tree中每个节点包含的数据，通过DOM Tree中每个节点中的数据可以确定小程序页面中每个元素的位置，类型，可进行的操作等。
S14-2-2：根据所述多个节点的数据，选择所述多个节点中每个节点对应的模板。
S14-2-3：根据所述每个节点对应的模板，对所述每个节点中包含的元素进行渲染，得到所述小程序的页面。
本实施例中，需要根据多个节点的数据，选择每个节点对应的模板(template)，之后根据每个节点对应的模板，对每个节点中包含的元素进行渲染，当渲染完成时，就得到了小程序页面，小程序也可以在终端上响应并运行。
示例地，可以采用动态递归的方法来进行渲染，首先根据DOM Tree的根节点的每个子元素的数据，选择相应的模板对其进行渲染，例如有一个子元素是点赞按钮，则找到点赞按钮对应的模板，在页面中相应的位置，按照该模板的大小和颜色渲染出点赞按钮，再根据当前元素的子元素的数据，根据对应的模板渲染每个子元素，以此根据整个DOM Tree的数据渲染小程序的页面，最终生成小程序页面，整个小程序也可以在终端上响应并运行。
本实施例中主要从两个方面对web前端应用进行了迁移，一个是在编译时，主要是将应用的代码编译为小程序的基础代码文件；一个是在运行时，主要是进行了生命周期、事件、数据等部分的处理和对接。
在本申请的另一个实施例中，此方法可以应用在云端程序的迁移上。
现在有很多基于web前端框架开发的应用，都可以应用在云服务器中，当开发人员想要在云服务器中迁移web应用时，不需要将web应用下载至本地，可以直接在云服务器中进行操作，首先在云服务器中创建一个虚拟机，在该虚拟机中加载目标web应用程序和迁移所需的工具，包括编译器，代码注入工具等，将web应用的代码编译为小程序的基本代码，在该虚拟机中编写自定义的DOM/BOM，并创建对应的精简版的DOM/BOM的API，接着将这些API放入web应用的运行时包中，通过代码注入软件将该运行时包注入小程序的逻辑层，之后对程序进行相应的优化、精简操作，进一步的，在小程序代码中进行设置，以使得小程序在运行时可以调用对应的自定义DOM/BOM的API，再实现render函数，使得小程序在运行时可以根据该自定义DOM/BOM创建出一个虚拟DOM Tree，之后在小程序代码中实现根据该DOMTree渲染生成整个页面的任务。
本实施例中主要在云服务器中实现了3个任务，将目标web应用代码编译为小程序代码；将包含有自定义DOM/BOM的API的运行时包注入小程序代码中，并对实现对运行时包中的API的调用；将自定义的DOM Tree更新到小程序页面。通过该操作，可以将云服务器中的web前端程序迁移为小程序，并且完美流畅的运行。
基于同一发明构思，本申请一实施例提供一种小程序生成运行装置。参考图2，图2是本申请一实施例提出的小程序生成运行装置200的示意图。如图2所示，该装置包括：
代码编译模块201，用于将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，以作为所述小程序的基础代码文件；
运行时包注入模块202，用于创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中；
DOM Tree生成模块203，用于根据所述自定义DOM/BOM的API生成所述小程序对应的DOM Tree；
页面生成模块204，用于根据所述DOM Tree生成所述小程序的页面。
可选地，所述代码编译模块包括：
代码解析子模块，用于将所述第一语言代码解析为抽象语法树；
语法树修改子模块，用于对所述抽象语法树进行适应性修改，得到修改后的抽象语法树；
代码转换子模块，用于将所述修改后的抽象语法树转换为所述基础代码。
可选地，所述运行时包注入模块包括：
程序创建子模块，用于创建针对所述小程序的页面的自定义DOM/BOM；
运行时包创建子模块，用于将所述自定义的DOM/BOM的API放入新创建的所述web应用的运行时包中；
代码优化子模块，用于将所述运行时包注入到所述小程序中，并对所述运行时包中的代码进行优化。
可选地，所述DOM Tree生成模块包括：
程序设置子模块，用于通过所述运行时包中所述自定义DOM/BOM的API来调用对应的DOM/BOM；
DOM Tree生成子模块，用于通过render函数，根据所述DOM/BOM生成所述小程序对应的DOM Tree。
可选地，所述页面生成模块包括：
模板处理子模块，用于将所述小程序的所有原生组件进行模板化处理，得到所述小程序的原生组件对应的多个模板；
页面生成子模块，用于根据所述DOM Tree中包含的数据，按照所述多个模板对页面进行渲染，得到所述小程序的页面。
可选地，所述页面生成子模块包括：
数据读取子模块，用于读取所述DOM Tree中包含的多个节点的数据；
模板选择子模块，用于根据所述多个节点的数据，选择所述多个节点中每个节点对应的模板；
页面渲染子模块，用于根据所述每个节点对应的模板，对所述每个节点中包含的元素进行渲染，得到所述小程序的页面。
基于同一发明构思，本申请另一实施例提供一种可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请上述任一实施例所述的小程序生成运行方法中的步骤。
基于同一发明构思，本申请另一实施例提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行时实现本申请上述任一实施例所述的小程序生成运行方法中的步骤。
对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
本领域内的技术人员应明白，本申请实施例可提供为方法、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
以上对本申请所提供的一种小程序生成运行方法、装置、设备及存储介质，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (7)

1.一种小程序生成运行方法，其特征在于，所述方法包括：
将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，以作为所述小程序的基础代码文件；
创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中；
根据所述自定义DOM/BOM的API生成所述小程序对应的DOM Tree；
根据所述DOM Tree生成所述小程序的页面，具体包括：
将所述小程序的所有原生组件进行模板化处理，得到所述小程序的原生组件对应的多个模板；读取所述DOM Tree中包含的多个节点的数据；根据所述多个节点的数据，选择所述多个节点中每个节点对应的模板；根据所述每个节点对应的模板，对所述每个节点中包含的元素进行渲染，得到所述小程序的页面。
2.根据权利要求1所述的方法，其特征在于，将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，所述方法包括：
将所述第一语言代码解析为抽象语法树；
对所述抽象语法树进行适应性修改，得到修改后的抽象语法树；
将所述修改后的抽象语法树转换为所述基础代码。
3.根据权利要求1所述的方法，其特征在于，创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中，包括：
创建针对所述小程序的页面的自定义DOM/BOM；
将所述自定义的DOM/BOM的API放入新创建的所述web应用的运行时包中；
将所述运行时包注入到所述小程序中，并对所述运行时包中的代码进行优化。
4.根据权利要求1所述的方法，其特征在于，根据所述自定义DOM/BOM的API生成所述小程序对应的DOM Tree，包括：
通过所述运行时包中所述自定义DOM/BOM的API来调用对应的DOM/BOM；
通过render函数，根据所述DOM/BOM生成所述小程序对应的DOM Tree。
5.一种小程序生成运行装置，其特征在于，所述装置包括：
代码编译模块，用于将目标web应用的第一语言代码编译为所述目标web应用对应的小程序的基础代码，以作为所述小程序的基础代码文件；
运行时包注入模块，用于创建自定义DOM/BOM，将所述自定义DOM/BOM的API放入新创建的所述web应用的运行时包中，将所述运行时包注入到所述小程序中；
DOM Tree生成模块，用于根据所述自定义DOM/BOM的API生成所述小程序对应的DOMTree；
页面生成模块，用于根据所述DOM Tree生成所述小程序的页面，具体包括：
将所述小程序的所有原生组件进行模板化处理，得到所述小程序的原生组件对应的多个模板；读取所述DOM Tree中包含的多个节点的数据；根据所述多个节点的数据，选择所述多个节点中每个节点对应的模板；根据所述每个节点对应的模板，对所述每个节点中包含的元素进行渲染，得到所述小程序的页面。
6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时，实现如权利要求1至4任一所述的方法中的步骤。
7.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时，实现如权利要求1至4任一所述的方法的步骤。
CN202110502394.0A 2021-05-08 2021-05-08 一种小程序生成运行方法、装置、设备及存储介质 Active CN113515286B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110502394.0A CN113515286B (zh) 2021-05-08 2021-05-08 一种小程序生成运行方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110502394.0A CN113515286B (zh) 2021-05-08 2021-05-08 一种小程序生成运行方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN113515286A CN113515286A (zh) 2021-10-19
CN113515286B true CN113515286B (zh) 2022-06-17

Family

ID=78064025

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110502394.0A Active CN113515286B (zh) 2021-05-08 2021-05-08 一种小程序生成运行方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN113515286B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116627402B (zh) * 2023-07-19 2023-10-20 云筑信息科技(成都)有限公司 一种基于React在低代码平台中实现自定义组件配置化的方法
CN117348948B (zh) * 2023-12-04 2024-03-22 南京掌控网络科技有限公司 一种在自有App上运行的小程序引擎

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110333863A (zh) * 2019-06-17 2019-10-15 无线生活（杭州）信息科技有限公司 一种生成、显示小程序页面的方法及装置
CN110427225A (zh) * 2019-07-29 2019-11-08 阿里巴巴集团控股有限公司 一种启动小程序的方法和装置
CN110442344A (zh) * 2019-08-14 2019-11-12 中国工商银行股份有限公司 用于跨平台转换应用的方法、装置、系统及介质
CN111124576A (zh) * 2019-12-23 2020-05-08 焦点科技股份有限公司 一种多平台小程序及h5页面适配的方法及系统
CN111736840A (zh) * 2019-09-19 2020-10-02 北京沃东天骏信息技术有限公司 小程序应用的编译方法、运行方法、存储介质及电子设备
DE202020105389U1 (de) * 2019-09-28 2020-12-11 Tongcheng Network Technology Co., Ltd. Front-End-Framework, Speichermedium und elektronische Vorrichtung
CN112307403A (zh) * 2020-11-12 2021-02-02 Oppo（重庆）智能科技有限公司 页面渲染方法、装置、存储介质以及终端

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110333863A (zh) * 2019-06-17 2019-10-15 无线生活（杭州）信息科技有限公司 一种生成、显示小程序页面的方法及装置
CN110427225A (zh) * 2019-07-29 2019-11-08 阿里巴巴集团控股有限公司 一种启动小程序的方法和装置
CN110442344A (zh) * 2019-08-14 2019-11-12 中国工商银行股份有限公司 用于跨平台转换应用的方法、装置、系统及介质
CN111736840A (zh) * 2019-09-19 2020-10-02 北京沃东天骏信息技术有限公司 小程序应用的编译方法、运行方法、存储介质及电子设备
DE202020105389U1 (de) * 2019-09-28 2020-12-11 Tongcheng Network Technology Co., Ltd. Front-End-Framework, Speichermedium und elektronische Vorrichtung
CN111124576A (zh) * 2019-12-23 2020-05-08 焦点科技股份有限公司 一种多平台小程序及h5页面适配的方法及系统
CN112307403A (zh) * 2020-11-12 2021-02-02 Oppo（重庆）智能科技有限公司 页面渲染方法、装置、存储介质以及终端

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
面向移动终端的HTML5应用运行环境研究;陆钢等;《电信科学》;20130520(第05期);全文 *

Also Published As

Publication number Publication date
CN113515286A (zh) 2021-10-19

Similar Documents

Publication Publication Date Title
CN108228188B (zh) 一种视图组件处理方法、电子设备及可读存储介质
Lock ASP. NET core in Action
US8407667B2 (en) Inferring missing type information for reflection
CN113515286B (zh) 一种小程序生成运行方法、装置、设备及存储介质
US9858094B2 (en) Monitoring and actuation of view controller parameters to reach deep states without manual developer intervention
US9524279B2 (en) Help document animated visualization
US20100242015A1 (en) Generating libraries for reflection without project compilation
CN110928529A (zh) 辅助算子开发的方法和系统
US8863100B2 (en) Application services source refactoring
Mackey Introducing. NET 4.0: With Visual Studio 2010
CN113064593B (zh) 移动app动态化的方法、装置、计算机设备及存储介质
WO2015014143A1 (en) Method and apparatus for cross-platform application conversion
CN112558953A (zh) 基于图形化编辑器的编程实现方法、装置及设备
CN112083926A (zh) 一种Web用户界面生成方法及装置
US11604662B2 (en) System and method for accelerating modernization of user interfaces in a computing environment
CN110020370B (zh) 在客户端应用中实现动画的方法、装置及动画脚本的框架
CN117519877A (zh) 快应用卡片的渲染方法、装置、存储介质及电子设备
Shute Advanced JavaScript: Speed up web development with the powerful features and benefits of JavaScript
You et al. A comparative study of cross-platform mobile application development
CN112068879A (zh) 基于配置化的客户端应用程序开发框架构建方法及装置
CN114721647B (zh) 一种基于无代码应用开发的面向对象编程方法
CN115756433A (zh) 代码平台的迁移方法、装置、电子设备及可读存储介质
Jaber et al. A high-level modeling language for the efficient design, implementation, and testing of Android applications
CN115098158A (zh) Sdk打包方法和装置、计算机设备及存储介质
Åkesson et al. Jatte: A tunable tree editor for integrated DSLs

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
GR01 Patent grant
GR01 Patent grant