小程序引入vant及图表或者日历

1.npm init -y
2.npm i @vant/weapp -S --production
3.
4.去除版本号，在app.json中配置：

 "usingComponents": {
      "van-button": "./miniprogram_npm/vant-weapp/button/index",
      "van-icon": "./miniprogram_npm/vant-weapp/icon/index"
    }

金服可视化@antv/f2-canvas 地址：https://github.com/simaQ/f2-canvas
1，npm i @antv/f2-canvas --save
2.,全局app.json或者局部index.json引入"ff-canvas":’’@antv/f2-canvas",

3.index.wxml 视图，准备盒子，使用 ff-canvas 组件，其中 opts 是一个我们在 index.js 中定义的对象，必设属性，它使得图表能够在页面加载后被初始化并设置，详见 index.js 中的使用。

<view class="container">
  <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>

4.index.js 逻辑处理，这里还需要引入 F2 用于绘制图表，结构如下，注意路径正确。
// index.js
import F2 from ‘@antv/wx-f2’; // 注：也可以不引入， initChart 方法已经将 F2 传入，如果需要引入，注意需要安装 @antv/wx-f2 依赖

let chart = null;

function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
const data = [
{ year: ‘1951 年’, sales: 38 },
{ year: ‘1952 年’, sales: 52 },
{ year: ‘1956 年’, sales: 61 },
{ year: ‘1957 年’, sales: 145 },
{ year: ‘1958 年’, sales: 48 },
{ year: ‘1959 年’, sales: 38 },
{ year: ‘1960 年’, sales: 38 },
{ year: ‘1962 年’, sales: 38 },
];
chart = new F2.Chart({
el: canvas,
width,
height
});

chart.source(data, {
sales: {
tickCount: 5
}
});
chart.tooltip({
showItemMarker: false,
onShow(ev) {
const { items } = ev;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ’ + items[0].value;
}
});
chart.interval().position(‘year*sales’);
chart.render();
return chart;
}

Page({
data: {
opts: {
onInit: initChart
}
},

onReady() {
}
});
3,引入日历：https://github.com/treadpit/wx_calendar
解压缩：calendar文件夹，
app.json全局注册：

{
  "usingComponents": {
    "xxx": "/component/calendar/index"
  }
}，

再使用标签；

<xxx></xxx>