CN114546482A

CN114546482A - 一种移动端前端开发跨框架适配方法

Info

Publication number: CN114546482A
Application number: CN202011363688.1A
Authority: CN
Inventors: 孙兆
Original assignee: Lailai Future Technology Zhejiang Co ltd
Current assignee: Lailai Future Technology Zhejiang Co ltd
Priority date: 2020-11-27
Filing date: 2020-11-27
Publication date: 2022-05-27

Abstract

本发明公开了一种移动端前端开发跨框架适配方法，所述方法包括以下步骤：步骤1:通过通用前端编程语言或通用DSL进行前端页面与组件的开发与实现；步骤2:将步骤1的开发结果最终投放于不同容器且容器个数为两个及以上；步骤3:将步骤1的开发结果借助两个及以上不同框架能力编译、构建或打包；步骤4:将步骤3编译结果投放至步骤2所描述容器。本发明采用了上述技术方案提供一种移动端前端开发跨框架适配方法，第一，解决了跨三端框架无法投放小程序容器的问题；第二，解决了跨小程序框架无法投放其他容器的问题；第三，解决了不同领域的跨多端框架的能力互通问题；第四，解决了跨移动端框架与跨桌面端框架的投放互通问题。

Description

一种移动端前端开发跨框架适配方法

技术领域

本发明涉及移动端开发技术领域，尤其是一种移动端前端开发跨框架适配方法。

背景技术

当前移动端设备已经是日常生活中必不可少的组成部分，产品的移动端已成为主流的产品形态之一。面对越来月复杂的移动端开发场景，需要越来越大的人力投入。移动端产品的开发往往需要关注不同端上的表现差异，在不同系统、不同容器上有者巨大的差异。在这样的背景下一批跨端的前端框架应运而生，包括跨三端框架 React Native、Weex、Flutter 等。大大减少了开发人员需要关心 Andord、iOS、Web 之间的差异，大大提升了开发效率。该系列框架只解决的系统与 Web 容器层面带来的差异，无法覆盖小程序场景。

小程序已经成为各大主流 App 的主要运行模式之一，包括阿里小程序、腾讯小程序、字节小程序等。在解决小程序容器之间的差异问题上，也出现了一批跨小程序框架，包括 Taro、Rax、un-app、mpvue、WePY 等。这些跨小程序框架可以大大减少开发不同小程序过程中的重复劳动，提升开发效率，该系列框架主要在解小程序层面的差异，覆盖的领域有限。

在小程序框架之中有一部分借助跨三端框架的能力，进行了更多容器的适配，比如 Taro、Rax，但 Taro 背后依赖的是 React Native 的能力、Rax 依赖的是 Weex 的能力，在各自的领域内可以解决问题，并不能打破领域之间的壁垒；面对桌面端跨端场景目前已有成熟跨端框架，比如 Electron、Tauri 等，但与移动端结合目前市面上还没有成熟的跨端方案。其移动端的部分跨端产品也可以向PC 端输出。

发明内容

为解决现有技术中的上述缺陷，本发明公开一种克服更多场景的跨端，抹平因为技术问题所带来的端上投放能力限制的一种移动端前端开发跨框架适配方法，它是采用以下技术方案来实现的。

一种移动端前端开发跨框架适配方法，所述方法包括以下步骤：步骤1: 通过通用前端编程语言或通用DSL进行前端页面与组件的开发与实现；步骤2: 将步骤1的开发结果最终投放于不同容器且容器个数为两个及以上；步骤3: 将步骤1的开发结果借助两个及以上不同框架能力编译、构建或打包；步骤4: 将步骤3编译结果投放至步骤2所描述容器。

进一步地，所述步骤1中的通用前端编程语言包括但不限于Javascript、HTML、CSS；所述通用DSL包括但不限于React、以及基于 React 特征的扩展 DSL；通用 DSL包括但不限于Vue、以及基于Vue 特征的扩展DSL；通用DSL 包括但不限于小程序语法、以及基于小程序语法语法特征的扩展 DSL。

进一步地，所述步骤2 中所述的容器包括不限于Web容器、H5容器、ReactNative容器、Weex容器、Fultter容器、Electron容器、Tauri容器、市面主流浏览器以及基于浏览器内核的改造容器、微信小程序容器、阿里小程序容器、百度小程序容器、QQ小程序容器、快应用容器、字节小程序容器、美团小程序容器、360小程序容器等，其中包括以支付宝小程序容器技术为基础衍生出的、淘宝小程序容器、钉钉小程序容器、阿里健康小程序等，其中字节小程序容器包括基于推荐引擎的今日头条小程序容器和抖音小程序容器。

