MorJS globalComponentsConfig
是否必填 | 参数类型 | 默认值 | 参数含义 |
---|---|---|---|
否 | object | 点击查看 | 用于配置 小程序组件=>web 组件 的映射表 |
背景补充说明:将小程序的代码转换成 Web
端的一个前提是,我们需要在 Web
端 1:1 实现小程序支持的组件。在编译过程中维护了一张映射表,在编译的过程中将小程序的组件进行替换,比如 view
组件,我们将其替换成了 tiga-view
,那么 tiga-view
从哪里来呢?实际上,我们在 1:1 实现小程序的时候使用了 Web Components
(选用 Google
开源的 lit),所以我们只需要在项目运行时,在顶部将 tiga-view
这个自定义组件注册就可以正常使用了。
如果我们遇到了以下场景我们可能会考虑使用 globalComponentsConfig
配置:
- 在
Web
端 需要通过条件编译渲染一些小程序不支持的组件,这个组件直接使用web-components
实现; MorJS
提供的组件实现和支付宝小程序是一致的,无法定制,需要使用web-components
实现一些定制组件。
需要注意的是,如果要配置此项,你需要将自定义的 web-components 提前注册,一般要么自定义 entry,要么在 htmlOptions 配置中自定义 templateContent,然后在顶部引入。以上两个配置接下来我们都会介绍
配置示例 [[EMOJI:%F0%9F%8C%B0]]:
...
web: {
globalComponentsConfig: {
'view': 'custom-view', // 将 view 映射到自定义的 custom-view 组件
}
}
...