CN114489647A - 一种小程序的组件化构建方法、装置、设备和介质 - Google Patents

一种小程序的组件化构建方法、装置、设备和介质 Download PDF

Info

Publication number
CN114489647A
CN114489647A CN202210088369.7A CN202210088369A CN114489647A CN 114489647 A CN114489647 A CN 114489647A CN 202210088369 A CN202210088369 A CN 202210088369A CN 114489647 A CN114489647 A CN 114489647A
Authority
CN
China
Prior art keywords
functional component
target
applet
component
converted
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
CN202210088369.7A
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.)
Chuangyou Digital Technology Guangdong Co Ltd
Original Assignee
Chuangyou Digital Technology Guangdong 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 Chuangyou Digital Technology Guangdong Co Ltd filed Critical Chuangyou Digital Technology Guangdong Co Ltd
Priority to CN202210088369.7A priority Critical patent/CN114489647A/zh
Publication of CN114489647A publication Critical patent/CN114489647A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/33Intelligent editors
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/36Software reuse

Landscapes

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

Abstract

本发明公开了一种小程序的组件化构建方法、装置、设备和介质,方法包括:响应需求端发送的小程序构建请求,从小程序构建请求中提取目标小程序对应的业务需求信息;根据业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件;基于待转换功能组件内的原始代码对应的编程语言对待转换功能组件内的原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表;渲染功能组件列表内的全部目标功能组件,得到至少一个小程序页面;组合全部小程序页面,生成目标小程序并返回至需求端。从而通过对小程序的功能组件进行组件化配置以及代码的适配性转换,在提高小程序的开发效率的同时有效降低小程序的维护难度与维护成本。

Description