进一步地，所述步骤3中的框架包括但不限于以 React 技术标准开发的跨端框架，其包括但不限于Taro、Rax 框架；以 Vue 技术标准开发的跨端框架，其包括但不限于Chameleon、uni-app、mpvue、WePY框架；以 Web 技术标准面向 Native 的跨三端框架，其包括但不限于 React Native、Weex框架；以其他技术标准面向 Native 的跨端框架，其包括但不限于Flutter。

进一步地，所述步骤4 中前端开发人员所编写内容仅需一次编写，不需要根据不同容器或框架进行大量重复性劳动，前端开发人员代码编写过程中可以对不同容器进行针对性扩展与兼容，前端开发人员代码编写过程中可以对不同框架进行针对性扩展与兼容，后续维护性工作仅需对所述步骤1的源码进行维护。

进一步地，所投放容器个数为两个及以上。

进一步地，所使用框架个数为两个及以上。

本发明的的有益效果：

本发明采用了上述技术方案提供一种移动端前端开发跨框架适配方法，第一，解决了跨三端框架无法投放小程序容器的问题；第二，解决了跨小程序框架无法投放其他容器的问题；第三，解决了不同领域的跨多端框架的能力互通问题；第四，解决了跨移动端框架与跨桌面端框架的投放互通问题。

附图说明

图1为本发明移动端前端开发跨框架适配方法的流程图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步得详细描述。

本发明实施例提供一种移动端前端开发跨框架适配方法，如图1所示，所述步骤包括：

步骤1: 通过通用前端编程语言或通用DSL进行前端页面与组件的开发与实现；步骤2: 将步骤1的开发结果最终投放于不同容器且容器个数为两个及以上；步骤3: 将步骤1的开发结果借助两个及以上不同框架能力编译、构建或打包；步骤4: 将步骤3编译结果投放至步骤2所描述容器。

通过上述步骤能够克服更多场景的跨端，抹平因为技术问题所带来的端上投放能力限制。

具体地，步骤1中，通用前端编程语言或 DSL 进行页面或组件的开发，其中使用的编程语言或 DSL 如下：通用前端编程语言包括但不限于 Javascript、HTML、CSS；通用 DSL包括但不限于 React、以及基于 React 特征的扩展 DSL，如 Preact、Rax ；通用 DSL 包括但不限于 Vue、以及基于 Vue 特征的扩展 DSL；通用 DSL 包括但不限于小程序语法、以及基于小程序语法语法特征的扩展 DSL；所开发的产物可以为细粒度的组件，也可为完整的页面或者 App，其中页面和 App 包括原生 Native 应用、Web 应用、小程序应用。

具体地，步骤2中，所编写的页面和组件可以投放一个或多个容器，其中投放两个及以上容器是需要选择所投放容器的组合形式。比如支付宝小程序加微信小程序，再比如Weex 容器与 React Native 容器。这个过程中开发人员可以自由选择所要投放的容器。其中容器包括不限于：Web 容器、H5 容器、ReactNative 容器、Weex 容器、Fultter 容器、Electron 容器、Tauri 容器、市面主流浏览器以及基于浏览器内核的改造容器、微信小程序容器、阿里小程序容器、百度小程序容器、QQ 小程序容器、快应用容器、字节小程序容器、美团小程序容器、360 小程序容器等，其中包括以支付宝小程序容器技术为基础衍生出的、淘宝小程序容器、钉钉小程序容器、阿里健康小程序等，其中字节小程序容器包括基于推荐引擎的今日头条小程序容器和抖音小程序容器。

具体地，步骤3中，市面上的跨端框架都能解决部分业务域内的问题，但是横向拉通来看在面对特殊的需求时，我们很有可能会不得不选择两种跨端框架或者使用原生方式进行开发。为了应对更加灵活多变的需求，这个过程中开发人员可以自由组合所使用的框架。市面上的跨端框架都能解决部分业务域内的问题，但是横向拉通来看在面对特殊的需求时，我们很有可能会不得不选择两种跨端框架或者使用原生方式进行开发。为了应对更加灵活多变的需求，这个过程中开发人员可以自由组合所使用的框架。构建打包的过冲中通过判断所需要投放的端，只能选择所需框架，使用对应跨端框架能力进行打包。其中框架包括不限于以 React 技术标准开发的跨端框架，比如 Taro、Rax 等，以 Vue 技术标准开发的跨端框架，比如 Chameleon、uni-app、mpvue、WePY，以 Web 技术标准面向 Native 的跨三端框架，比如 React Native、Weex 等，以其他技术标准面向 Native 的跨端框架，比如 Flutter 等。

