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 导入组件行不行呢？

...
<script>
import AntvF2 from '@antv/my-f2'
export default {
  components: {
      AntvF2
  }
}
</script>

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

import导入组件 报错

最终解决方式

首先

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

然后

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

组件存放目录

最后使用组件

<template>
    <view>
        <f2-canvas :on-init="onInitChart" :width="300" :height="300"></f2-canvas>
    </view>
</template>

<script>
    import F2Canvas from '@/mycomponents/f2-canvas/f2-canvas'

    export default {
        components: { F2Canvas },
        methods: {  
            onInitChart(F2, config) {
                const chart = new F2.Chart(config);
                const data = [
                { value: 63.4, city: 'New York', date: '2011-10-01' },
                { value: 62.7, city: 'Alaska', date: '2011-10-01' },
                { value: 72.2, city: 'Austin', date: '2011-10-01' },
                { value: 58, city: 'New York', date: '2011-10-02' },
                { value: 59.9, city: 'Alaska', date: '2011-10-02' },
                { value: 67.7, city: 'Austin', date: '2011-10-02' },
                { value: 53.3, city: 'New York', date: '2011-10-03' },
                { value: 59.1, city: 'Alaska', date: '2011-10-03' },
                { value: 69.4, city: 'Austin', date: '2011-10-03' },
                ];
                chart.source(data, {
                date: {
                    range: [0, 1],
                    type: 'timeCat',
                    mask: 'MM-DD'
                },
                value: {
                    max: 300,
                    tickCount: 4
                }
                });
                chart.area().position('date*value').color('city').adjust('stack');
                chart.line().position('date*value').color('city').adjust('stack');
                chart.render();
                // 注意：需要把chart return 出来
                return chart;
            }
        }
    }
</script>

运行效果

运行效果