uni-app开发钉钉小程序 引入my-f2

在使用 uni-app 开发钉钉小程序时，想使用 antv f2 图表库，其中遇到的问题和解决方式。

官方提供的使用方式

F2 的支付宝小程序版本：
https://github.com/antvis/my-f2
项目中安装F2

npm install @antv/my-f2 --save

使用json文件，引入组件

{
  "usingComponents": {
    "f2": "@antv/my-f2"
  }
}

运行结果 页面报错：

json文件引入组件 报错

不是单单引入@antv/my-f2 会报错。

而是在uni-app中通过 usingComponents 引入mycomponents下的组件都会报错。
如，自定义一个测试组件：

测试自定义组件

{
  "usingComponents": {
    "my-test": "/mycomponents/my-test/my-test"
  }
}

这个你们可以测试下，一样会报错。
反正在钉钉环境下，我使用 json文件的方式 来引入自定义组件，就没有成功过。

如果页面中直接 import 导入组件行不行呢？

...

这个错得更离谱，直接整个项目崩了。

import导入组件 报错

最终解决方式

首先

把支付宝小程序my-f2 中相关的代码提取出来，整合成uni-app中的自定义组件。
代码地址：https://github.com/yiPian/f2-canvas-to-dd

然后

放置在uni-app项目里面的 mycomponents 文件夹中。
如图：

组件存放目录

最后使用组件

运行效果

运行效果