微信小程序npm安装第三方包（引用第三方插件antv f2.js）

因为我要使用微信小程序引用图标插件，就以AntV F2插件为例；

AntV F2官网：https://antv.alipay.com/zh-cn...

须要准备：

微信开发工具（必须支持npm功能）;
node.js安装；
npm基础知识；

如下操做是node.js已经安装过了。

一、先建好小程序模版。

好比下图：

而后使用dos命令打开这个当前的文件夹。好比下图：
注意：dos命令打开的是小程序文件夹所放的路径。

二、初始化指令

若是是该文件夹第一次使用： 请先使用指令npm init(初始化指令);

以下图：

若是出现这种状况就对了，进行对这个文件夹进行编辑，也能够所有点击回车键，一路回车；

三、再次安装npm install --production

建议使用--production选项，能够减小安装一些业务无关的 npm 包，从而减小整个小程序包的大小
以下图：

四、安装微信小程序 F2 图表组件*

npm i @antv/f2-canvas
以下图：

恭喜你，操做完以上这几步已经安装好依赖包。

五、安装好依赖包以后，打开微信开发工具

点击开发者工具顶部详情，勾选 使用npm模块，再点击菜单栏中工具下的构建npm便可运行

• 操做图第一步：点击详情，勾选npm模块

• 操做图第二步：工具菜单栏打开，点击构建npm

• 点击构建npm后，会出现：

• 完成后会出现：一个文件夹为miniprogram_npm

恭喜本身吧，npm安装第三方包已经完成；

---

如下就是在小程序中代码的撰写：

1.index.json;

2.index.wxml;

3.index.wxss;

#myCanvas {
  width: 100%;
  height: 300px;
}

4.index.js;

let chart = null;
function initChart(canvas, width, height, 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
    }
  },
  onLoad(){
  },
  onReady() {
  }
})

看右侧是否是已经出来柱形图了，若是须要作其余图表，去官网让选择就好了，官网的例子比较多，选择作本身须要的就好了。