一种开发小程序的方法和电子设备与流程

1.本技术涉及终端技术领域，特别涉及一种开发小程序的方法和电子设备。

背景技术：

2.小程序是一种依托应用平台（宿主app）的应用程序，用户通过应用平台扫一扫或者搜一下即可打开支持该应用平台的小程序，实现小程序的应用功能。小程序不需要安装即可使用，并且，小程序数据量小，其相关数据下载不会占用大量网络资源，用户不用关心是否下载安装太多应用的问题。
3.由于小程序依托应用平台运行，其对运行环境存在一定依赖性。因此，在编译小程序代码时，需要根据其运行的终端操作系统进行适配。这就导致针对实现某一应用功能的小程序，需要对应其运行的不同终端操作系统，开发多个小程序版本，这就增加了小程序开发难度，加大了小程序开发工作量，延长了开发时间。
4.因此，需要一种简化小程序开发流程的方法，以降低小程序开发的难度。

技术实现要素：

5.针对现有技术下如何简化小程序开发流程的问题，本技术提供了一种开发小程序的方法和电子设备，本技术还提供一种计算机可读存储介质。
6.根据本技术实施例的方法，开发人员可以使用现有的技术栈，构建出适配于不同操作系统平台的web小程序，简化了小程序开发流程，降低了小程序开发难度。
7.本技术实施例采用下述技术方案：第一方面，本技术提供一种开发小程序的方法，所述方法应用于电子设备，所述方法包括：获取小程序的第一代码，所述第一代码为flutter代码；将所述第一代码编译成网页（web）代码，生成第二代码，其中，第二代码用于在网页（web）容器中加载运行时实现第一代码运行时所实现的小程序功能。
8.根据本技术实施例的方法，开发人员可以使用现有的技术栈，构建出适配于不同操作系统平台的web小程序，简化了小程序开发流程，降低了小程序开发难度。
9.在第一方面的一种实现方式中，所述第二代码包含基于桥接（jsbridge）和方法通道（methodchannel）封装的通信框架。
10.基于上述第一方面的实现方式，可以确保小程序运行期间与操作系统通信正常，无需考虑小程序的具体运行环境。
11.在第一方面的一种实现方式中，所述第一代码包含所述通信框架；所述生成第二代码，包括：在所述第二代码中，继承所述第一代码中的所述通信框架。
12.在第一方面的一种实现方式中，所述生成第二代码，包括：基于桥接（jsbridge）和方法通道（methodchannel）进行封装，生成所述通信框架；
将所述通信框架加入到所述第二代码中。
13.在第一方面的一种实现方式中，所述将所述第一代码编译成网页（web）代码，包括：基于flutter创建web端应用代码并选择超文本标记语言（html）渲染模式。
14.在第一方面的一种实现方式中，所述将所述第一代码编译成网页（web）代码，包括：使用命令行接口（cli）工具命令，生成动态模型文件（dynamic_module.json）。
15.在第一方面的一种实现方式中，所述第二代码包括边距配置信息，所述边距配置信息用于在所述第二代码加载到web容器运行时，配置web容器全屏显示时的边距。
16.基于上述第一方面的实现方式，可以有效提高小程序全屏运行时的视觉效果。
17.在第一方面的一种实现方式中，所述web容器为网页视图（webview）。
18.在第一方面的一种实现方式中，所述方法还包括：压缩所述第二代码文件，生成小程序压缩文件；上传所述小程序压缩文件到内容分发服务器。
19.第二方面，本技术提供一种运行小程序的方法，所述方法应用于电子设备，所述方法包括：获取小程序的代码文件，其中，所述代码文件的代码为由flutter代码所编译成的网页（web）代码；在web容器中加载所述代码文件。
20.在第二方面的一种实现方式中，所述代码文件包含基于桥接（jsbridge）和方法通道（methodchannel）封装的通信框架。
21.在第二方面的一种实现方式中，所述代码文件包括边距配置信息；所述在web容器中加载所述代码文件，包括：根据所述边距配置信息配置所述web容器全屏显示时的边距。
22.在第二方面的一种实现方式中，所述根据所述边距配置信息配置所述web容器全屏显示时的边距，包括：获取所述电子设备的终端操作系统的边距；根据所述电子设备的终端操作系统的边距配置所述web容器全屏显示时的边距。
23.在第二方面的一种实现方式中，所述获取小程序的代码文件之前，所述方法还包括：打开web容器深度链接。
24.第三方面，本技术提供一种一种电子设备，电子设备包括用于存储计算机程序指令的存储器和用于执行计算机程序指令的处理器，其中，当计算机程序指令被该处理器执行时，触发电子设备执行如第一方面的方法步骤。
25.第四方面，本技术提供一种一种电子设备，电子设备包括用于存储计算机程序指令的存储器和用于执行计算机程序指令的处理器，其中，当计算机程序指令被该处理器执行时，触发电子设备执行如第二方面的方法步骤。
26.第五方面，本技术提供一种计算机可读存储介质，其特征在于，计算机可读存储介质中存储有计算机程序，当其在计算机上运行时，使得计算机执行如第一方面的方法。
附图说明
27.图1所示为根据本技术一实施例的小程序开发流程图；图2所示为根据本技术一实施例的宿主app运行流程图；图3所示为根据本技术一实施例的宿主app运行流程图；图4所示为根据本技术一实施例的宿主app运行流程图；图5所示为根据本技术一实施例的电子设备结构示意图。
具体实施方式
28.为使本技术的目的、技术方案和优点更加清楚，下面将结合本技术具体实施例及相应的附图对本技术技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
29.本技术的实施方式部分使用的术语仅用于对本技术的具体实施例进行解释，而非旨在限定本技术。
30.针对现有技术下如何简化小程序开发流程的问题，本技术一实施例提供了一种开发小程序的方法。
31.flutter是一种跨平台开发技术，支持ios、android、macos、linux、windows、web等平台，可以实现一份代码编译出多个平台的应用程序。因此，在本技术一实施例中，基于flutter开发小程序的代码，以简化针对多个操作系统平台开发小程序的开发流程。
32.进一步的，flutter运行在移动端系统（例如，ios或android）时，业务代码的迭代更新必须发布新版本。由于小程序的运行依托应用平台（宿主app），用户在不更新宿主app情况下，无法使用最新版本的小程序。
33.针对上述问题，在本技术一实施例中，将小程序的flutter代码编译成网页（web）代码，终端设备下载小程序的web代码并在网页视图（webview）中加载，即可以实现小程序的运行。在小程序新版本发布时，终端设备下载新版本的小程序的web代码并在网页视图（webview）中加载，即可以实现新版本的小程序的运行，而无需更新宿主app。
34.图1所示为根据本技术一实施例的小程序开发流程图。电子设备执行如图1所示的下述流程以实现小程序开发。
35.s100，获取小程序的flutter代码（第一代码）。
36.具体的，在一实施例中，在flutter框架下进行代码编译，生成用于实现小程序功能的flutter代码。
37.s110，将第一代码编译成web代码，生成第二代码。第二代码用于在webview中加载，以实现第一代码运行时所实现的小程序功能。
38.例如，在一实施例中，基于flutter创建web端应用代码并选择html渲染模式：flutter build web
‑‑
web-renderer html。
39.生成文件：webi_assetsi_icons
i_faviconi_flutter_service_worker.jsi_index.htmli_main.dart.jsi_version.json又例如，在一实施例中，使用命令行接口（cli）工具命令，生成动态模型文件（dynamic_module.json）。
40.进一步的，小程序依托宿主app运行，在小程序运行过程中，有些功能或信息需要从运行宿主app的终端操作系统（原生系统）中获取。这就使得在小程序运行过程中，小程序需要和终端操作系统进行数据交互。
41.当flutter代码运行在移动终端操作系统（例如，ios或android）环境时，flutter与终端操作系统的通过方法通道（methodchannel）进行通信。而当web代码运行在web环境时，由于web环境没有methodchannel，webview只能通过桥接（jsbridge）与终端操作系统进行通信。
42.因此，为了确保由flutter代码编译成的web代码，在运行过程中可以和终端操作系统正常通信，在本技术一实施例中，第二代码包含基于jsbridge和methodchannel封装的通信框架。这样，在第二代码加载到webview运行时，就可以确保与终端操作系统的正常通信，无需关心运行的环境。
43.进一步的，在一种实现方式中，基于jsbridge和methodchannel封装的通信框架可以被包含在小程序的flutter代码（第一代码）中，在生成第二代码的过程中，第二代码继承第一代码中的通信框架。
44.在另一种实现方式中，第一代码并不包含通信框架，在生成第二代码的过程中，将通信框架加入到第二代码中。
45.进一步的，flutter运行在web环境时，如果忽略了移动设备全屏浏览时设备顶部和底部的边距，会导致视觉体验差。因此，为了提高小程序全屏显示的视觉体验，在本技术一实施例中，第二代码还包括边距配置信息。边距配置信息用于在第二代码加载到webview运行时，配置webview全屏显示时的边距。具体的，边距配置信息配置webview从当前的终端操作系统获取边距，以配置webview全屏显示的边距。
46.进一步的，为了发布小程序，在s110之后，方法还包括：s120，压缩第二代码，生成小程序压缩文件（例如，.zip文件）；s130，上传小程序压缩文件到内容分发服务器（cdn）。
47.根据本技术实施例的方法，开发人员可以使用现有的技术栈，构建出适配于不同操作系统平台的web小程序，简化了小程序开发流程，降低了小程序开发难度。进一步的，小程序内容可以持续更新，免去发布新版本app，且更新覆盖率高。
48.图2所示为根据本技术一实施例的宿主app运行流程图。终端操作系统中安装的宿主app执行如图2所示的下述流程，以更新从属于该宿主app的小程序。
49.s200，宿主app启动。
50.s210，获取支持当前宿主app的小程序信息。
51.例如，支持当前宿主app的小程序信息包括以下任意一种或多种信息的组合：
当前上线的支持宿主app的小程序名称，当前上线的支持宿主app的小程序的最新版本号，当前上线的支持宿主app的小程序的版本号与宿主app版本号的匹配关系。
52.s220，遍历本地（例如，当前终端设备）保存的所有小程序，基于支持当前宿主app的小程序信息，删除本地保存的小程序中已下线的小程序以及版本不匹配的小程序。
53.s230，遍历支持当前宿主app的小程序，更新本地的小程序数据。
54.图3所示为根据本技术一实施例的宿主app运行流程图。在s230中，针对支持当前宿主app的小程序中的第一小程序，终端操作系统中安装的宿主app执行如图3所示的下述流程，以更新本地的小程序数据。
55.s300，判断第一小程序所支持的宿主app版本范围是否包含终端操作系统中当前安装的宿主app宿主的版本。
56.例如，使用下述逻辑代码进行判断：minappversion《=host app version&&maxappversion》= host app version（式1）。
57.式1中，minappversion为第一小程序所支持的最低的宿主app版本号，maxappversion为第一小程序所支持的最高的宿主app版本号，host app version为终端操作系统中当前安装的宿主app宿主的版本号。
58.如果第一小程序所支持的宿主app版本范围不包含终端操作系统中当前安装的宿主app宿主的版本，则结束针对第一小程序的小程序数据更新流程。
59.如果第一小程序所支持的宿主app版本范围包含终端操作系统中当前安装的宿主app宿主的版本，执行s310。
60.s310，判断本地是否已保存有第一小程序的代码文件。
61.如果本地已保存有第一小程序的代码文件，执行s320。
62.s320，判断本地已保存的第一小程序的代码文件版本与第一小程序的最新版本是否一致。
63.如果本地已保存的第一小程序的代码文件版本与第一小程序的最新版本一致，则结束针对第一小程序的小程序数据更新流程。
64.如果本地未保存有第一小程序的代码文件，或者，如果本地已保存的第一小程序的代码文件版本与第一小程序的最新版本不一致，则执行s330。
65.s330，确认第一小程序的下载配置是否为应用启动时下载。
66.例如，在一实施例中，第一小程序的下载配置可以为在应用启动时下载，或者，在启动小程序时下载。如果第一小程序的下载配置为在应用启动时下载，则宿主app每次启动时都会将本地保存的第一小程序更新为最新版本；如果第一小程序的下载配置为在启动小程序时下载，则宿主app只有在用户启动第一小程序时才会将本地保存的第一小程序更新为最新版本。
67.如果第一小程序的下载配置不为应用启动时下载，则结束针对第一小程序的小程序数据更新流程。
68.如果第一小程序的下载配置为应用启动时下载，执行s340。
69.s340，下载第一小程序的最新版本的代码文件（例如，zip文件）。
70.s350，使用下载的代码文件更新本地的第一小程序的代码文件。
71.例如，在一实施例中，在s350中，解压第一小程序的最新版本的zip文件，解压后删除zip文件以及本地旧版本的第一小程序的代码文件，使用解压出的文件进行数据更新。
72.图4所示为根据本技术一实施例的宿主app运行流程图。在用户基于宿主app进行启动第一小程序的操作（例如，用户点击宿主app显示界面上第一小程序的图标）后，终端操作系统中安装的宿主app执行如图4所示的下述流程，以启动第一小程序。
73.s400，打开web容器（例如，webview）深度链接（deeplink）。
74.在一实施例中，用户基于宿主app进行启动第一小程序的操作后，宿主app打开一个web容器deeplink，以启动web容器并在web容器中加载第一小程序的web代码（第二代码）。
75.在打开web容器deeplink后，执行s410。
76.s410，判断本地是否保存有第一小程序的代码文件。
77.如果本地未保存有第一小程序的代码文件，执行s420。
78.s420，下载第一小程序的代码文件（例如，zip文件）。
79.s430，基于下载的代码文件更新本地保存的小程序数据。
80.例如，在一实施例中，解压zip文件，将解压后的文件保存到小程序数据的保存位置。
81.在针对第一小程序的小程序数据在本地更新保存完成后，或者，在s410确定本地保存有第一小程序的代码文件后，执行s440。
82.s440，获取第一小程序的代码文件在本地的存储路径。
83.s450，基于第一小程序的代码文件在本地的存储路径读取代码文件，打开web容器，在web容器中加载代码文件。
84.具体的，在s450中，获取当前的终端操作系统的边距；根据当前的终端操作系统的边距配置web容器全屏显示的边距（例如，保持一致的边距；或者，web容器全屏显示的边距为终端操作系统的边距的1.5倍）。
85.在本技术一实施例中，根据本技术实施例的方法流程构造用于实现方法流程功能的各种模块，模块的划分仅仅是一种逻辑功能的划分，在实施本技术实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现。
86.具体的，各个功能模块在实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块以软件通过处理元件调用的形式实现，部分模块通过硬件的形式实现。例如，检测模块可以为单独设立的处理元件，也可以集成在电子设备的某一个芯片中实现。其它模块的实现与之类似。此外这些模块全部或部分可以集成在一起，也可以独立实现。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。
87.例如，以上这些模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路（application specific integrated circuit，asic），或，一个或多个数字信号处理器（digital singnal processor，dsp），或，一个或者多个现场可编程门阵列（field programmable gate array，fpga）等。再如，这些模块可以集成在一起，以片上装置（system-on-a-chip，soc）的形式实现。
88.本技术一实施例还提出了一种电子设备。
89.图5所示为根据本技术一实施例的电子设备结构示意图。
90.电子设备500包括用于存储计算机程序指令的存储器510和用于执行程序指令的处理器520，其中，当该计算机程序指令被该处理器执行时，触发电子设备执行如本技术实施例所述电子设备所执行的方法步骤。
91.具体的，在本技术一实施例中，上述一个或多个计算机程序被存储在上述存储器中，上述一个或多个计算机程序包括指令，当上述指令被上述设备执行时，使得上述设备执行本技术实施例所述的方法步骤。
92.具体的，在本技术一实施例中，电子设备的处理器可以是片上装置soc，该处理器中可以包括中央处理器（central processing unit，cpu），还可以进一步包括其他类型的处理器。具体的，在本技术一实施例中，电子设备的处理器可以是pwm控制芯片。
93.具体的，在本技术一实施例中，涉及的处理器可以例如包括cpu、dsp、微控制器或数字信号处理器，还可包括gpu、嵌入式神经网络处理器（neural-network process units，npu）和图像信号处理器（image signal processing，isp），该处理器还可包括必要的硬件加速器或逻辑处理硬件电路，如asic，或一个或多个用于控制本技术技术方案程序执行的集成电路等。此外，处理器可以具有操作一个或多个软件程序的功能，软件程序可以存储在存储介质中。
94.具体的，在本技术一实施例中，电子设备的存储器可以是只读存储器（read-only memory，rom）、可存储静态信息和指令的其它类型的静态存储设备、随机存取存储器（random access memory，ram)或可存储信息和指令的其它类型的动态存储设备，也可以是电可擦可编程只读存储器（electrically erasable programmable read-only memory，eeprom）、只读光盘（compact disc read-only memory，cd-rom）或其他光盘存储、光碟存储（包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等）、磁盘存储介质或者其它磁存储设备，或者还可以是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何计算机可读介质。
95.具体的，在本技术一实施例中，处理器可以和存储器可以合成一个处理装置，更常见的是彼此独立的部件，处理器用于执行存储器中存储的程序代码来实现本技术实施例所述方法。具体实现时，该存储器也可以集成在处理器中，或者，独立于处理器。
96.进一步的，本技术实施例阐明的设备、装置、模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。
97.本领域内的技术人员应明白，本技术实施例可提供为方法、装置、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质上实施的计算机程序产品的形式。
98.在本技术所提供的几个实施例中，任一功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本技术各个实
施例所述方法的全部或部分步骤。
99.具体的，本技术一实施例中还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机程序，当其在计算机上运行时，使得计算机执行本技术实施例提供的方法。
100.本技术一实施例还提供一种计算机程序产品，该计算机程序产品包括计算机程序，当其在计算机上运行时，使得计算机执行本技术实施例提供的方法。
101.本技术中的实施例描述是参照根据本技术实施例的方法、设备（装置）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。
102.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。
103.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。
104.还需要说明的是，本技术实施例中，“至少一个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示单独存在a、同时存在a和b、单独存在b的情况。其中a，b可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项”及其类似表达，是指的这些项中的任意组合，包括单项或复数项的任意组合。例如，a，b和c中的至少一项可以表示：a，b，c，a和b，a和c，b和c或a和b和c，其中a，b，c可以是单个，也可以是多个。
105.本技术实施例中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
106.本技术可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本技术，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
107.本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施
例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
108.本领域普通技术人员可以意识到，本技术实施例中描述的各单元及算法步骤，能够以电子硬件、计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
109.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
110.以上所述，仅为本技术的具体实施方式，任何熟悉本技术领域的技术人员在本技术公开的技术范围内，可轻易想到变化或替换，都应涵盖在本技术的保护范围之内。本技术的保护范围应以所述权利要求的保护范围为准。