一种小程序的组件化构建方法、装置、设备和介质
技术领域
本发明涉及小程序编写技术领域,尤其涉及一种小程序的组件化构建方法、装置、设备和介质。
背景技术
随着科技的不断发展与社交APP的不断普及,其支持的小程序已成为如今的大众主流,例如微信小程序在电商、游戏等行业的应用。而随着其应用的不断普及与深化,小程序的开发需求也日渐激增,但开发一个完整的小程序所需的工作量仍然较大。
为此,现有技术提供了多种框架来简化小程序的编程,例如微信官方开发API(Application Programming Interface,应用程序编程接口)、wepy框架等。
但在上述现有技术中,在每个新的小程序项目启动时,都需要根据各自的项目需求进行大量代码的重新编写,导致小程序的开发效率降低,且由于参与其中的技术人员编码能力与风格的不同,会给小程序的后期维护增加困难,增加维护成本。
发明内容
本发明提供了一种小程序的组件化构建方法、装置、设备和介质,解决了现有技术在每个新的小程序项目启动时,都需要根据各自的项目需求进行大量代码的重新编写,导致小程序的开发效率降低,且由于参与其中的技术人员编码能力与风格的不同,会给小程序的后期维护增加困难,增加维护成本。
本发明提供的一种小程序的组件化构建方法,包括:
响应需求端发送的小程序构建请求,从所述小程序构建请求中提取目标小程序对应的业务需求信息;
根据所述业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件;
基于所述待转换功能组件内的原始代码对应的编程语言,对所述原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表;
渲染所述功能组件列表内的全部所述目标功能组件,得到至少一个小程序页面;
组合全部所述小程序页面,生成所述目标小程序并返回至所述需求端。
可选地,所述根据所述业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件的步骤,包括:
解析所述业务需求信息,确定所述目标小程序需求的功能组件类型;
按照所述功能组件类型查找预设的功能组件库,选定符合所述功能组件类型的至少一个待转换功能组件。
可选地,所述业务需求信息还包括需求组件版本号,所述根据所述业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件的步骤,还包括:
提取各个所述待转换功能组件对应的组件版本号;
选取所述组件版本号与所述需求组件版本号相同的待转换功能组件作为新的待转换功能组件。
可选地,所述基于所述待转换功能组件内的原始代码对应的编程语言,对所述原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表的步骤,包括:
若所述待转换功能组件内的原始代码对应的编程语言为JavaScript,则解析所述待转换功能组件内的原始代码,构建原始抽象语法树;
按照所述业务需求信息需求的目标代码语言,对所述原始抽象语法树内的各个树节点进行转换,得到符合所述目标代码语言的目标抽象语法树;
遍历所述目标抽象语法树,生成第一目标代码字符串;
编译所述第一目标代码字符串,得到目标功能组件并缓存至预设的功能组件列表。
可选地,所述基于所述待转换功能组件内的原始代码对应的编程语言,对所述原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表的步骤,包括:
若所述待转换功能组件内的原始代码对应的编程语言为级联样式表,则解析所述待转换功能组件内的原始代码,获取含有动态节点的动态分析树;
按照所述业务需求信息需求的目标代码语言,将所述动态分析树转换为静态分析树;
遍历所述静态分析树,生成第二目标代码字符串;
编译所述第二目标代码字符串,得到目标功能组件并缓存至预设的功能组件列表。
可选地,所述渲染所述功能组件列表内的全部所述目标功能组件,得到至少一个小程序页面的步骤,包括:
创建至少一个初始页面;
按照所述业务需求信息对应的框架结构和显示样式对所述初始页面进行更新,得到中间页面;
从所述功能组件列表内逐一加载所述目标功能组件至各个所述中间页面并渲染,得到至少一个小程序页面。
可选地,所述方法还包括:
当接收到组件源码更新请求时,基于所述组件源码更新请求从所述功能组件库内选取待更新功能组件;
响应输入的源码更新信息,对所述待更新功能组件内的待更新代码进行更新,得到更新代码;
当接收到针对所述待更新代码的更新完成指令时,编译所述更新代码,得到更新功能组件并更新对应的原始版本号;
将所述更新功能组件作为新的功能组件缓存至所述功能组件库。
本发明第二方面提供了一种小程序的组件化构建装置,包括:
业务需求信息提取模块,用于响应需求端发送的小程序构建请求,从所述小程序构建请求中提取目标小程序对应的业务需求信息;
待转换功能组件选取模块,用于根据所述业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件;
代码转换与缓存模块,用于基于所述待转换功能组件内的原始代码对应的编程语言,对所述原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表;
小程序页面生成模块,用于渲染所述功能组件列表内的全部所述目标功能组件,得到至少一个小程序页面;
小程序页面组合模块,用于组合全部所述小程序页面,生成所述目标小程序并返回至所述需求端。
本发明第三方面提供了一种电子设备,包括存储器及处理器,所述存储器中储存有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如本发明第一方面任一项所述的小程序的组件化构建方法的步骤。
本发明第四方面提供了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被执行时实现如本发明第一方面任一项所述的小程序的组件化构建方法。
从以上技术方案可以看出,本发明具有以下优点:
本发明通过响应需求端发送的小程序构建请求,从中提取需求的目标小程序对应的业务需求信息,再根据业务需求信息从预设的功能组件库中查找对应的至少一个待转换功能组件,而为实现对需求端小程序代码的适配,可以对待转换功能组件内的原始代码进行进一步转换以生成目标功能组件,并将所生成的目标功能组件缓存至预设的功能组件列表;当全部的目标功能组件均被缓存后,对其进行渲染以得到各自对应的小程序页面,最后按照业务需求信息内的小程序页面跳转顺序,组合各个小程序页面,生成目标小程序并将其返回至需求端。从而通过对小程序常用功能进行组件化编辑,以功能组件库的形式供后续小程序的构建使用,减少代码的大量重复编写,提高了小程序的开发效率;通过组件化配置的形式适配各种需求端的代码编程语言,在技术人员编码能力和风格不同的情况下也能够保证小程序代码的统一性,更为有效地减少后期维护难度与维护成本;因此,本发明通过对小程序功能的组件化并以功能组件库调用的形式适配各种需求端的小程序需求,在提高了小程序代码的复用率与开发效率的同时有效降低了小程序的维护成本。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其它的附图。
图1为本发明实施例一提供的一种小程序的组件化构建方法的步骤流程图;
图2为本发明实施例二提供的一种小程序的组件化构建方法的步骤流程图;
图3为本发明实施例一提供的一种商品领券过程的流程示意图;
图4为本发明实施例三提供的一种小程序的组件化构建装置的结构框图。
具体实施方式
本发明实施例提供了一种小程序的组件化构建方法、装置、设备和介质,用于解决现有技术在每个新的小程序项目启动时,都需要根据各自的项目需求进行大量代码的重新编写,且由于参与其中的技术人员编码能力与风格的不同,导致小程序的开发效率降低的技术问题。
为使得本发明的发明目的、特征、优点能够更加的明显和易懂,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,下面所描述的实施例仅仅是本发明一部分实施例,而非全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本发明保护的范围。
请参阅图1,图1为本发明实施例一提供的一种小程序的组件化构建方法的步骤流程图。
本发明提供的一种小程序的组件化构建方法,包括:
步骤101,响应需求端发送的小程序构建请求,从小程序构建请求中提取目标小程序对应的业务需求信息。
小程序构建请求指的是由需求端如浏览器、通讯软件或支付软件等支持小程序应用的平台所发送的请求信息,具体包括业务需求信息,业务需求信息用于表明需求的目标小程序所需要实现的功能、小程序页面转换的顺序、小程序所需功能组件的组件版本号以及平台支持的小程序源码类型等信息。
在本发明实施例中,当接收到任一支持小程序应用的平台发送的小程序构建请求时,可以对该小程序构建请求进行解析,以提取到该平台所需要的目标小程序对应的业务需求信息。
步骤102,根据业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件。
功能组件库指的是在本地预存的数据库,其中包括多种能够实现不同功能的功能组件,其中每种功能组件可以同时存在多个版本且使用组件版本号进行标识,包括但不限于图片组件、轮播图组件、N+N组件、菜单组件、视频组件、订阅组件、领券组件、购券组件和商品瀑布流组件等。
在提取得到业务需求信息后,为确定目标小程序所需求的功能组件,可以进一步对业务需求信息进行解析,以采用得到的功能组件类型在功能组件库内进行查找,得到至少一个待转换功能组件。
值得一提的是,同一功能的功能组件可能存在多个版本,可以进一步从业务需求信息内获取需求组件版本号,按照需求组件版本号和功能组件库内的各个功能组件的组件版本号进行对比,以进一步筛选到新的待转换功能组件。
步骤103,基于待转换功能组件内的原始代码对应的编程语言,对原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表。
功能组件列表指的是存储有多个等待渲染的目标功能组件的数据库。
在本发明实施例中,功能组件库内的功能组件可以通过前端开发人员采用其惯用的编程组件进行编写,例如应用JavaScript脚本语言的编程组件、CSS(Cascading StyleSheets,级联样式表)编程组件、Taro框架下使用的React语言编写组件和Vue框架下使用CSS语言编写组件等。但由于实际接收到小程序构建请求对应的需求端可能并不是使用相同的编程语言,其代码编写规则存在不同,容易导致需求端无法实现目标小程序的功能。且目标小程序通常存在多个小程序页面,同时每个小程序页面所实现的功能可能不尽相同,若是逐个对一个目标功能组件进行小程序页面的渲染,再返回进行目标功能组件的选取,花费的时间较多。
为此,可以对待转换功能组件内的原始代码进行转换,通过原始代码转换为抽象语法树或静态分析树,再转换为需求端的目标代码语言所对应的目标代码字符串,再编译该目标代码字符串,得到符合需求端的目标功能组件并逐一缓存至功能组件列表,等待后续渲染。
步骤104,渲染功能组件列表内的全部目标功能组件,得到至少一个小程序页面。
在全部目标功能组件均缓存至功能组件列表后,为生成对应的小程序页面,可以对功能组件列表内的全部目标功能组件进行渲染,从而生成至少一个小程序页面。
步骤105,组合全部小程序页面,生成目标小程序并返回至需求端。
在得到至少一个小程序页面后,由于单个小程序页面并未存在跳转的顺序,无法实现小程序页面间的跳转或实现小程序的功能。
为此可以进一步按照业务需求信息所携带的页面顺序,建立各个小程序页面之间的跳转逻辑关系并进行组合,在前端生成目标小程序并返回至需求端,从而实现响应各种平台的需求对目标小程序进行组件化构建。
在本发明实施例中,通过响应需求端发送的小程序构建请求,从中提取需求的目标小程序对应的业务需求信息,再根据业务需求信息从预设的功能组件库中查找对应的至少一个待转换功能组件,而为实现对需求端小程序代码的适配,可以对待转换功能组件内的原始代码进行进一步转换以生成目标功能组件,并将所生成的目标功能组件缓存至预设的功能组件列表;当全部的目标功能组件均被缓存后,对其进行渲染以得到各自对应的小程序页面,最后按照业务需求信息内的小程序页面跳转顺序,组合各个小程序页面,生成目标小程序并将其返回至需求端。从而通过对小程序常用功能进行组件化编辑,以功能组件库的形式供后续小程序的构建使用,减少代码的大量重复编写,提高了小程序的开发效率;通过组件化配置的形式适配各种需求端的代码编程语言,在技术人员编码能力和风格不同的情况下也能够保证小程序代码的统一性,更为有效地减少后期维护难度与维护成本;因此,本发明通过对小程序功能的组件化并以功能组件库调用的形式适配各种需求端的小程序需求,在提高了小程序代码的复用率与开发效率的同时有效降低了小程序的维护成本。
请参阅图2,图2为本发明实施例二提供的一种小程序的组件化构建方法的步骤流程图。
本发明提供的一种小程序的组件化构建方法,包括:
步骤201,响应需求端发送的小程序构建请求,从小程序构建请求中提取目标小程序对应的业务需求信息。
在本发明实施例中,步骤201的具体实施过程与步骤101类似,在此不再赘述。
步骤202,根据业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件。
可选地,步骤202可以包括以下子步骤:
解析业务需求信息,确定目标小程序需求的功能组件类型;
按照功能组件类型查找预设的功能组件库,选定符合功能组件类型的至少一个待转换功能组件。
在本发明实施例中,在提取得到业务需求信息后,对业务需求信息进行解析,以从中确定目标小程序所需要使用的功能组件类型,进一步按照功能组件类型对功能组件库进行查找,选定符合功能组件类型的至少一个待转换功能组件。
进一步地,业务需求信息还包括需求组件版本号,步骤202还可以包括以下子步骤:
提取各个待转换功能组件对应的组件版本号;
选取组件版本号与需求组件版本号相同的待转换功能组件作为新的待转换功能组件。
组件版本号指的是功能组件的标识号,使用户能够了解所使用的功能组件是否为最新的版本以及它所提供的功能种类。
在具体实现中,实现同一功能的功能组件可能存在多个版本,为进一步提高筛选效率,在选定符合功能组件类型的待转换功能组件后,还可以提取各个待转换功能组件所对应的组件版本号,通过比对各个组件版本号和业务需求信息内的需求组件版本号,从组件版本号中能够选取与需求组件版本号相同的待转换功能组件作为新的待转换功能组件,从而实现对待转换功能组件的精细化筛选。
值得一提的是,由于实现同一功能的功能组件在存在多个版本的同时还存在多种命名,此时还可以根据业务需求信息携带的需求组件名称,从中筛选到所需要的版本以及命名的功能组件。
步骤203,基于待转换功能组件内的原始代码对应的编程语言,对原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表。
可选地,步骤203可以包括以下子步骤S11-S14:
若所述待转换功能组件内的原始代码对应的编程语言为JavaScript,则解析待转换功能组件内的原始代码,构建原始抽象语法树;
按照业务需求信息需求的目标代码语言,对原始抽象语法树内的各个树节点进行转换,得到符合目标代码语言的目标抽象语法树;
遍历目标抽象语法树,生成第一目标代码字符串;
编译第一目标代码字符串,得到目标功能组件并缓存至预设的功能组件列表。
抽象语法树AST(Abstract Syntax Tree)指的是源代码语法所对应的树状结构。也就是说,对于一种具体编程语言下的源代码,通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上,例如。原始抽象语法树指的是由原始代码中的语句所映射的抽象语法树,目标抽象语法树指的是由目标代码语言中的语句所映射的抽象语法树。
JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
在本发明实施例中,由于待转换功能组件是通过技术人员采用JavaScript类型的编程语言进行编写的,不同的需求端所采用的代码框架并不相同,例如浏览器使用的HTML5语言、vue框架或Taro框架等,JS语言所编写的原始代码无法在需求端的框架上运行。
为此,在对功能组件进行渲染生成小程序页面之前,可以对待转换功能组件的原始代码进行解析,将其中的语句映射为抽象语法树的结构形式,得到原始抽象语法树,再进一步按照业务需求信息需求的目标代码语言,对原始抽象语法树内的各个树节点进行转换,得到符合目标代码语言的目标抽象语法树,从而完成对原始抽象语法树的转换,再通过遍历目标抽象语法树的方式获取到对应的第一目标代码字符串,对第一目标代码字符串进行编译生成目标功能组件,并缓存至预设的功能组件列表,等待后续进一步的页面渲染。
以原始代码“var a=1;”为例,将其映射为原始抽象语法树后,得到以下形式:
Figure BDA0003488600850000101
可以把ast中Keyword的值修改为let,从而得到转换后的第一目标代码字符串为“let a=1;”。
可选地,步骤203可以包括以下子步骤S21-S24:
若所述待转换功能组件内的原始代码对应的编程语言为级联样式表,则解析待转换功能组件内的原始代码,获取含有动态节点的动态分析树;
按照业务需求信息需求的目标代码语言,将动态分析树转换为静态分析树;
遍历静态分析树,生成第二目标代码字符串;
编译第二目标代码字符串,得到目标功能组件并缓存至预设的功能组件列表。
分析树指的是语法分析树,是推导的图形表示形式,它过滤掉了推导过程中对非终结符号应用产生式的顺序。每一个语法分析树的每个内部节点表示一个产生式的应用。该内部节点的标号是此产生式头中非终结符号。这些节点的子节点的标号从左到右组成了在推导过程中替换这个表达式的产生式体。动态分析树指的是动态生成原始代码的相关节点的语法分析树;静态分析树指的是不运行原始代码的情况下,将原始代码映射为语法分析树的形式所得到的语法分析树。
在本发明的一个示例中,在选定待转换功能组件后,若编程语言为级联样式表,进一步对待转换功能组件进行解析,得到原始代码以获取到含有多个动态节点的动态分析树,再按照业务需求信息所需求的目标代码语言,对动态分析树进行转换,得到静态分析树,最后通过遍历静态分析树以得到第二目标代码字符串,采用第二目标字符串进行编译后,得到目标功能组件并将其缓存至功能组件列表。
以级联样式表CSS为例,在获取到DSL源代码的分析树后,可以将含有动态节点的动态分析树转换为静态分析树,将其进一步转换为CSS静态分析树并遍历该CSS静态分析树,得到CSS代码并编译,得到目标功能组件。
步骤204,渲染功能组件列表内的全部目标功能组件,得到至少一个小程序页面。
可选地,步骤204可以包括以下子步骤:
创建至少一个初始页面;
按照业务需求信息对应的框架结构和显示样式对初始页面进行更新,得到中间页面;
从功能组件列表内逐一加载目标功能组件至各个中间页面并渲染,得到至少一个小程序页面。
框架结构指的是wxml,主要包括视图容器、基础内容、表单组件、操作反馈组件、导航组件、多媒体组件、地图组件和画布组件等八类基础组件,通过上述基础组件在页面上的设置组合,完成对小程序页面的框架结构构建。
显示样式指的是wxss,用于决定组件的显示方式,显示设置通常包括尺寸单位和样式导入,例如显示、浮动、定位、背景、边框、轮廓、文本属性、字体属性、外边距和填充等。
在本发明实施例中,当全部目标功能组件均缓存至功能组件列表后,为实现在本地的页面预览,可以预先创建至少一个初始页面,进一步解析业务需求信息,从中获取到对应的框架结构和显示样式,并采用该框架结构和显示样式对初始页面进行构建更新,以得到中间页面,最后从功能组件列表内逐一加载目标功能组件至各个中间页面并渲染,得到至少一个小程序页面。
需要说明的是,在具体实现中可以采用json文件预先生成初始界面,通过装载框架结构wxml和显示样式wxss,同时将功能组件列表内的目标功能组件逐一加载,调用页面构造器例如page生成对应的中间页面,最后通过页面渲染生成各个小程序页面的最终结构,并执行onload事件进行回调。
步骤205,组合全部小程序页面,生成目标小程序并返回至需求端。
在得到至少一个小程序页面后,由于单个小程序页面并未存在跳转的顺序,无法实现小程序页面间的跳转或实现小程序的功能。
为此可以进一步按照业务需求信息所携带的页面顺序,建立各个小程序页面之间的跳转逻辑关系并进行组合,在前端生成目标小程序并返回至需求端,从而实现响应各种平台的需求对目标小程序进行组件化构建。
请参阅图3,图3示出了本发明实施例的一种商品领券过程的流程示意图。
在本实施例中,开发人员可以预先通过components开发工具开发出一系列基于taro框架的组件,例如图片组件,领券组件,菜单组件,再通过linux命令上传到功能组件库例如npm私域服务器。
当接收到需求端发送的小程序构建请求后,运行npm install命令,从私域服务器下载符合目标版本号的图片组件,领券组件等,通过taro打包命令生成小程序源码并进行编译,得到目标小程序返回至需求端,以使用户能够在需求端上看到各种图片以及进行领券。
值得一提的是,在用户通过components工具对原始代码进行编译时,根据原始代码中出现的import(ES Modules)或者是require(CommonJS)之类的语句,解析推断出来这个文件所依赖的资源模块,然后再分别去解析每个资源模块的依赖,周而复始,最后形成整个项目中所有用到的文件之间的依赖关系树。而对于无法通过JavaScript代码表示的资源模块,例如图片或字体文件,一般会将它们单独作为资源文件拷贝到输出目录中,然后将这个资源文件所对应的访问路径作为该模块展示在前端展示等待用户进行操作。
步骤206,当接收到组件源码更新请求时,基于组件源码更新请求从功能组件库内选取待更新功能组件。
组件源码更新请求指的是响应用户在本地屏幕上的触发所生成的请求信息,用于指定需要更新的待更新功能组件。
当用户需要对各个需求端的目标小程序进行版本更新时,若是逐个平台进行更新所花费的时间较多,开发成本增加。因此,当本地接收到组件源码更新请求时,响应该组件源码更新请求,从功能组件库内选取对应的待更新功能组件,进一步对其待更新功能组件内的原始代码进行更新,从而在后续需求端再次获取功能组件库内的功能组件时,能够直接获取到已更新的功能组件,而不需要针对各种需求端分别进行小程序代码的更新,实现低时间成本的目标小程序更新。
步骤207,响应输入的源码更新信息,对待更新功能组件内的待更新代码进行更新,得到更新代码。
源码更新信息指的是用户(例如前端开发人员)编写各类不同的组件输入的代码(例如js代码、css代码),用于对各个组件内已有的待更新代码进行更改和优化。
在选取到待更新功能组件后,用户可以进一步输入源码更新信息,通过键入代码或修改的方式对待更新功能组件内的待更新代码进行更新,得到更新代码。
步骤208,当接收到针对待更新代码的更新完成指令时,编译更新代码,得到更新功能组件并更新对应的原始版本号。
在用户对待更新代码进行更新后,可以先对待更新代码进行预编译以确定是否存在bug,若是不存在则可以进一步输入更新完成指令,例如点击提交等。此时正式对更新代码进行编译,得到更新功能组件。
与此同时,为区别更新功能组件和待更新功能组件,可以进一步修改待更新功能组件对应的原始版本号。
步骤209,将更新功能组件作为新的功能组件缓存至功能组件库。
在完成对更新功能组件的原始版本号更新后,可以将其作为新的功能组件缓存至功能组件库,待再次接收到需求端发送的小程序构建请求时,重复执行步骤201-205,从而完成对目标小程序的更新。
在本发明实施例中,通过响应需求端发送的小程序构建请求,从中提取需求的目标小程序对应的业务需求信息,再根据业务需求信息从预设的功能组件库中查找对应的至少一个待转换功能组件,而为实现对需求端小程序代码的适配,可以对待转换功能组件内的原始代码进行进一步转换以生成目标功能组件,并将所生成的目标功能组件缓存至预设的功能组件列表;当全部的目标功能组件均被缓存后,对其进行渲染以得到各自对应的小程序页面,最后按照业务需求信息内的小程序页面跳转顺序,组合各个小程序页面,生成目标小程序并将其返回至需求端。从而对小程序常用功能进行组件化编辑,以功能组件库的形式供后续小程序的构建使用,减少代码的大量重复编写,提高了小程序的开发效率;通过组件化配置的形式适配各种需求端的代码编程语言,在技术人员编码能力和风格不同的情况下也能够保证小程序代码的统一性,更为有效地减少后期维护难度与维护成本;因此,本发明通过对小程序功能的组件化并以功能组件库调用的形式适配各种需求端的小程序需求,在提高了小程序代码的复用率与开发效率的同时有效降低了小程序的维护成本。
请参阅图4,图4为本发明实施例三提供的一种小程序的组件化构建装置的结构框图。
本发明实施例提供了一种小程序的组件化构建装置,包括:
业务需求信息提取模块401,用于响应需求端发送的小程序构建请求,从小程序构建请求中提取目标小程序对应的业务需求信息;
待转换功能组件选取模块402,用于根据业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件;
代码转换与缓存模块403,用于基于待转换功能组件内的原始代码对应的编程语言,对原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表;
小程序页面生成模块404,用于渲染功能组件列表内的全部目标功能组件,得到至少一个小程序页面;
小程序页面组合模块405,用于组合全部小程序页面,生成目标小程序并返回至需求端。
可选地,待转换功能组件选取模块402具体用于:
解析业务需求信息,确定目标小程序需求的功能组件类型;
按照功能组件类型查找预设的功能组件库,选定符合功能组件类型的至少一个待转换功能组件。
可选地,业务需求信息还包括需求组件版本号,待转换功能组件选取模块402具体还用于:
提取各个待转换功能组件对应的组件版本号;
选取组件版本号与需求组件版本号相同的待转换功能组件作为新的待转换功能组件。
可选地,代码转换与缓存模块403具体用于:
若所述待转换功能组件内的原始代码对应的编程语言为JavaScript,则解析待转换功能组件内的原始代码,构建原始抽象语法树;
按照业务需求信息需求的目标代码语言,对原始抽象语法树内的各个树节点进行转换,得到符合目标代码语言的目标抽象语法树;
遍历目标抽象语法树,生成第一目标代码字符串;
编译第一目标代码字符串,得到目标功能组件并缓存至预设的功能组件列表。
可选地,代码转换与缓存模块403具体用于:
若所述待转换功能组件内的原始代码对应的编程语言为级联样式表,则解析待转换功能组件内的原始代码,获取含有动态节点的动态分析树;
按照业务需求信息需求的目标代码语言,将动态分析树转换为静态分析树;
遍历静态分析树,生成第二目标代码字符串;
编译第二目标代码字符串,得到目标功能组件并缓存至预设的功能组件列表。
可选地,小程序页面生成模块404具体用于:
创建至少一个初始页面;
按照业务需求信息对应的框架结构和显示样式对初始页面进行更新,得到中间页面;
从功能组件列表内逐一加载目标功能组件至各个中间页面并渲染,得到至少一个小程序页面。
可选地,装置还包括:
待更新功能组件选取模块,用于当接收到组件源码更新请求时,基于组件源码更新请求从功能组件库内选取待更新功能组件;
代码更新模块,用于响应输入的源码更新信息,对待更新功能组件内的待更新代码进行更新,得到更新代码;
组件与版本号更新模块,用于当接收到针对待更新代码的更新完成指令时,编译更新代码,得到更新功能组件并更新对应的原始版本号;
功能组件缓存模块,用于将更新功能组件作为新的功能组件缓存至功能组件库。
本发明实施例提供了一种电子设备,包括存储器及处理器,所述存储器中储存有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如本发明任一实施例所述的小程序的组件化构建方法的步骤。
本发明实施例提供了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被执行时实现如本发明任一实施例所述的小程序的组件化构建方法。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的装置和模块的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本发明所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个***,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-OnlyMemory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种小程序的组件化构建方法,其特征在于,包括:
响应需求端发送的小程序构建请求,从所述小程序构建请求中提取目标小程序对应的业务需求信息;
根据所述业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件;
基于所述待转换功能组件内的原始代码对应的编程语言,对所述原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表;
渲染所述功能组件列表内的全部所述目标功能组件,得到至少一个小程序页面;
组合全部所述小程序页面,生成所述目标小程序并返回至所述需求端。
2.根据权利要求1所述的方法,其特征在于,所述根据所述业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件的步骤,包括:
解析所述业务需求信息,确定所述目标小程序需求的功能组件类型;
按照所述功能组件类型查找预设的功能组件库,选定符合所述功能组件类型的至少一个待转换功能组件。
3.根据权利要求2所述的方法,其特征在于,所述业务需求信息还包括需求组件版本号,所述根据所述业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件的步骤,还包括:
提取各个所述待转换功能组件对应的组件版本号;
选取所述组件版本号与所述需求组件版本号相同的待转换功能组件作为新的待转换功能组件。
4.根据权利要求1所述的方法,其特征在于,所述基于所述待转换功能组件内的原始代码对应的编程语言,对所述原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表的步骤,包括:
若所述待转换功能组件内的原始代码对应的编程语言为JavaScript,则解析所述待转换功能组件内的原始代码,构建原始抽象语法树;
按照所述业务需求信息需求的目标代码语言,对所述原始抽象语法树内的各个树节点进行转换,得到符合所述目标代码语言的目标抽象语法树;
遍历所述目标抽象语法树,生成第一目标代码字符串;
编译所述第一目标代码字符串,得到目标功能组件并缓存至预设的功能组件列表。
5.根据权利要求1所述的方法,其特征在于,所述基于所述待转换功能组件内的原始代码对应的编程语言,对所述原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表的步骤,包括:
若所述待转换功能组件内的原始代码对应的编程语言为级联样式表,则解析所述待转换功能组件内的原始代码,获取含有动态节点的动态分析树;
按照所述业务需求信息需求的目标代码语言,将所述动态分析树转换为静态分析树;
遍历所述静态分析树,生成第二目标代码字符串;
编译所述第二目标代码字符串,得到目标功能组件并缓存至预设的功能组件列表。
6.根据权利要求1所述的方法,其特征在于,所述渲染所述功能组件列表内的全部所述目标功能组件,得到至少一个小程序页面的步骤,包括:
创建至少一个初始页面;
按照所述业务需求信息对应的框架结构和显示样式对所述初始页面进行更新,得到中间页面;
从所述功能组件列表内逐一加载所述目标功能组件至各个所述中间页面并渲染,得到至少一个小程序页面。
7.根据权利要求1-6任一项所述的方法,其特征在于,所述方法还包括:
当接收到组件源码更新请求时,基于所述组件源码更新请求从所述功能组件库内选取待更新功能组件;
响应输入的源码更新信息,对所述待更新功能组件内的待更新代码进行更新,得到更新代码;
当接收到针对所述待更新代码的更新完成指令时,编译所述更新代码,得到更新功能组件并更新对应的原始版本号;
将所述更新功能组件作为新的功能组件缓存至所述功能组件库。
8.一种小程序的组件化构建装置,其特征在于,包括:
业务需求信息提取模块,用于响应需求端发送的小程序构建请求,从所述小程序构建请求中提取目标小程序对应的业务需求信息;
待转换功能组件选取模块,用于根据所述业务需求信息,从预设的功能组件库中查找对应的至少一个待转换功能组件;
代码转换与缓存模块,用于基于所述待转换功能组件内的原始代码对应的编程语言,对所述原始代码进行转换,生成目标功能组件并缓存至预设的功能组件列表;
小程序页面生成模块,用于渲染所述功能组件列表内的全部所述目标功能组件,得到至少一个小程序页面;
小程序页面组合模块,用于组合全部所述小程序页面,生成所述目标小程序并返回至所述需求端。
9.一种电子设备,其特征在于,包括存储器及处理器,所述存储器中储存有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如权利要求1-7任一项所述的小程序的组件化构建方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被执行时实现如权利要求1-7任一项所述的小程序的组件化构建方法。
CN202210088369.7A 2022-01-25 2022-01-25 一种小程序的组件化构建方法、装置、设备和介质 Pending CN114489647A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210088369.7A CN114489647A (zh) 2022-01-25 2022-01-25 一种小程序的组件化构建方法、装置、设备和介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210088369.7A CN114489647A (zh) 2022-01-25 2022-01-25 一种小程序的组件化构建方法、装置、设备和介质

