小程序分包集成

在使用 React Native 的时候,我们常常会这样使用:一个主 App 集成了 React Native 引擎,然后每一个业务对应一个 React Native 模块。

比如,有A业务,B业务,他们分别是独立的 React Native 模块,最终会集成到主 App 里。

这样的场景对应到小程序上也存在,比如我们已经有了一个主小程序(可能是小程序原生开发,也可能是转化而来)。现在我们要把A业务,B业务小程序版本接入主小程序。

小程序转化引擎提供以分包的形式处理以上的场景。主小程序就是主包,A业务,B业务分包对应A分包,B分包。

下面具体说明:

假定有 React Native 业务RNA,在配置文件指定 subDir 为小程序分包目录 page/A。执行

alita -i RNA -o WXA

假定有 React Naive 业务RNB,在配置文件指定 subDir 为小程序分包目录 page/B。 执行

alita -i RNB -o WXB

查看 WXA/package.jsonWXB/package.json。取出公共dependencies,比如 @areslabs/wx-react@areslabs/wx-react-native

放到主包 package.jsondependencies。为了减少包体积,对于公共依赖主包安装就可以了。一般转化引擎运行的公共依赖有: @areslabs/wx-prop-types@areslabs/wx-react@areslabs/wx-react-native ,如果是redux项目,还有 @areslabs/wx-react-redux@areslabs/wx-redux

修改主包的app.json 文件, 添加分包 subPackages 配置

"subPackages": [
    {
      "root": "page/A/",    // 对应相关的subDir
      "pages": [
        "pages/view/view",   // 复制A小程序的app.json 配置
      ]
    },
    {
      "root": "page/B/",  // 对应相关的subDir
      "pages": [
        "pages/login/login", // 复制B小程序的app.json 配置
      ]
    }
  ],

这样之后, A,B小程序就作为主小程序的分包存在了。

总结一下:

  1. 在小程序主包里面安装运行库,包括 @areslabs/wx-react@areslabs/wx-react-native等。 注意:要打开主包的npm支持, 在开发者工具的 设置--》 项目配置 ---》 使用npm模块
  2. 执行转化脚本生成小程序文件,由于使用分包,需要在配置文件指定好subDir字段,这个字段即是小程序分包目录
  3. 在主包的app.json文件配置分包subPackages。

examples 目录下的 SubpackagesDemo 就是通过分包集成的方式,把 HelloWorldExpoTodo集成到一个小程序的, HelloWorldExpoTodo 目录下的 subpackages.config.js 即为分包配置,里面指明了 subDir 字段。

进入 HelloWorldExpo 目录执行

alita -i ./ -o ../SubpackagesDemo/pages/HelloWorld --config subpackages.config.js

进入Todo目录执行

alita -i ./ -o ../SubpackagesDemo/pages/Todo --config subpackages.config.js

然后按照上文集成依赖就可以了。

results matching ""

    No results matching ""