移动APP中基于ReactNative实现小程序开发并加载的方法

技术领域

本发明涉及移动App领域，尤其涉及基于ReactNative的小程序开发领域，具体是指一种移动APP中基于ReactNative实现小程序开发并加载的方法。

背景技术

在当今移动互联网时代，应用商店中App的数量越来越多，但用户在移动设备中常用的App数量却是有限的，所以单个App中的功能也是也是越来越功能如何管理就成为了需要解决的问题。同样，企业内部大量的web应用也需要在移动端实现，如何开发、管理、发布也是需要新的架构来解决。

所以很多企业业务应用以小程序的架构进行管理，使用ReactNative或Vue或Html5方式开发功能代码，以资源包的形式发布、更新，既能保证优于H5的页面效果，也能解决跨平台开发问题，仅需要一份代码即可在Android和iOS双平台下运行，同样能够使开发者快速开发，快速迭代，实现快速上线。

目前市面上小程序模型大多基于html5技术，通过编写html5+js+css3代码，进行页面及逻辑的开发，并通过原生webview渲染加载页面，通过对原生webview的扩展实现统一UI风格，通过webview的桥接实现在js代码对原生能力的调用。将开发的代码打包成为html离线包的形式进行管理，由平台进行管理、审核和分发，做到云端快速更新版本。

小程序的渲染一般采用JavaScript+Webview模式，也有厂商提供JavaScript+Native的方式，在对性能要求较高的场景，采用Native原生渲染控件，给用户更好的体验。

小程序的描述文件一般采用json格式，主要描述小程序基础数据、小程序依赖库版本及使用到的组件等信息等，还有一些网络及安全配置，这部分属于小程序的元数据，与小程序的应用Id一一对应。

同时，业界的小程序方案实现方式也有直接基于vue代码的，即使用vue技术编写应用，开发完成后打包成为zip资源包作为小程序介质，有平台管理和发布。

目前小程序既有腾讯、阿里等厂商推出的微信、支付宝小程序等，也有普元等厂商提供了内网私有化部署小程序的方案。

现在技术下，以微信、支付宝等小程序为例，其开发语言并非标准的JS+CSS+Html5语言，而是有着自己的封装，例如无法使用常用的html标签及dom方法，其css也是与标准的css语法有些差别，需要学习使用其封装的组件和api。这就导致了大量额外的学习成本。使用本发明就可以使用纯ReactNative语法进行小程序的开发，做到快速开发、快速迭代。

目前的小程序，例如微信小程序和支付宝小程序都是部署在厂商服务器，版本发布也需要经过厂商的审核，这样对企业内部的应用就有很多限制，同时部署在厂商服务器对企业来说也是不安全的。

发明内容

本发明的目的是克服了上述现有技术的缺点，提供了一种满足结构简单、开发语言统一、适用范围较为广泛的移动APP中基于ReactNative实现小程序开发并加载的方法。

为了实现上述目的，本发明的移动APP中基于ReactNative实现小程序开发并加载的方法如下：

该移动APP中基于ReactNative实现小程序开发并加载的方法，其主要特点是，所述的方法包括以下步骤：

(1)按照附图目录结构创建小程序及内部文件，包含入口文件、项目描述文件、项目代码、项目依赖描述文件和项目打包配置文件；

(2)调试基座支持包及引用；

(3)开发小程序；

(4)打包运行小程编译；

(5)运行小程序。

较佳地，所述的步骤(2)具体包括以下步骤：

(2.1)调试基座和支持包，调用安装相关依赖及引用支持包；

(2.2)调试服务启动，读取项目描述文件，设置项目路由为小程序入口文件；

(2.3)通过支持包提供的UI框架开发页面内容。

较佳地，所述的步骤(2.2)具体包括以下步骤：

(2.2.1)判断是否为在开发模式下，如果是，则继续步骤(2.2.2)；否则，继续(2.2.3)；

(2.2.2)在开发模式下，显示支持包提供的调试首页，显示当前调试的小程序及最新调试的小程序列表，提供配置调试IP和端口，配置完成后基座连接调用服务；

(2.2.3)非开发模式下，支持包根据打包配置入口小程序参数加载对应的介质文件，加载完成后支持包根据小程序appId和入口模块名称通过路由导航跳转到对应页面。