Publications (1)

Publication Number Publication Date
CN114489647A true CN114489647A (zh) 2022-05-13

Family

ID=81474139

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210088369.7A Pending CN114489647A (zh) 2022-01-25 2022-01-25 一种小程序的组件化构建方法、装置、设备和介质

Country Status (1)

Country Link
CN (1) CN114489647A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114936050A (zh) * 2022-05-25 2022-08-23 北京百度网讯科技有限公司 访问请求处理方法、装置、电子设备及存储介质
CN115113874A (zh) * 2022-08-30 2022-09-27 广州市玄武无线科技股份有限公司 基于小程序的配置开发方法、***、设备及存储介质
CN117390325A (zh) * 2023-12-11 2024-01-12 广州骏伯网络科技有限公司 一种生成小程序页面的方法、装置及***

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114936050A (zh) * 2022-05-25 2022-08-23 北京百度网讯科技有限公司 访问请求处理方法、装置、电子设备及存储介质
CN114936050B (zh) * 2022-05-25 2023-12-01 北京百度网讯科技有限公司 访问请求处理方法、装置、电子设备及存储介质
CN115113874A (zh) * 2022-08-30 2022-09-27 广州市玄武无线科技股份有限公司 基于小程序的配置开发方法、***、设备及存储介质
CN115113874B (zh) * 2022-08-30 2023-01-31 广州市玄武无线科技股份有限公司 基于小程序的配置开发方法、***、设备及存储介质
CN117390325A (zh) * 2023-12-11 2024-01-12 广州骏伯网络科技有限公司 一种生成小程序页面的方法、装置及***
CN117390325B (zh) * 2023-12-11 2024-04-05 广州骏伯网络科技有限公司 一种生成小程序页面的方法、装置及***

