CN117573277A - 微信小程序页面动态化方法、系统、设备及储存介质 - Google Patents

Abstract

本发明公开了一种微信小程序页面动态化方法、系统、设备及储存介质，所述方法包括：接收WXML代码；将所述WXML代码编译为有效的JavaScript脚本文件；基于AST生成器执行所述JavaScript脚本文件生成AST的JSON脚本文件；基于JavaScript解释器执行所述JSON脚本文件。通过本公开的处理方案，不仅可以提高小程序的灵活性和可扩展性，还可以减少重新发版的时间和成本，快速响应用户需求。

Description

微信小程序页面动态化方法、系统、设备及储存介质

技术领域

本发明涉及计算机技术领域，特别是涉及一种微信小程序页面动态化方法、系统、设备及储存介质。

背景技术

随着业务的增长，微信小程序的包体积限制使得业务迭代变得越来越困难，导致小程序代码空间紧张，并且线上问题需要重新发版才能解决，无法快速响应用户需求。因此，亟需一个解决方案来减小包体积并增强微信小程序的灵活性和可扩展性，从而提高用户体验和留存率。

虽然现有技术中的React和Vue等现代前端框架已经具有自己的虚拟DOM机制，也可以实现DOM树的表达和更新。还存在Webpack等前端构建工具可以预编译和打包前端代码，并通过HTTP/WebSocket等协议进行动态加载和更新。但上述技术仅在前端(浏览器端)运行、计算，无法兼容微信小程序来跨平台使用。

发明内容

有鉴于此，本公开实施例提供一种微信小程序页面动态化方法，至少部分解决现有技术中存在的问题。

第一方面，本公开实施例提供了一种微信小程序页面动态化方法，所述方法包括以下步骤：

接收WXML代码；

将所述WXML代码编译为有效的JavaScript脚本文件；

基于Javascript编译器将所述JavaScript脚本文件编译为AST JSON脚本文件；

基于node脚本将所述AST JSON脚本文件使用http请求上传至CDN，生成CDN文件；

前端通过http请求拉取所述CDN文件，并获取所述CDN文件中包含的AST JSON脚本文件；

基于JavaScript虚拟机执行所述AST JSON脚本文件。

根据本公开实施例的一种具体实现方式，所述基于JavaScript虚拟机执行所述JSON脚本文件，还包括以下步骤：

所述JavaScript解释器解析所述JSON脚本文件，并根据其内容执行相应的JavaScript代码。

根据本公开实施例的一种具体实现方式，所述前端包括微信小程序端和/或web端。

第二方面，本公开实施例提供了一种微信小程序页面动态化系统，所述系统包括：

WXML编译器模块，被配置用于接收WXML代码；以及，

将所述WXML代码编译为有效的JavaScript脚本文件；

AST生成器模块，被配置用于基于Javascript编译器将所述JavaScript脚本文件编译为AST JSON脚本文件；

上传模块，被配置用于基于node脚本将所述AST JSON脚本文件使用http请求上传至CDN，生成CDN文件；以及，

前端通过http请求拉取所述CDN文件，并获取所述CDN文件中包含的AST JSON脚本文件；

执行模块，被配置用于基于JavaScript虚拟机执行所述AST JSON脚本文件。

根据本公开实施例的一种具体实现方式，所述系统还包括：

执行模块，被配置用于所述JavaScript解释器解析所述JSON脚本文件，并根据其内容执行相应的JavaScript代码。

第三方面，本公开实施例还提供了一种电子设备，该电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有能够被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，使所述至少一个处理器前述第一方面或第一方面的任一实现方式中的任一项所述的微信小程序页面动态化方法。

第四方面，本公开实施例还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令当由至少一个处理器执行时使所述至少一个处理器执行前述第一方面或第一方面的任一实现方式中的微信小程序页面动态化方法。

第五方面，本公开实施例还提供了一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的微信小程序页面动态化方法。

本公开实施例中的微信小程序页面动态化方法，通过将代码下发到客户端，减少小程序代码的体积，同时最大程度地保持原生的用户交互体验。这种方案不仅可以提高小程序的灵活性和可扩展性，还可以减少重新发版的时间和成本，降低开发成本兼容web平台与小程序端，快速响应用户需求。

附图说明

上述仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，以下结合附图与具体实施方式对本发明作进一步的详细说明。

图1为本公开实施例提供的一种微信小程序页面动态化方法流程示意图；

图2为本公开实施例提供的一种微信小程序页面动态化方法时序图；

图3为本公开实施例提供的一种微信小程序页面动态化架构示意图；

