当前位置: 首页 > 工具软件 > WeUI Plus > 使用案例 >

微信小程序-weui-antv使用

袁亦
2023-12-01

使用小程序发现组件使用引入总是报错 就删除包重新安装
构建npm包

1.npm init -y
2.npm install --save weui-miniprogram

到工具-构建npm

3.app.wxss中引入

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

使用除了基础组件以外的组件时候单独引用

 "usingComponents": {
    "mp-tabs": "@miniprogram-component-plus/tabs",
  }

徽标使用

<mp-badge style="margin-left: 5px;margin-right: 5px;" ext-class="red" content="{{followed}}"/>//followed内容

单独引入:

  "usingComponents": {
    "mp-badge": "weui-miniprogram/badge/badge"
  }

vantv使用

1.npm install @antv/wx-f2 --save
2. "usingComponents": {
    "f2": "@antv/wx-f2"
  }

3.使用

4.实例化// 实例化图标

  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' },
      ];
      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;
    }
 类似资料: