WeChat 构建npm添加第三方库

1、构建npm

在项目的根目录文件上点击右键，选择在终端中打开。命令窗口输入：

npm init

默认配置下一步，完成后项目中生成package.json文件

 

2、安装Vant微信小程序版本

2.1、安装，命令窗口输入：

npm i @vant/weapp -S --production
或
npm i @vant/weapp -S --omit=dev

完成后项目中生成package-lock.json文件

2.2、修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

2.3、修改 project.config.json文件

{
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],
}

2.4、构建，打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，

2.5、使用，构建完成后，即可引入组件。

// 通过 npm 安装
// index.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

// 引入组件后，在 wxml 中直接使用组件
// index.wxml
<van-button type="primary">按钮</van-button>

 

3、安装echarts微信小程序版本

3.1、下载安装

下载echarts的微信小程序版本：echarts-for-weixin ，地址：https://github.com/ecomfe/echarts-for-weixin.git
下载解压后将其中的ec-canvas文件夹复制到小程序根目录
ec-canvas 目录下有一个 echarts.js，默认文件大小较大，可以使用从官网自定义构建的方式减小文件大小，选择的 ECharts 版本一定要和 echarts-for-weixin 版本相匹配，如：5.1.1。

3.2、引入

在需要引用echarts的页面json文件中，添加echarts引用（注意echarts的相对路径）：

{
  "usingComponents": {
    "ec-canvas":"../../ec-canvas/ec-canvas"
  }
}

在需要引用echarts的js文件中，引入echars.js：

import * as echarts from '../../ec-canvas/echarts'

3.3、使用

js文件中定义数据

import * as echarts from '../../ec-canvas/echarts'
Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onLoad() {
  },
})
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 42,
        name: '广州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };
  chart.setOption(option);
  return chart;
}

在文件index.wxlm创建组件

<view class="my-chart">
  <ec-canvas id="myechart-dom" canvas-id="myechart" ec="{{ ec }}"></ec-canvas>
</view>

wxss文件中

.my-chart{
  width: 700rpx;
  height: 500rpx;
}
ec-canvas{
  width: 100%;
  height: 100%;
}