CN117707531A - 一种基于uni-app的小程序开发、编译和运行系统 - Google Patents
一种基于uni-app的小程序开发、编译和运行系统 Download PDFInfo
- Publication number
- CN117707531A CN117707531A CN202311740273.5A CN202311740273A CN117707531A CN 117707531 A CN117707531 A CN 117707531A CN 202311740273 A CN202311740273 A CN 202311740273A CN 117707531 A CN117707531 A CN 117707531A
- Authority
- CN
- China
- Prior art keywords
- applet
- page
- layer
- app
- uni
- 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
Links
- 238000011161 development Methods 0.000 claims abstract description 65
- 238000013461 design Methods 0.000 claims abstract description 25
- 238000009877 rendering Methods 0.000 claims abstract description 14
- 238000000926 separation method Methods 0.000 claims abstract description 4
- 238000000034 method Methods 0.000 claims description 16
- 230000008569 process Effects 0.000 claims description 14
- 238000004806 packaging method and process Methods 0.000 claims description 13
- 230000003993 interaction Effects 0.000 claims description 12
- 238000012545 processing Methods 0.000 claims description 11
- 230000006870 function Effects 0.000 claims description 8
- 230000000694 effects Effects 0.000 claims description 6
- 230000005540 biological transmission Effects 0.000 claims description 5
- 230000008520 organization Effects 0.000 claims description 4
- 238000004891 communication Methods 0.000 claims description 3
- 230000004048 modification Effects 0.000 claims description 3
- 238000012986 modification Methods 0.000 claims description 3
- 230000002688 persistence Effects 0.000 claims description 3
- 230000004044 response Effects 0.000 claims description 3
- 230000001960 triggered effect Effects 0.000 claims description 2
- 230000002452 interceptive effect Effects 0.000 abstract 1
- 244000205754 Colocasia esculenta Species 0.000 description 5
- 235000006481 Colocasia esculenta Nutrition 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 238000006243 chemical reaction Methods 0.000 description 2
- 239000000463 material Substances 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000002860 competitive effect Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 239000012092 media component Substances 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Stored Programmes (AREA)
Abstract
本发明提出了一种基于uni‑app的小程序开发、编译和运行系统，包括：小程序开发模块采用多端框架uni‑app作为小程序设计服务的底层支持，将uni‑app框架中的组件封装成可进行拖拉拽的组件；小程序编译模块将通过拖拉拽方式开发的小程序代码编译成微信小程序代码并进行分析，转换为可支持运行的小程序代码，再编译生成最终能在小程序容器中运行的代码；小程序运行模块向宿主应用APP提供小程序容器SDK加载并运行编译后的小程序代码，利用宿主应用APP的原生的能力以及与JS之间的交互JSBridge接口，封装成组件和API接口，对编译后的小程序代码进行页面渲染和能力调用，通过双线程模型实现视图层和逻辑层的分离。本发明可以提升小程序的开发效率，节约开发成本。
Description
技术领域
本发明涉及计算机和移动端技术领域，特别涉及一种基于uni-app的小程序开发、编译和运行系统。
背景技术
近年来，随着移动互联网的高速发展，用户量的不断增加，使得移动互联网变得更加具有竞争力。而小程序作为移动应用的一种形式，也受到了行业内的广泛关注。它结合了网页和智能手机的优点，拥有更加丰富的用户体验和更加灵活的功能，所以，它被认为是移动互联网的未来发展方向。
移动互联网进入“超级App+小程序”的时代，微信、字节、百度、支付宝等大厂都拥有自己的小程序开放平台，通过将自身引擎化，吸引外部合作方进入，从而陆续建立起自己的小程序生态。通过小程序这个载体，开发者有更多的机会触达到互联网用户，将头部平台的流量变成自己的流量；伴随着庞大的开发者群体入驻，头部平台也有机会在稳定的流量基础之上进行再深耕，进一步延长用户时间。
传统的小程序开发需要先学习要部署目标平台上的小程序开发语法，或者是使用多端开发框架例如uni-app、taro等进行开发。传统的小程序编译都是通过部署目标平台上的小程序开发工具进行编译，或者是使用多端开发框架例如uni-app、taro等进行编译成目标小程序。传统的小程序开发编译方式需要先部署到目标平台，利用目标平台的开发语法和开发工具执行，这就导致小程序开发编译存在效率低下和开发成本高等问题。
发明内容
本发明的目的旨在至少解决所述技术缺陷之一。
为此，本发明的目的在于提出一种基于uni-app的小程序开发、编译和运行系统，可以提升小程序的开发效率，节约开发成本。
为了实现上述目的，本发明的实施例提供一种基于uni-app的小程序开发、编译和运行系统，包括：小程序开发模块、小程序编译模块和小程序运行模块，其中，
所述小程序开发模块部署在服务层，用于采用多端框架uni-app作为小程序设计服务的底层支持，将uni-app框架中的组件封装成能够进行拖拉拽的组件，以使得用户通过拖拉拽的方式进行小程序开发；其中封装成能够进行拖拉拽组件的过程如下：查找出uni-app框架中使用频率较高的组件，识别出所述使用频率较高的组件能够进行配置的属性，之后将所述使用频率较高的组件的源码文件和配置文件封装成能够进行拖拉拽的组件，每拖拽一个组件到页面相当于将源码文件添加到页面，再对拖拽组件的配置信息进行修改，以实现间接修改原组件的属性，使页面的数据响应式重新渲染页面视图，以达到所改即所见的效果；
所述小程序编译模块部署在服务层，用于将通过拖拉拽方式开发的小程序代码编译成微信小程序代码，然后对转换后的微信小程序代码进行分析，将WXML类型文件、JS类型文件和WXSS类型文件转换为对应的能够支持运行的小程序代码，再对转换后的能够支持运行的小程序代码进行编译，编译生成最终能在小程序容器中运行的代码；
所述小程序运行模块运行在小程序容器SDK中，用于向宿主应用APP提供小程序容器SDK加载并运行编译后的小程序代码，利用所述宿主应用APP的原生的能力，以及与JS之间的交互JSBridge接口，封装成组件和API接口，以处理框架逻辑，并对编译后的小程序代码进行页面渲染和能力调用，通过双线程模型实现视图层和逻辑层的分离。
进一步，所述小程序开发模块包括：页面管理单元、路由设置单元、页面风格设置单元、页面预览单元和页面设计单元，其中，
所述页面管理单元用于维护小程序项目中的所有页面；
所述路由设置单元用于管理页面之间的跳转以及配置跳转页面；
所述页面风格设置单元用于统一的定义页面的样式和风格以及背景；
所述页面预览单元用于实时的预览拖拉拽组件后的页面显示效果；
所述页面设计单元用于执行图层管理、拖拉拽控件操作、组件配置和页面交互。
进一步，所述页面设计单元包括：图层管理子单元、拖拉拽控件操作子单元、组件配置子单元和页面交互子单元，其中，
所述图层管理子单元用于管理页面元素的所在的图层位置；
所述拖拉拽控件操作子单元用于实现控件的拖拉拽功能；
所述组件配置子单元用于用来设置拖拉拽后的组件；
所述页面交互子单元用于页面的JS逻辑管理和后台的数据接口调用。
进一步，所述小程序编译模块对转换后的微信小程序代码进行分析，将WXML类型文件、JS类型文件和WXSS类型文件转换为对应的能够支持运行的小程序代码，包括：
首先，将WXML类型的代码中的模板、组件、指令和属性进行转换，转换生成支持运行的小程序ZXML类型的代码；其中，ZXML类型对应微信的WXML类型，表示自定义的Z标准可扩展标记语言；
然后，将JS类型的代码中的引用进行转换，转换生成支持运行的小程序的JS代码；
最后，将WXSS类型的代码中的选择器进行转换，转换生成支持运行的小程序ZCSS类型的代码；其中，ZCSS类型对应微信的WXSS类型，表示自定义的Z标准层叠样式表。
进一步，所述小程序编译模块对转换后的能够支持运行的小程序代码进行编译，编译生成最终能在小程序容器中运行的代码，包括：
首先，对ZXML类型的代码文件进行编译，生成JavaScript的代码；
然后，对ZCSS类型的代码文件进行编译，生成html页面；
最后，将编译后的JavaScript的代码和html页面打包成资源包。
进一步，所述对ZXML类型的代码文件进行编译，包括如下步骤：
接收ZXML文件列表，将所有的ZXML类型的代码文件解析生成抽象语法树AST，然后解析输入的标签和属性并生成一个虚拟dom，将所述虚拟dom渲染为真实的dom结构，最后输出JavaScript的代码。
进一步，所述对ZCSS类型的代码文件进行编译，包括如下步骤：
接收ZCSS文件列表，将所有的ZCSS类型的代码文件解析生成AST，采用PostCSS工具对ZCSS文件进行处理，转换成最终的样式添加到html页面中。
进一步，所述小程序执行模块处理的框架逻辑，包括：数据绑定、组件、事件和通信。
进一步，所述小程序执行模块向宿主应用APP提供小程序容器SDK加载并运行编译后的小程序代码，所述宿主应用APP运行小程序时先初始化SDK，然后逻辑层加载小程序的资源包，获得小程序的配置对象，接着通过事件驱动通知视图层加载页面信息，页面渲染完成后通过事件驱动通知逻辑层页面渲染完成，然后逻辑层获取js中的请求，调用网络请求组件处理网络请求，逻辑层获取请求到的数据后再次通过事件驱动通知视图层加载数据，视图层根据数据重新渲染页面，并由视图层页面的触发事件通过事件驱动通知逻辑层，逻辑层根据触发的事件调用组件进行事件处理，处理完毕后逻辑层再次通过事件驱动通知视图层处理事件完成。
进一步，所述系统的业务架构采用分层设计，包括：数据层、传输层、应用层和展示层，其中，所述数据层用于提供缓存服务和数据持久化服务；所述应用层用于提供用户服务、组织机构服务、权限服务、角色服务、小程序应用服务、小程序页面服务、小程序导航服务、小程序设计服务和小程序接口服务；所述传输层采用WEB服务器；所述展示层用于通过WEB端和移动端向用户提供展示服务。
根据本发明实施例的基于uni-app的小程序开发、编译和运行系统，应用于小程序的开发、编译和运行，可以使得小程序的开发更加简单，不懂开发的业务人员也可以进行小程序的开发、编译和发布。此外，小程序运行的SDK可以集成兼容uni-app的其它小程序平台的SDK，使用本发明开发的小程序可以发布到其它的小程序平台。本发明提供的方案解决了开发小程序需要学习成本、开发小程序部署不同的小程序目标平台、小程序可视化开发的问题，降低了自定义小程序代码编译复杂和转换容错，开发的小程序可以运行在私有化部署的小程序平台APP，让小程序的开发和使用更加简单和方便，为后续相似用户需求做基础。
本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
附图说明
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：
图1为根据本发明实施例的基于uni-app的小程序开发、编译和运行系统的结构图；
图2为根据本发明实施例的小程序开发平台业务架构图；
图3为根据本发明实施例的小程序开发功能设计的示意图；
图4为根据本发明实施例的小程序编译的流程图；
图5为根据本发明实施例的小程序运行SDK设计的流程图；
图6为根据本发明实施例的页面设计的操作界面图。
具体实施方式
下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。
本发明实施例的基于uni-app的小程序开发、编译和运行系统的业务架构采用分层设计，包括：数据层、传输层、应用层和展示层，参考图2。
数据层用于提供缓存服务和数据持久化服务；应用层用于提供用户服务、组织机构服务、权限服务、角色服务、小程序应用服务、小程序页面服务、小程序导航服务、小程序设计服务和小程序接口服务；传输层采用WEB服务器；展示层用于通过WEB端和移动端向用户提供展示服务。分层结构的设计使得该系统的灵活性更高，不仅在各层级和模块进行了灵活的服务化拆分，更重要的是可以为软件其他相关领域提供一些基础的支撑服务，便于进行其他系统的快速集成和扩展，比如：应用层的用户服务、组织机构服务、权限服务、角色服务等可以复用到其他相关领域。
如图1所示，本发明实施例的基于uni-app的小程序开发、编译和运行系统，包括：小程序开发模块、小程序编译模块和小程序运行模块。
具体的，小程序开发模块部署在服务层，用于采用多端框架uni-app作为小程序设计服务的底层支持，将uni-app框架中的组件封装成能够进行拖拉拽的组件，以使得用户通过拖拉拽的方式进行小程序开发。其中，封装成可进行拖拉拽组件的过程如下：查找出uni-app框架中使用频率较高的组件，识别出使用频率较高的组件可进行配置的属性，之后将使用频率较高的组件的源码文件和配置文件封装成可进行拖拉拽的组件，每拖拽一个组件到页面相当于将源码文件添加到页面，再对拖拽组件的配置信息进行修改，相当于间接修改原组件的属性，使页面的数据响应式重新渲染页面视图，从而达到所改即所见的效果。此时通过拖拉拽的方式生成的代码并非真正的小程序代码，需要通过本发明提供的小程序编译功能才能转换成真正的小程序代码，从而可以提升小程序的开发效率，节约开发成本。
参考图1和如3，小程序开发模块包括：页面管理单元、路由设置单元、页面风格设置单元、页面预览单元和页面设计单元。页面管理单元用于维护小程序项目中的所有页面。路由设置单元用于管理页面之间的跳转以及配置哪些页面做作为底部菜单页面哪些作为跳转页面。页面风格设置单元用于统一的定义页面的样式和风格以及背景，起到动态换肤的效果。页面预览单元用于实时的预览拖拉拽组件后的页面显示效果。
页面设计单元用于执行图层管理、拖拉拽控件操作、组件配置和页面交互功能。
具体的，页面设计单元包括：图层管理子单元、拖拉拽控件操作子单元、组件配置子单元和页面交互子单元，如图6所示。
图层管理子单元用于管理页面元素的所在的图层位置。拖拉拽控件操作子单元用于实现控件的拖拉拽功能，其中控件又分为布局组件、基础组件、表单组件和媒体组件。组件配置子单元用于用来设置拖拉拽后的组件，包含组件属性设置、组件样式设置、组件事件驱动。页面交互子单元用于页面的JS逻辑管理和后台的数据接口调用。
如图4所示，小程序编译模块部署在服务层，利用多端框架uni-app的可以发布多端的特点，将通过拖拉拽方式开发的小程序代码编译成微信小程序代码，然后对转换后的微信小程序代码进行分析，先将WXML类型的代码中的模板、组件、指令、以及属性进行转换，转换生成本发明支持运行的小程序ZXML类型的代码，再将JS类型的代码中的引用进行转换，转换生成本发明支持运行的小程序的JS代码，然后将WXSS类型的代码中的选择器进行转换，转换生成本发明支持运行的小程序ZCSS类型的代码，最后将转换的本发明支持运行的小程序代码进行编译，编译生成最终能在本发明提供的小程序容器中运行的代码。
WXSS全名是WeiXin Style Sheets是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS。WXML(WeiXin Markup Language)是一套标签语言,结合基础组件、事件系统,可以构建出页面的结构,类似网页开发中的HTML。
小程序编译模块对转换后的微信小程序代码进行分析，将WXML类型文件、JS类型文件和WXSS类型文件转换为对应的可支持运行的小程序代码，包括：
首先，将WXML类型的代码中的模板、组件、指令和属性进行转换，转换生成支持运行的小程序ZXML类型的代码。ZXML类型是本发明自定义的词语，对应微信的WXML类型，指的是自定义的Z标准可扩展标记语言。
然后，将JS类型的代码中的引用进行转换，转换生成支持运行的小程序的JS代码。
最后，将WXSS类型的代码中的选择器进行转换，转换生成支持运行的小程序ZCSS类型的代码。ZCSS类型是本发明自定义的词语，对应微信的WXSS类型，指的是自定义的Z标准层叠样式表。
小程序编译模块对转换后的可支持运行的小程序代码进行编译，编译生成最终能在小程序容器中运行的代码，包括：
首先，对ZXML类型的代码文件进行编译，生成JavaScript的代码。
具体的，对ZXML类型的代码文件进行编译，包括如下步骤：接收ZXML文件列表，将所有的ZXML类型的代码文件解析生成抽象语法树AST，然后解析输入的标签和属性并生成一个虚拟dom，将虚拟dom渲染为真实的dom结构，最后输出JavaScript的代码。
然后，对ZCSS类型的代码文件进行编译，生成html页面。具体的，对ZCSS类型的代码文件进行编译，包括如下步骤：接收ZCSS文件列表，将所有的ZCSS类型的代码文件解析生成AST，采用PostCSS工具对ZCSS文件进行处理，转换成最终的样式添加到html页面中。AST(Abstract Syntax Tree，抽象语法树):前端里的一个很重要的概念，也是最原子化的内容，几乎所有的框架都是基于AST进行改造运行的，比如：React/Vue/Taro等等。多端的运行使用，都离不开AST这个概念。
最后，将编译后的JavaScript的代码和html页面打包成资源包。
如图5所示，小程序运行模块运行在小程序容器SDK中，用于向宿主应用APP提供小程序容器SDK加载并运行编译后的小程序代码，利用宿主应用APP的原生的能力(如蓝牙、相机、wifi等)，以及与JS之间的交互JSBridge接口，封装成组件和API接口，以数据绑定、组件系统、事件系统、通信系统等一系列框架逻辑，并对编译后的小程序代码进行页面渲染和能力调用，通过双线程模型实现视图层和逻辑层的分离。
小程序SDK提供了一套可运行小程序业务代码的环境和封装了小程序管理的处理引擎，其中运行环境用来执行小程序JS业务逻辑和渲染展示小程序的页面，为业务代码提供一个封闭和安全的运行环境，小程序管理处理引擎包含了对小程序的鉴权、查询和管理功能，方便第三方宿主应用更加方便快捷的集成SDK，管理和使用小程序。
宿主应用运行小程序时先初始化SDK，之后逻辑层首先加载小程序的资源包，获得小程序的配置对象，接着通过事件驱动通知视图层加载页面信息，页面渲染完成后通过事件驱动通知逻辑层页面渲染完成，然后逻辑层获取j s中的请求，调用网络请求组件处理网络请求，逻辑层获取请求到的数据后再次通过事件驱动通知视图层加载数据，随后视图层根据数据重新渲染页面，最后视图层页面的触发事件也会通过事件驱动通知逻辑层，之后逻辑层根据触发的事件调用组件进行事件处理，处理完毕后逻辑层再次通过事件驱动通知视图层处理事件完成。
根据本发明实施例的基于uni-app的小程序开发、编译和运行系统，应用于小程序的开发、编译和运行，可以使得小程序的开发更加简单，不懂开发的业务人员也可以进行小程序的开发、编译和发布。此外，小程序运行的SDK可以集成兼容uni-app的其它小程序平台的SDK，使用本发明开发的小程序可以发布到其它的小程序平台。本发明提供的方案解决了开发小程序需要学习成本、开发小程序部署不同的小程序目标平台、小程序可视化开发的问题，降低了自定义小程序代码编译复杂和转换容错，开发的小程序可以运行在私有化部署的小程序平台APP，让小程序的开发和使用更加简单和方便，为后续相似用户需求做基础。
本发明实施例的基于uni-app的小程序开发、编译和运行系统，具有以下有益效果：
(1)传统的小程序开发需要先学习要部署目标平台上的小程序开发语法，或者是使用多端开发框架例如uni-app、taro等进行开发。本发明提供基于uni-app进行开发，将uni-app的组件进行封装，基于多端框架uni-app框架进行小程序开发,结合拖拉拽的设计,用户可以通过拖拉拽的方式进行可视化的开，有效的降低了小程序开发的学习成本，并提高了小程序的开发效率，节约开发成本。
(2)传统的小程序编译都是通过部署目标平台上的小程序开发工具进行编译，或者是使用多端开发框架例如uni-app、taro等进行编译成目标小程序，本发明提供间接编译小程序的方法，先将基于用uni-app开发完成的代码编译成微信小程序，然后再将微信小程序编译成本发明支持运行的小程序。
(3)传统的小程序编译成部署目标平台上的小程序，然后部署到目标平台上用目标平台的APP打开小程序，本发明提供通过引入本发明封装的SDK可以运行编译后的本发明支持运行的小程序。
(4)基于多端框架uni-app框架进行小程序开发,结合拖拉拽的设计,通过多端框架uni-app先转换成微信小程序，再转换成自定义的小程序最后再进行编译，编译成可在小程序SDK中运行的资源文件,实现了自定义小程序从开发到编译再到最后运行的一整套流程。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在不脱离本发明的原理和宗旨的情况下在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。本发明的范围由所附权利要求及其等同限定。
Claims (10)
1.一种基于uni-app的小程序开发、编译和运行系统，其特征在于，包括：小程序开发模块、小程序编译模块和小程序运行模块，其中，
所述小程序开发模块部署在服务层，用于采用多端框架uni-app作为小程序设计服务的底层支持，将uni-app框架中的组件封装成能够进行拖拉拽的组件，以使得用户通过拖拉拽的方式进行小程序开发；其中封装成能够进行拖拉拽组件的过程如下：查找出uni-app框架中使用频率较高的组件，识别出所述使用频率较高的组件能够进行配置的属性，之后将所述使用频率较高的组件的源码文件和配置文件封装成能够进行拖拉拽的组件，每拖拽一个组件到页面相当于将源码文件添加到页面，再对拖拽组件的配置信息进行修改，以实现间接修改原组件的属性，使页面的数据响应式重新渲染页面视图，以达到所改即所见的效果；
所述小程序编译模块部署在服务层，用于将通过拖拉拽方式开发的小程序代码编译成微信小程序代码，然后对转换后的微信小程序代码进行分析，将WXML类型文件、JS类型文件和WXSS类型文件转换为对应的能够支持运行的小程序代码，再对转换后的能够支持运行的小程序代码进行编译，编译生成最终能在小程序容器中运行的代码；
所述小程序运行模块运行在小程序容器SDK中，用于向宿主应用APP提供小程序容器SDK加载并运行编译后的小程序代码，利用所述宿主应用APP的原生的能力，以及与JS之间的交互JSBridge接口封装成组件和API接口，以处理框架逻辑，并对编译后的小程序代码进行页面渲染和能力调用，通过双线程模型实现视图层和逻辑层的分离。
2.如权利要求1所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述小程序开发模块包括：页面管理单元、路由设置单元、页面风格设置单元、页面预览单元和页面设计单元，其中，
所述页面管理单元用于维护小程序项目中的所有页面；
所述路由设置单元用于管理页面之间的跳转以及配置跳转页面；
所述页面风格设置单元用于统一的定义页面的样式和风格以及背景；
所述页面预览单元用于实时的预览拖拉拽组件后的页面显示效果；
所述页面设计单元用于执行图层管理、拖拉拽控件操作、组件配置和页面交互。
3.如权利要求2所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述页面设计单元包括：图层管理子单元、拖拉拽控件操作子单元、组件配置子单元和页面交互子单元，其中，
所述图层管理子单元用于管理页面元素的所在的图层位置；
所述拖拉拽控件操作子单元用于实现控件的拖拉拽功能；
所述组件配置子单元用于用来设置拖拉拽后的组件；
所述页面交互子单元用于页面的JS逻辑管理和后台的数据接口调用。
4.如权利要求1所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述小程序编译模块对转换后的微信小程序代码进行分析，将WXML类型文件、JS类型文件和WXSS类型文件转换为对应的能够支持运行的小程序代码，包括：
首先，将WXML类型的代码中的模板、组件、指令和属性进行转换，转换生成支持运行的小程序ZXML类型的代码；其中，ZXML类型对应微信的WXML类型，表示自定义的Z标准可扩展标记语言；
然后，将JS类型的代码中的引用进行转换，转换生成支持运行的小程序的JS代码；
最后，将WXSS类型的代码中的选择器进行转换，转换生成支持运行的小程序ZCSS类型的代码；其中，ZCSS类型对应微信的WXSS类型，表示自定义的Z标准层叠样式表。
5.如权利要求4所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述小程序编译模块对转换后的能够支持运行的小程序代码进行编译，编译生成最终能在小程序容器中运行的代码，包括：
首先，对ZXML类型的代码文件进行编译，生成JavaScript的代码；
然后，对ZCSS类型的代码文件进行编译，生成html页面；
最后，将编译后的JavaScript的代码和html页面打包成资源包。
6.如权利要求5所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述对ZXML类型的代码文件进行编译，包括如下步骤：
接收ZXML文件列表，将所有的ZXML类型的代码文件解析生成抽象语法树AST，然后解析输入的标签和属性并生成一个虚拟dom，将所述虚拟dom渲染为真实的dom结构，最后输出JavaScript的代码。
7.如权利要求5所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述对ZCSS类型的代码文件进行编译，包括如下步骤：
接收ZCSS文件列表，将所有的ZCSS类型的代码文件解析生成AST，采用PostCSS工具对ZCSS文件进行处理，转换成最终的样式添加到html页面中。
8.如权利要求1所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述小程序执行模块处理的框架逻辑，包括：数据绑定、组件、事件和通信。
9.如权利要求1或8所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述小程序执行模块向宿主应用APP提供小程序容器SDK加载并运行编译后的小程序代码，所述宿主应用APP运行小程序时先初始化SDK，然后逻辑层加载小程序的资源包，获得小程序的配置对象，接着通过事件驱动通知视图层加载页面信息，页面渲染完成后通过事件驱动通知逻辑层页面渲染完成，然后逻辑层获取js中的请求，调用网络请求组件处理网络请求，逻辑层获取请求到的数据后再次通过事件驱动通知视图层加载数据，视图层根据数据重新渲染页面，并由视图层页面的触发事件通过事件驱动通知逻辑层，逻辑层根据触发的事件调用组件进行事件处理，处理完毕后逻辑层再次通过事件驱动通知视图层处理事件完成。
10.如权利要求1所述的基于uni-app的小程序开发、编译和运行系统，其特征在于，所述系统的业务架构采用分层设计，包括：数据层、传输层、应用层和展示层，其中，所述数据层用于提供缓存服务和数据持久化服务；所述应用层用于提供用户服务、组织机构服务、权限服务、角色服务、小程序应用服务、小程序页面服务、小程序导航服务、小程序设计服务和小程序接口服务；所述传输层采用WEB服务器；所述展示层用于通过WEB端和移动端向用户提供展示服务。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311740273.5A CN117707531A (zh) | 2023-12-18 | 2023-12-18 | 一种基于uni-app的小程序开发、编译和运行系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311740273.5A CN117707531A (zh) | 2023-12-18 | 2023-12-18 | 一种基于uni-app的小程序开发、编译和运行系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117707531A true CN117707531A (zh) | 2024-03-15 |
Family
ID=90161919
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311740273.5A Pending CN117707531A (zh) | 2023-12-18 | 2023-12-18 | 一种基于uni-app的小程序开发、编译和运行系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117707531A (zh) |
-
2023
- 2023-12-18 CN CN202311740273.5A patent/CN117707531A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10839141B2 (en) | System and method for provisioning a mobile software application to a mobile device | |
| US7721254B2 (en) | Programming interface for a computer platform | |
| CA2557111C (en) | System and method for building mixed mode execution environment for component applications | |
| US20070288644A1 (en) | Systems and methods for developing and running applications in a web-based computing environment | |
| US20230036980A1 (en) | Micro-frontend system, sub-application loading method, electronic device, computer program product, and computer-readable storage medium | |
| US20020198719A1 (en) | Reusable voiceXML dialog components, subdialogs and beans | |
| US20060167981A1 (en) | Web application architecture | |
| CN102495735A (zh) | web 端UI组件应用框架系统 | |
| MXPA06000106A (es) | Arquitectura de aplicacion web. | |
| KR101907660B1 (ko) | 웹 기반의 운영체제를 탑재한 단말 장치 및 이를 이용한 서비스 제공 방법 | |
| Goedicke et al. | Designing runtime variation points in product line architectures: three cases | |
| US20050005158A1 (en) | Method for compiling an active server page (ASP).Net Web service into a java compliant Web service | |
| Pietschmann et al. | Dynamic composition of service-oriented web user interfaces | |
| CN117707531A (zh) | 一种基于uni-app的小程序开发、编译和运行系统 | |
| Honkala et al. | A configurable XForms implementation | |
| Kao et al. | Designing an XML-based context-aware transformation framework for mobile execution environments using CC/PP and XSLT | |
| Juhnke et al. | LCDL: an extensible framework for wrapping legacy code | |
| Wang et al. | Information stream oriented content adaptation for pervasive computing | |
| Zaplata et al. | Service-based interactive workflows for mobile environments | |
| CN117539464A (zh) | 跨端页面开发方法、装置、设备及存储介质 | |
| Palviainen et al. | MIMEFrame-a framework for statically and dynamically composed adaptable mobile browsers | |
| Paternò et al. | of Document: Document about Architecture for migratory user | |
| ENBASHI et al. | FIXD: A FLASH MX IMPLEMENTATION OF XML DECLARATIVE USER INTERFACES FOR MOBILITY WEB SERVICES | |
| Chang | Customizing web applications through adaptable components and reconfigurable distribution | |
| US20100179981A1 (en) | Method and system for presenting content on mobile communications devices using a multimedia content description language |
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 |