技术特征：

1.一种开发小程序的方法，其特征在于，所述方法应用于电子设备，所述方法包括：获取小程序的第一代码，所述第一代码为flutter代码；将所述第一代码编译成网页代码，生成第二代码，其中，第二代码用于在网页容器中加载运行时实现第一代码运行时所实现的小程序功能。2.根据权利要求1所述的方法，其特征在于，所述第二代码包含基于桥接和方法通道封装的通信框架。3.根据权利要求2所述的方法，其特征在于，所述第一代码包含所述通信框架；所述生成第二代码，包括：在所述第二代码中，继承所述第一代码中的所述通信框架。4.根据权利要求2所述的方法，其特征在于，所述生成第二代码，包括：基于桥接和方法通道进行封装，生成所述通信框架；将所述通信框架加入到所述第二代码中。5.根据权利要求1所述的方法，其特征在于，所述将所述第一代码编译成网页代码，包括：基于flutter创建网页端应用代码并选择超文本标记语言渲染模式。6.根据权利要求1所述的方法，其特征在于，所述将所述第一代码编译成网页代码，包括：使用命令行接口工具命令，生成动态模型文件。7.根据权利要求1所述的方法，其特征在于，所述第二代码包括边距配置信息，所述边距配置信息用于在所述第二代码加载到网页容器运行时，配置网页容器全屏显示时的边距。8.根据权利要求1所述的方法，其特征在于，所述网页容器为网页视图。9.根据权利要求1-8中任一项所述的方法，其特征在于，所述方法还包括：压缩所述第二代码文件，生成小程序压缩文件；上传所述小程序压缩文件到内容分发服务器。10.一种运行小程序的方法，其特征在于，所述方法应用于电子设备，所述方法包括：获取小程序的代码文件，其中，所述代码文件的代码为由flutter代码所编译成的网页代码；在网页容器中加载所述代码文件。11.根据权利要求10所述的方法，其特征在于，所述代码文件包含基于桥接和方法通道封装的通信框架。12.根据权利要求10所述的方法，其特征在于，所述代码文件包括边距配置信息；所述在网页容器中加载所述代码文件，包括：根据所述边距配置信息配置所述网页容器全屏显示时的边距。13.根据权利要求12所述的方法，其特征在于，所述根据所述边距配置信息配置所述网页容器全屏显示时的边距，包括：获取所述电子设备的终端操作系统的边距；根据所述电子设备的终端操作系统的边距配置所述网页容器全屏显示时的边距。14.根据权利要求10-13中任一项所述的方法，其特征在于，所述获取小程序的代码文
件之前，所述方法还包括：打开网页容器深度链接。15.一种电子设备，其特征在于，所述电子设备包括用于存储计算机程序指令的存储器和用于执行计算机程序指令的处理器，其中，当所述计算机程序指令被该处理器执行时，触发所述电子设备执行如权利要求1-9中任一项所述的方法步骤。16.一种电子设备，其特征在于，所述电子设备包括用于存储计算机程序指令的存储器和用于执行计算机程序指令的处理器，其中，当所述计算机程序指令被该处理器执行时，触发所述电子设备执行如权利要求10-14中任一项所述的方法步骤。17.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，当其在计算机上运行时，使得计算机执行如权利要求1-14中任一项所述的方法。

技术总结

本申请实施例提供一种开发小程序的方法和电子设备。所述方法应用于电子设备，所述方法包括：获取小程序的第一代码，所述第一代码为Flutter代码；将所述第一代码编译成网页（web）代码，生成第二代码，其中，第二代码用于在网页（web）容器中加载运行时实现第一代码运行时所实现的小程序功能。根据本申请实施例的方法，开发人员可以使用现有的技术栈，构建出适配于不同操作系统平台的web小程序，简化了小程序开发流程，降低了小程序开发难度。降低了小程序开发难度。降低了小程序开发难度。