微信小程序-weui-antv使用

使用小程序发现组件使用引入总是报错 就删除包重新安装
构建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(‘datevalue’).color(‘city’).adjust(‘stack’);
chart.line().position('date
value’).color(‘city’).adjust(‘stack’);
chart.render();
// 注意:需要把chart return 出来
return chart;
}

猜你喜欢

转载自blog.csdn.net/men_gqi/article/details/111211731