图4为本公开实施例提供的一种微信小程序页面动态化系统结构示意图；以及

图5为本公开实施例提供的电子设备示意图。

具体实施方式

下面结合附图对本公开实施例进行详细描述。

以下通过特定的具体实例说明本公开的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本公开的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

需要说明的是，下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见，本文中所描述的方面可体现于广泛多种形式中，且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开，所属领域的技术人员应了解，本文中所描述的一个方面可与任何其他方面独立地实施，且可以各种方式组合这些方面中的两者或两者以上。举例来说，可使用本文中所阐述的任何数目个方面来实施设备及/或实践方法。另外，可使用除了本文中所阐述的方面中的一或多者之外的其他结构及/或功能性实施此设备及/或实践此方法。

另外，在以下描述中，提供具体细节是为了便于透彻理解实例。然而，所属领域的技术人员将理解，可在没有这些特定细节的情况下实践所述方面。

本发明实施例提供了一种微信小程序页面动态化方法，通过使用自定义的DOM/虚拟DOM来呈现和更新DOM树，在微信小程序中，这反映了state到view的关系。为了实现这一点，预编译前端模板并将其转化为可调试的函数指令，函数指令被反射并调用相关页面的函数指令。在运行时，函数指令被编译成JSOM并通过HTTP/WebSocket发送回微信小程序端。在微信小程序端，通过自举方式实现JavaScript虚拟机，将其嵌入到微信小程序中，以动态执行服务器下发的JavaScript脚本。

上述预编译前端模板是基于AOT(AheadofTime)的方式，读取项目中的所有wxml文件，通过wxml编译器对wxml文件编译为javascript文件，此文件中包括Incremental DOM框架代码用于描述wxml文件内对应的内容，然后使用javascript编译器来编译包含Incremental DOMjavascript文件为json文件，此文件用于javascript虚拟机来解释执行。

wxml编译器：编译器是一种工具，用于将高级编程语言转换为目标代码。在本发明中，WXML编译器的任务是将WML文件转化为JavaScript代码。编译器通常包括词法分析、语法分析、语义分析、中间代码生成、优化和目标代码生成等阶段，每个阶段负责不同的任务，以实现从源代码到目标代码的转换。

与现有技术不同：该编译器的独特之处在于其专门为满足WXML文件的特殊需求而进行深度优化。这包括对循环和函数调用的增强优化，以提供卓越的性能表现。此外，该编译器还提供更强大的源代码控制，允许进行更精细的代码优化和特定领域的代码生成。例如，它具有扩展自定义WXML文件语法的能力，使用户能够高度定制生成的目标代码。在创新技术的编译过程中，WXML文件被转化为特定的Incremental DOM框架的JavaScript代码，同时支持虚拟DOM模式和Web DOM模式，并对WXML文件中的结构进行精细的优化。

Incremental Dom框架：是一个用于构建Web和小程序应用程序的开发框架。它通常包括一组库、工具和模块，通过适配器模式适应不同的平台，例如Web平台和小程序平台。在小程序平台中，它使用虚拟DOM，而在Web平台中，它使用Web DOM。

与现有技术不同：该框架的独特之处在于其跨平台支持，既支持Web平台又支持小程序平台。此外，它支持可配置和可扩展的模块机制，允许组件的热插拔。另一个优势是，该框架允许更好地控制和自定义应用程序的行为，可以更紧密地集成到现有基础设施中，提供更好的性能和安全性。此外，它能够满足特定的业务需求，不受通用框架的限制。

虚拟机：虚拟机是一种用于执行字节码/中间代码的运行时环境。它的任务包括解释字节码/中间代码以及执行与目标平台无关的代码。虚拟机通常包括字节码解释器、内存管理和异常处理等功能。

与现有技术不同：

相对于通用JavaScript虚拟机，本申请的虚拟机的主要不同之处在于其可定制指令集，以针对特定应用进行优化，从而提高代码执行效率。这种定制性使其能够更好地满足特定应用场景的需求，从而实现更高效的代码执行。并且可以很好的保护支持产权，该虚拟机可以使代码更难以反向工程，从而降低代码被盗用的风险。

总结：这些解决方案的独特之处在于它们的专门定制性，针对特定领域和需求进行了深度优化和自定义，提供更好的性能、控制权和适用性。它们充分体现了在特定领域和应用中的创新和灵活性。

上述转化过程包括：

1、读取wxml文件，编译为AST(抽象语法树)文件。