较佳地，所述的步骤(3)具体包括以下步骤：

(3.1)在调试基座中开发小程序，支持包在调试基座配置地址后连接调试服务，提供项目所有文件的编译产资源包物；

(3.2)在项目目录内文件发生改变时实时编译，并同步到调试基座中。

较佳地，所述的步骤(3.1)具体包括以下步骤：

(3.1.1)对单个文件进行编译；

(3.1.2)进行调试服务，提供文件改动实时更新及页面刷新、断点调试、网络数据查看的功能。

较佳地，所述的步骤(4)具体包括以下步骤：

进行编译打包，扫描项目下的所有文件，将项目目录下的文件编译成对应模块，将js文件的模块代码汇总生成index.jsbundle文件，并产生整个项目的编译产物zip包，将模块拷贝至编译产物，将页面依赖的组件通过调试基座的主bundle实现。

较佳地，所述的步骤(4)中编译出的模块包括页面实现代码、页面唯一标识和页面依赖的模块，非js文件编译的模块的内容包含资源文件路径、资源名称、资源后缀名的信息。

较佳地，所述的步骤(5)具体为：

根据小程序appId在本地寻找zip资源包，加载资源包中的index.jsbundle文件，读取小程序入口页面homepage参数，通过ReactNative根路由加载页面，实现小程序主界面的加载。

较佳地，所述的步骤(1)中的内部文件包含入口文件、项目描述文件、项目代码、项目依赖描述文件和项目打包配置。

采用了本发明的移动APP中基于ReactNative实现小程序开发并加载的方法，提供了基于ReactNative的小程序的开发方法，从而实现了使用ReactNative语法开发小程序，同时还能够不依赖三方厂商，进行私有化部署及小程序的发布与管理。本发明还提供了基于ReactNative的小程序打包方法，从而实现了将ReactNative项目打包成独立的小程序项目，还实现了原生App加载ReactNative小程序的问题。

附图说明

图1为本发明的移动APP中基于ReactNative实现小程序开发并加载的方法的流程图。

图2为本发明的移动APP中基于ReactNative实现小程序开发并加载的方法的小程序目录结构示意图。

图3为本发明的移动APP中基于ReactNative实现小程序开发并加载的方法的小程序支持包示意图。

图4为本发明的移动APP中基于ReactNative实现小程序开发并加载的方法的小程序架构示意图。

具体实施方式

为了能够更清楚地描述本发明的技术内容，下面结合具体实施例来进行进一步的描述。

本发明的该移动APP中基于ReactNative实现小程序开发并加载的方法，其中包括以下步骤：

(1)按照附图目录结构创建小程序及内部文件，包含入口文件、项目描述文件、项目代码、项目依赖描述文件和项目打包配置文件；

(2)调试基座支持包及引用；

(2.1)调试基座和支持包，调用安装相关依赖及引用支持包；

(2.2)调试服务启动，读取项目描述文件，设置项目路由为小程序入口文件；

(2.2.1)判断是否为在开发模式下，如果是，则继续步骤(2.2.2)；否则，继续(2.2.3)；

(2.2.2)在开发模式下，显示支持包提供的调试首页，显示当前调试的小程序及最新调试的小程序列表，提供配置调试IP和端口，配置完成后基座连接调用服务；

(2.2.3)非开发模式下，支持包根据打包配置入口小程序参数加载对应的介质文件，加载完成后支持包根据小程序appId和入口模块名称通过路由导航跳转到对应页面；

(2.3)通过支持包提供的UI框架开发页面内容；

(3)开发小程序；

(3.1)在调试基座中开发小程序，支持包在调试基座配置地址后连接调试服务，提供项目所有文件的编译产资源包物；

(3.1.1)对单个文件进行编译；

(3.1.2)进行调试服务，提供文件改动实时更新及页面刷新、断点调试、网络数据查看的功能；

(3.2)在项目目录内文件发生改变时实时编译，并同步到调试基座中；

(4)打包运行小程编译；

进行编译打包，扫描项目下的所有文件，将项目目录下的文件编译成对应模块，将js文件的模块代码汇总生成index.jsbundle文件，并产生整个项目的编译产物zip包，将模块拷贝至编译产物，将页面依赖的组件通过调试基座的主bundle实现；

