微信小程序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() {
  }
})

看右側是否是已經出來柱形圖了，若是須要作其餘圖表，去官網讓選擇就好了，官網的例子比較多，選擇作本身須要的就好了。