多端组件开发

由于小程序开发模式的特殊性，下文将主要介绍小程序组件的开发。

初始化工程

npm init rax my-component

选择 - Component (Build component for application include web)，然后选择需要构建到的目标端代码。

项目目录

.
├── README.md
├── build.json
├── demo
│   ├── index.js
│   └── miniapp
│       ├── app.js
│       ├── app.json
│       └── pages
│           ├── index.acss
│           ├── index.axml
│           ├── index.js
│           └── index.json
├── package.json
└── src
    └── index.jsx

开发

因为 Rax 语法转换到小程序语法是通过 AST 编译实现的，所以目前存在两种小程序组件的开发模式：

• 使用小程序原生语法

• 使用 Rax 语法

我们将在下文分别介绍两种开发模式。

使用 Rax 语法

这种开发模式比较简单，你可以直接在 src 目录下使用其他 Rax 多端组件来完成你的多端组件，开发完后执行：

npm run build

在 lib/miniapp 目录下你就可以看到转换后的组件代码，最后通过 npm 发布，即可在你的 Rax 多端工程项目中使用。

使用小程序原生语法

由于需要避免转译器转译小程序原生组件，我们需要在 build.json 的 targets 字段中删掉 miniapp，然后在 src 目录下新建 miniapp 文件夹。现在，你就可以在该目录下完成小程序原生组件的编码了。编码完成后执行：

npm run build

在 lib/miniapp 目录下你就可以看到你的原生小程序组件代码。最后通过 npm 发布，即可在你的 Rax 多端工程项目中使用。实际上，这里构建器只是做了复制的工作，把 src 目录下的 miniapp 原封不动的复制到了 lib 目录下。

开发预览

你可以在小程序开发者工具中打开 demo/miniapp 文件夹，然后修改 pages/index.json 中自定义组件的路径实现开发实时预览的效果。

组件开发总结

整个过程我们需要关注的是，在组件工程的 package.json 中存在 miniappConfig 字段，其中 main 属性表示构建后小程序代码的入口路径。在 Rax 多端工程构建的时候，会去读取整个字段的值，然后把该目录下的组件视作原生小程序组件。

多态协议

定义一套多态组件的配置协议，达到同一套代码在不同端的映射。使用 package.json 中的 miniappConfig 字段定义小程序组件配置。目前除 main 外其他字段尚未开始使用。以下是详细配置说明：

多态组件协议

{
  "name": "rax-sample"，
  "miniappConfig": {
    // 对应阿里小程序组件入口
    "main": "lib/miniapp/index",
    // 子组件配置
    "subComponents": {
      // 子组件名称
      "Header": {
         // 子组件入口
        "main": "lib/miniapp/header/index"
      },
      "Cell": {
        "main": "lib/miniapp/cell/index"
      }
    },
    // 组件属性映射
    "propsMap":{
      "source": "src",
      "onClick": "onTap"
    },
    // 组件标签映射
    "tagNameMap": "view"
  },
}

多态组件库协议

{
  "name": "rax-components-library"，
  "miniappConfig": {
   	"subPackages":  {
	   "Button": {
	     "main": "lib/miniapp/Button/index",
		},
	},
	// 需要拷贝的文件或目录
	"public": ["utils.js", "static"]
  }
}

组件库使用方式举例：

import { Button } from 'fusion-mobile'
// ...
export default (props) => {
	return (
		<View>
	  		<Button>hello world</Button>
	  	</View>
	)
}