(5)运行小程序；

根据小程序appId在本地寻找zip资源包，加载资源包中的index.jsbundle文件，读取小程序入口页面homepage参数，通过ReactNative根路由加载页面，实现小程序主界面的加载。

作为本发明的优选实施方式，所述的步骤(4)中编译出的模块包括页面实现代码、页面唯一标识和页面依赖的模块，非js文件编译的模块的内容包含资源文件路径、资源名称、资源后缀名的信息。

作为本发明的优选实施方式，所述的步骤(1)中的内部文件包含入口文件、项目描述文件、项目代码、项目依赖描述文件和项目打包配置。

本发明的具体实施方式中，在当今移动互联网时代，移动App的开发需求越来越多，而用户接受的App数量却是有限的，所以本发明提供了一种基于ReactNative的小程序的实现方法，做到在一个原生App中加载多个小程序应用。

本发明通过对ReactNative应用的扩展，实现使用ReactNative语言开发小程序应用，通过本发明提供的支持包，实现开发模式下与调试服务连接，代码修改实时刷新页面，生产模式下实现将ReactNative小程序编译成资源包，实现原生App对小程序资源包的加载。

随着移动互联网的快速发展，小程序不但为开发者打开了流量的新大门，也收到了企业的青睐，小程序架构已经逐渐成为企业内部的主要发展方向。

本发明以某公司信息化建设过程中小程序架构的搭建过程作为具体实施例，基于ReactNative的小程序的实现方法如下：

在传统大型企业中，往往累积了大量的业务流程，而与此对应的是大量业务系统，在如今移动办公的趋势下，企业内业务移动化也成了信息化建设中重要的一步。为了统一管理这些业务功能，采用ReactNative小程序的形式来实现。

本技术方案提供基于ReactNative的小程序的实现方法，将详细描述小程序项目结构、调试基座及支持包、小程序开发、小程序编译打包、小程序运行等过程。

1、创建小程序：

1.1、首先按照附图目录结构创建小程序，其中包含入口文件、项目描述文件、项目代码、项目依赖描述文件、项目打包配置五个部分。

1.2、入口文件位于根目录，为js格式的文件，内容为依赖章节3中的开发包，提供ReactNative调试的入口，开发与编译均以此入口为项目入口文件。

1.3、项目描述文件位于项目根目录/config下，为json格式的文件，其中声明了appId(小程序应用id)、appTyle(应用类型，默认为reactnative)、appName(小程序名称)、homepage(小程序入口页面)、icon(小程序图标)、version(小程序版本号)、buildId(小程序编译号)等参数。

1.4、项目代码在项目根路径下src文件夹内，包括首页路由声明、页面代码、组件代码等，该文件夹下文件均会被编译脚本编译。

1.5、项目依赖描述文件为根目录下package.json文件，其中声明了该小程序依赖的所有包和组件及其版本。

1.6、项目打包配置为根目录/config/build_config/下，根据打包环境的不同，存在dev、sit、uat、pro四类打包环境及配置，其中主要配置描述以json文件形式存在，应用icon、启动图等以文件的形式存在，打包脚本会根据不同环境使用不同的配置。

2、调试基座支持包及引用：

2.1、调试基座和支持包提供小程序开发、调试、编译阶段的支持，小程序创建完成后调用npm install安装相关依赖及引用支持包。

2.2、调试服务启动时，支持包将读取1.3项目描述文件，设置项目路由为该小程序入口文件。

2.3、开发模式下，进入调试基座时将显示支持包提供的调试首页，调试首页会显示当前调试的小程序及最新调试的小程序列表，并提供配置调试IP和端口的功能，配置完成后基座座会连接调服服务。

2.4、非开发模式下，进入App后，支持包将根据打包配置入口小程序appId和homepage参数加载对应小程序的介质文件index.jsbundle，加载完成后支持包将根据小程序appId和入口模块名称通过路由导航跳转到对应页面。

2.5、项目依赖描述文件为根目录下package.json文件，其中声明了该小程序依赖的所有包和组件及其版本。

