uniapp 微信小程序使用antv f2图标库

进入 antv
github

找到 wx-f2 这个仓库

点击进入，然后进入 src 目录，将里面的组件文件复制到自己的项目中。
也就是：

在 uniapp 项目中的 wxcomponents 文件夹中新建一个自定义组件(命名看个人喜好),如图：
随表找个项目使用 npm/yarn 安装一下 @antv/f2 这个包
- npm i @antv/f2
- 安装成功之后，提取 node_modules/@antv/f2/dist/f2.min.js（具体拿哪一个，看自己需求）
- 放到 wxcomponents下

如图：

这里我重命名了一下，方便导入

然后具体代码就是：（以我命名的文件举例）

局部引入 f2_canvas 或者全局引入

要使用 f2 的页面.vue

效果

注意：

在 antv 的 github 上有几个版本的小程序 f2 自定义组件，建议选最新的。

2021-02-05 更新

由于使用wx-f2这个组件，出现层级太过高的情况，参考了官方小程序的demo之后，可以满足我的开发需求，所以转向了 f2-canvas （也是antv官方提供）

更具体代码

antv f2-canvas
本人demo

uniapp 微信小程序使用antv f2图标库相关推荐

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
【微信小程序】引入Base64 图标库
场景描述小程序icon图标需要使用base64编码后的icon,不使用png.jpg等格式的图片解决方法 1.进入阿里图标库 https://www.iconfont.cn/ 2. 创建一个项目 ...
在微信小程序中使用阿里图标库Iconfont
点击 '下载至本地',并解压文件夹把这几个文件放在小程序项目中, 在app.wxss(图片上用的是taro和taro-UI框架的格式)中引入iconfont.css,然后其他地方就可以使用了
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uniapp微信小程序引入第三方字体库
前言最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑这是uniapp官网的引入字体图标方法字体引入从c ...
uni-app微信小程序上传图片封装
概述 uni-app 微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示上传图标 c ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...

uniapp 微信小程序使用antv f2图标库

2021-02-05 更新

uniapp 微信小程序使用antv f2图标库相关推荐

最新文章

热门文章