2、使用访问者模式来遍历抽象语法树，根据不同的标签生成不同的函数指令字符串，(例如view标签会转换为elementOpen(“view”)指令)，并同时处理标签中的样式和属性及事件，作为参数添加到函数指令中。将得到的函数指令字符串放入数组对象中，重复执行此过程。

3、读取数组对象，转化为普通字符串，并创建javascript文件写入转化后的字符串。

图1为本公开实施例提供的微信小程序页面动态化方法流程的示意图。

图2为与图1对应的微信小程序页面动态化方法流程框图。

图3为本公开实施例提供的一种微信小程序页面动态化架构示意图。

如图1所示，在步骤S110处，接收WXML代码。

更具体地，WXML编译器模块用于接收WXML代码作为输入，并将其编译为有效的JavaScript脚本文件。该编译器实现了将WXML标记和指令转换为JavaScript执行代码的功能。

更具体地，接下来转到步骤S120。

在步骤S120处，将所述WXML代码编译为有效的JavaScript脚本文件。

更具体地，接下来转到步骤S130。

在步骤S130处，基于Javascript编译器将所述JavaScript脚本文件编译为ASTJSON脚本文件。

更具体地，AST(抽象语法树)生成器用于：当WXML编译器生成JavaScript脚本文件后，AST生成器通过执行该脚本文件来生成AST的JSON表示形式。这个JSON文件包含了JavaScript代码的内部结构，方便后续的解析和执行。

更具体地，接下来转到步骤S140。

在步骤S140处，基于node脚本将所述AST JSON脚本文件使用http请求上传至CDN，生成CDN文件。

接下来转到步骤S150。

在步骤S150处，前端通过http请求拉取所述CDN文件，并获取所述CDN文件中包含的AST JSON脚本文件

在本发明实施例中，所述前端包括微信小程序端和/或web端。

接下来转到步骤S160。

在步骤S160处，基于JavaScript虚拟机执行所述AST JSON脚本文件。

在本发明实施例中，所述基于JavaScript虚拟机执行所述JSON脚本文件，还包括以下步骤：所述JavaScript解释器解析所述JSON脚本文件，并根据其内容执行相应的JavaScript代码。

更具体地，JavaScript解释器模块用于接收AST JSON文件作为输入，并通过解释器来执行JSON脚本文件。该解释器解析AST JSON文件，并根据其内容执行相应的JavaScript代码。

更具体地，为了提高性能和响应速度，本发明还提供了一个缓存系统，用于将上述生成的文件上传至CDN(内容分发网络)。通过将生成的文件存储在CDN上，可以使得在面对大量用户请求时，能够快速响应并减少服务器的负载。

本发明提出的微信小程序页面动态化方法通过将小程序WXML模板预编译为可调试的函数指令的技术方案；基于函数指令反射调用相关页面函数的技术手段；将函数指令实时编译为JSOM传输到小程序端的动态代码下发方式；部署在小程序端的JavaScript虚拟机的实现机制，通过JavaScript虚拟机实现JSOM脚本的执行；WXML到AST(抽象语法树)再到JSOM的转化和运行流程。包含WXML编译器、AST生成器、JS解释器和缓存系统的完整系统架构；引入了缓存系统，将上述生成的文件上传至CDN(内容分发网络)，以提高性能和响应速度。在面对大量用户请求时，能够快速响应并减少服务器的负载；小程序端动态接收、解释和执行JSOM脚本的处理流程。确保动态代码安全性和稳定性的解决方案以及动态脚本调试、异常处理和资源回收机制。本技术方案能够有效地减小微信小程序的包体积，同时增强其灵活性和可扩展性，快速响应迭代需求，无需重新打包发布，提高用户体验和留存率。与传统的微信小程序开发方式相比，本技术方案具有更高的性能和响应速度，能够快速响应用户需求，提高用户体验。

与现有技术相比，本发明的创新点在于将WXML与JavaScript进行更紧密的结合、利用抽象语法树进行代码生成和执行、以及使用JavaScript虚拟机进行动态脚本执行等。此外，本发明还提供了一种一体化的解决方案，将上述创新点整合到一个系统中，从而在整体上提高了系统的性能、灵活性和可扩展性。

图4示出了本发明提供的微信小程序页面动态化系统400，包括WXML编译器模块410、AST生成器模块420、上传模块430和执行模块440。

WXML编译器模块410用于接收WXML代码；以及，将所述WXML代码编译为有效的JavaScript脚本文件；

AST生成器模块420用于基于Javascript编译器将所述JavaScript脚本文件编译为AST JSON脚本文件；