2.6、支持包提供了通用的UI框架，只需开发页面内容即可，页面通用头部导航样式由支持包统一提供，提供相同的样式及可以自定义扩展的功能。

3、小程序开发：

3.1、小程序的开发在调试基座中进行，章节2中所述支持包在调试基座配置完地址后连接调试服务，提供项目所有文件的编译产资源包物，并在项目目录内文件发生改变(修改、新增、删除)时实时编译，并同步到调试基座中。

3.2、小程序的开发提供了与ReactNative开发同样的体验，并兼容所ReactNative有语法。

3.3、(3.1)中所述调试服务包括两部分，一部分为对单个文件的编译，包括js及png、mp3等资源文件，js文件将编译成一个index.bundle文件。另一部分为ReactNative的调试服务，提供文件改动实时更新及页面刷新、断点调试、网络数据查看等功能。

3.4、开发过程中需要用到三方组件时，需要调试基座集成该组件，在小程序项目package.json中增加该依赖并重新npm install。

3.5、依托(3.3)所述调试服务，调试基座能够加载并展示当前调试小程序，并在文件改动时对页面进行实时刷新。

4、小程编译打包运行：

4.1、小程序在开发完成后将进行编译打包，编译时将扫描项目下所有文件，其中每个js文件都将经过编译生成具有唯一标识的模块，全部js文件的模块代码将汇总生成index.jsbundle文件，整个项目编译产物为zip包。

4.2、(4.1)中所述唯一标识生成规则为appId加文件相对路径，例如appId为com.mobile.portalapp，文件相对路径/src/MainPage.js，生成的唯一标识就是/com.mobile.portalapp/src/MainPage.js。

4.3、(4.1)中所述模块为该js文件经过编译后的产物，片段如下：

4.4、页面编译出的模块中包括页面实现代码、页面唯一标识、页面依赖的其他模块。

4.5、项目目录下非js文件也会被编译为模块，不过其中的内容为该资源的信息，例如资源文件路径、资源名称、资源后缀名等，片段如下：

4.6、资源文件在编译成模块之后，会被拷贝到编译产物中，其中目录结构与该文件在项目中的路径一致。

4.6、仅项目目录下的文件会被编译成对应模块，页面所依赖的组件将不会被编译，这部分会由调试基座的主bundle实现。所有ReactNative及三方组件包的编译产物只存在主bundle中，并于App启动时，加载小程序前加载完毕。

4.7、小程序项目可以被编译成原生Android与iOS应用，首先将小程序编译为zip包产物，再将zip包产物放入调试基座项目下assets目录，还需要将客户端配置的入口小程序appId及homepage等设置为该小程序，这样编译出的App即由调试基座变成了小程序App。

5、小程序运行：

5.1、开发过程中，进入小程序前将进入调试基座首页，该页面由章节3中支持包提供，支持包与正在调试的小程序共同组成一个原生ReactNative项目，在调试基座中加载运行。

5.2、非开发期，小程序可以被编译成原生Android与iOS应用，也可以作为标准小程序在主应用中下载、更新、加载、卸载等。

5.3、小程序可以被编译成原生Android与iOS应用，应用启动时，原生读取配置的入口小程序appId及appType等参数，在ReactNative初始化完成后，加载该小程序的文件，一般为index.jsbundle，加载完成后读取该小程序入口页面homepage参数，由ReactNative根路由加载该页面，实现小程序首页的加载，之后的页面跳转就由小程序内部跳转逻辑控制。

5.4、在App中，小程序以zip资源包的形式存在，可以提前打包到App中，或在App启动后再进行下载。

5.5、在App中打开小程序时，先根据小程序appId在本地寻找zip资源包，之后再加载资源包中的index.jsbundle文件，加载成功后读取该小程序入口页面homepage参数，再由ReactNative根路由加载该页面，实现小程序的打开与运行。

采用了本发明的移动APP中基于ReactNative实现小程序开发并加载的方法，提供了基于ReactNative的小程序的开发方法，从而实现了使用ReactNative语法开发小程序，同时还能够不依赖三方厂商，进行私有化部署及小程序的发布与管理。本发明还提供了基于ReactNative的小程序打包方法，从而实现了将ReactNative项目打包成独立的小程序项目，还实现了原生App加载ReactNative小程序的问题。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。