Rax 与小程序代码混用

Rax 支持在项目中使用小程序原生组件，同时使用 Rax 开发的组件同样支持在原生小程序项目中使用。

在 Rax 项目中使用小程序原生组件

Rax 转小程序链路使用小程序原生组件目前支持以下两种方式：

• 通过 npm 安装

• 将源码拷贝至本地使用

通过 npm 安装

你可以通过 npm 安装的方式在 Rax 项目中使用小程序原生组件，前提是 package.json 中需要配置 miniappConfig 字段，其值指向小程序原生组件的入口路程。例如，你的小程序原生组件目录结构如下所示：

├── README.md
├── lib
   └── miniapp
       ├── index.acss
       ├── index.axml
       ├── index.js
       ├── index.json
├── package.json

则 miniappConfig 字段的值为 lib/miniapp/index。

将源码拷贝至本地使用

将要使用的小程序原生组件代码直接拷贝至 src 下的某个目录内即可。需要注意的是该目录必须在 build.json 中的 constantDir 字段的数组中，否则将无法使用，示例如下：

{
  "plugins": [
    [
      "rax-plugin-app",
      {
        "targets": [
          "miniapp"
        ],
        "miniapp": {
          "constantDir": [
            "src/miniapp"
          ]
        }
      }
    ]
  ]
}

注意

在原生小程序项目中使用 Rax 开发的多端组件，且多端组件的项目构建中 disableCopyName 为 true 时，需要将 jsx2mp-runtime 放到项目的 package.json 中。

限制

• 第三方 npm 包没有按照约定在 package.json 中配置 miniappConfig 字段时，暂时无法使用

• 将原生小程序源码拷贝至本地使用时，源码中暂时无法使用 npm 依赖

以上问题将在未来解决，敬请期待。

在原生小程序项目中使用 Rax 组件

在原生小程序项目中使用 Rax 组件时，支持以下两种方式：

• 将 Rax 组件发布至 npm

• 将 Rax 组件编译后产出的 lib/miniapp 文件夹拷贝至本地使用

注意

当 Rax 组件中使用了 rax-view 时，需要在原生小程序项目中的 app.acss 中添加以下内容：

.__rax-view {
  border: 0 solid black;
  display:flex;
  flex-direction:column;
  align-content:flex-start;
  flex-shrink:0;
  box-sizing:border-box;
}