上传模块430用于基于node脚本将所述AST JSON脚本文件使用http请求上传至CDN，生成CDN文件；以及，

前端通过http请求拉取所述CDN文件，并获取所述CDN文件中包含的AST JSON脚本文件；

执行模块440用于基于JavaScript虚拟机执行所述AST JSON脚本文件。

在本发明实施例中，所述系统还包括：执行模块，被配置用于所述JavaScript解释器解析所述JSON脚本文件，并根据其内容执行相应的JavaScript代码。

参见图5，本公开实施例还提供了一种电子设备50，该电子设备包括：

至少一个处理器；以及，

与该至少一个处理器通信连接的存储器；其中，

该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述方法实施例中的微信小程序页面动态化方法。

本公开实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述方法实施例中的微信小程序页面动态化方法。

本公开实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述方法实施例中的微信小程序页面动态化方法。

下面参考图5，其示出了适于用来实现本公开实施例的电子设备50的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图5示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图5所示，电子设备50可以包括处理装置(例如中央处理器、图形处理器等)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储装置508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有电子设备50操作所需的各种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

通常，以下装置可以连接至I/O接口505：包括例如触摸屏、触摸板、键盘、鼠标、图像传感器、麦克风、加速度计、陀螺仪等的输入装置506；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置507；包括例如磁带、硬盘等的存储装置508；以及通信装置509。通信装置509可以允许电子设备50与其他设备进行无线或有线通信以交换数据。虽然图中示出了具有各种装置的电子设备50，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置509从网络上被下载和安装，或者从存储装置508被安装，或者从ROM 502被安装。在该计算机程序被处理装置501执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取至少两个网际协议地址；向节点评价设备发送包括所述至少两个网际协议地址的节点评价请求，其中，所述节点评价设备从所述至少两个网际协议地址中，选取网际协议地址并返回；接收所述节点评价设备返回的网际协议地址；其中，所获取的网际协议地址指示内容分发网络中的边缘节点。

或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：接收包括至少两个网际协议地址的节点评价请求；从所述至少两个网际协议地址中，选取网际协议地址；返回选取出的网际协议地址；其中，接收到的网际协议地址指示内容分发网络中的边缘节点。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。

应当理解，本公开的各部分可以用硬件、软件、固件或它们的组合来实现。

以上所述，仅为本公开的具体实施方式，但本公开的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应以权利要求的保护范围为准。

Claims (7)

1.一种微信小程序页面动态化方法，其特征在于，所述方法包括以下步骤：

接收WXML代码；

将所述WXML代码编译为有效的JavaScript脚本文件；

基于Javascript编译器将所述JavaScript脚本文件编译为AST JSON脚本文件；

基于node脚本将所述AST JSON脚本文件使用http请求上传至CDN，生成CDN文件；

前端通过http请求拉取所述CDN文件，并获取所述CDN文件中包含的AST JSON脚本文件；

基于JavaScript虚拟机执行所述AST JSON脚本文件。

2.根据权利要求1所述的微信小程序页面动态化方法，其特征在于，所述基于JavaScript虚拟机执行所述JSON脚本文件，还包括以下步骤：

所述JavaScript解释器解析所述JSON脚本文件，并根据其内容执行相应的JavaScript代码。

3.根据权利要求1所述的微信小程序页面动态化方法，其特征在于，所述前端包括微信小程序端和/或web端。

4.一种微信小程序页面动态化系统，其特征在于，所述系统包括：

WXML编译器模块，被配置用于接收WXML代码；以及，

将所述WXML代码编译为有效的JavaScript脚本文件；

AST生成器模块，被配置用于基于Javascript编译器将所述JavaScript脚本文件编译为AST JSON脚本文件；

上传模块，被配置用于基于node脚本将所述AST JSON脚本文件使用http请求上传至CDN，生成CDN文件；以及，

前端通过http请求拉取所述CDN文件，并获取所述CDN文件中包含的AST JSON脚本文件；

执行模块，被配置用于基于JavaScript虚拟机执行所述AST JSON脚本文件。

5.根据权利要求4所述的微信小程序页面动态化系统，其特征在于，所述系统还包括：

执行模块，被配置用于所述JavaScript解释器解析所述JSON脚本文件，并根据其内容执行相应的JavaScript代码。

6.一种电子设备，其特征在于，该电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有能够被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，使所述至少一个处理器执行如权利要求1至3中的任一项所述的微信小程序页面动态化方法。

7.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令当由至少一个处理器执行时使所述至少一个处理器执行如权利要求1至3中的任一项所述的微信小程序页面动态化方法。