Similar Documents

Publication Publication Date Title
WO2021218327A1 (zh) 一种页面处理方法和相关装置
EP3876116B1 (en) Method and apparatus for running mini program, electronic device, and storage medium
US10325012B2 (en) Filtered stylesheets
CN114489647A (zh) 一种小程序的组件化构建方法、装置、设备和介质
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
CN110109659A (zh) 一种实现前端应用脚手架的***和服务器
CN110908712A (zh) 移动端跨平台的数据处理方法和设备
US9646103B2 (en) Client-side template engine and method for constructing a nested DOM module for a website
CN113126990A (zh) 一种页面开发方法、装置、设备及存储介质
CN116974620A (zh) 应用程序的生成方法、运行方法以及相应的装置
CN112000334A (zh) 页面开发方法、装置、服务器及存储介质
CN114706616A (zh) 小程序构建方法和装置
US11604662B2 (en) System and method for accelerating modernization of user interfaces in a computing environment
KR101552914B1 (ko) 웹 서버 어플리케이션 프레임워크 장치와 프레임워크를 이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체
CN106873989A (zh) 应用程序构造方法和装置
CN114911555A (zh) 页面显示方法、装置、电子设备及存储介质
CN113282328A (zh) 应用程序更新方法、计算机设备及计算机存储介质
CN112596734A (zh) 静态库生成方法及装置
CN113190509A (zh) 动画处理方法、装置、电子设备及计算机可读存储介质
CN116595284B (zh) 网页***运行方法、装置、设备、存储介质和程序
CN113495727B (zh) 业务组件开发方法、装置、电子设备及介质
CN116009863B (zh) 前端页面渲染方法、设备及存储介质
CN112269608B (zh) 一种在电视终端实现web应用加载优化的方法
JP2009098751A (ja) コーディング支援装置
CN117950642A (zh) 应用程序的资源配置方法和装置

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