具体地，步骤4中，最终产物进行跨端投放，以达到业务的投放目的。比如最终构建好的产物可以投放到支付宝小程序容器、Web 容器、Weex 容器等；前端开发人员所编写内容仅需一次编写，无需根据不同容器或框架进行大量重复性劳动；前端开发人员代码编写过程中可以对不同容器进行针对性扩展与兼容；前端开发人员代码编写过程中可以对不同框架进行针对性扩展与兼容；后续维护性工作仅需对步骤1的源码进行维护。

虽然本发明是结合以上实施例进行描述的，但本发明并不被限定于上述实施例，而只受所附权利要求的限定，本领域普通技术人员能够容易地对其进行修改和变化，但并不离开本发明的实质构思和范围。

应该注意的是，上述对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换方案。在权利要求中，单词“包含”不排除存在未列在权利要求中的元件或者步骤等。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干系统的单元权利要求中，这些系统中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二以及第三等的使用不表示任何顺序，可将这些单词解释为名称。

Claims

1.一种移动端前端开发跨框架适配方法，其特征在于，所述方法包括以下步骤：步骤1:通过通用前端编程语言或通用DSL进行前端页面与组件的开发与实现；步骤2: 将步骤1的开发结果最终投放于不同容器且容器个数为两个及以上；步骤3: 将步骤1的开发结果借助两个及以上不同框架能力编译、构建或打包；步骤4: 将步骤3编译结果投放至步骤2所描述容器。

2.根据权利要求1所述的一种移动端前端开发跨框架适配方法，其特征在于，所述步骤1中的通用前端编程语言包括但不限于Javascript、HTML、CSS；所述通用DSL包括但不限于React、以及基于 React 特征的扩展 DSL；通用 DSL包括但不限于Vue、以及基于Vue 特征的扩展DSL；通用DSL 包括但不限于小程序语法、以及基于小程序语法语法特征的扩展DSL。

3.根据权利要求1所述的一种移动端前端开发跨框架适配方法，其特征在于，所述步骤2 中所述的容器包括不限于Web容器、H5容器、ReactNative容器、Weex容器、Fultter容器、Electron容器、Tauri容器、市面主流浏览器以及基于浏览器内核的改造容器、微信小程序容器、阿里小程序容器、百度小程序容器、QQ小程序容器、快应用容器、字节小程序容器、美团小程序容器、360小程序容器等，其中包括以支付宝小程序容器技术为基础衍生出的、淘宝小程序容器、钉钉小程序容器、阿里健康小程序等，其中字节小程序容器包括基于推荐引擎的今日头条小程序容器和抖音小程序容器。

4.根据权利要求1所述的一种移动端前端开发跨框架适配方法，其特征在于，所述步骤3中的框架包括但不限于以 React 技术标准开发的跨端框架，其包括但不限于Taro、Rax框架；以 Vue 技术标准开发的跨端框架，其包括但不限于Chameleon、uni-app、mpvue、WePY框架；以 Web 技术标准面向 Native 的跨三端框架，其包括但不限于 React Native、Weex框架；以其他技术标准面向 Native 的跨端框架，其包括但不限于Flutter。

5.根据权利要求1所述的一种移动端前端开发跨框架适配方法，其特征在于，所述步骤4 中前端开发人员所编写内容仅需一次编写，不需要根据不同容器或框架进行大量重复性劳动，前端开发人员代码编写过程中可以对不同容器进行针对性扩展与兼容，前端开发人员代码编写过程中可以对不同框架进行针对性扩展与兼容，后续维护性工作仅需对所述步骤1的源码进行维护。

6.根据权利要求3所述的一种移动端前端开发跨框架适配方法，其特征在于，所投放容器个数为两个及以上。

7.根据权利要求4所述的一种移动端前端开发跨框架适配方法，其特征在于，所使用框架个数为两个及以上。