MorJS 可以接入第三方的 UI 框架吗,接入的组件会一同转端吗?

2024-01-17 14:07 更新

可以,理论上(微信/支付宝)小程序原生的组件库是可以一并转换的,使用方式上,需按照对应平台的 npm 组件的规范来使用,无其他特别的要求。使用方法如下:

注意:我们内部并没有使用任何社区的组件库,各第三方 UI 框架表现不同,相关的兼容性需要具体进一步验证

  1. 安装需要接入的第三方 UI 框架,具体方式请参照各 UI 框架的文档
  2. 在配置文件 mor.config.ts 中添加对 node_modules 的处理,具体配置项 processNodeModules,相关文档请查阅 MorJS 基础用法 - 配置 processNodeModules
// mor.config.ts
export default defineConfig([
  ...
  {
    name: 'alipay', // 配置名称
    ...,
    processNodeModules: {
      // 只有 npm 名称包含 @abc/alsc- 的 npm 才会被处理
      include: [/@abc\/alsc\-/]
    }
  }
]
  1. 在项目中按 照组件库规范 来引用组件,或按照实际路径引用组件,比如:"@vant/weapp/popup/index" 或 "@vant/weapp/lib/popup/index"
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index", // 引用 @vant/weapp 的 button 组件
    "van-popup": "@vant/weapp/lib/popup/index" // 引用 @vant/weapp 的 popup 组件
  }
}
  1. 执行编译命令,用对应平台 IDE 打开对应产物即可


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号