由于我要使用微信小程序引用图标插件，就以AntV F2插件为例；AntV F2官网：
https://antv.alipay.com/zh-cn...需要准备：微信开发工具（必须支持npm功能）;
node.js安装；
npm基础知识；
以下操作是node.js已经安装过了 ...

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

由于我要使用微信小程序引用图标插件，就以AntV F2插件为例；

AntV F2官网：https://antv.alipay.com/zh-cn…

需要准备：

微信开发工具（必须支持npm功能）;
node.js安装；
npm基础知识；
以下操作是node.js已经安装过了。

1、先建好小程序模版。

比如下图：

然后使用dos命令打开这个当前的文件夹。比如下图：

注意：dos命令打开的是小程序文件夹所放的路径。

2、初始化指令

如果是该文件夹第一次使用： 请先使用指令npm init(初始化指令);

如下图：

如果出现这种情况就对了，进行对这个文件夹进行编辑，也可以全部点击回车键，一路回车；

3、再次安装npm install --production

建议使用--production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小

如下图：

4、安装微信小程序 F2 图表组件*

npm i @antv/f2-canvas

如下图：

恭喜你，操作完以上这几步已经安装好依赖包。

5、安装好依赖包之后，打开微信开发工具

点击开发者工具顶部详情，勾选 使用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() {}
})

看右侧是不是已经出来柱形图了，如果需要做其他图表，去官网让选择就行了，官网的例子比较多，选择做自己需要的就行了。

微信小程序npm安装第三方包相关推荐

微信小程序使用 npm 安装第三方包
微信小程序支持使用 npm 安装第三方包. 使用 npm: 在小程序根目录下执行 npm install 第三方包名安装 npm 包. 点击开发者工具中的菜单栏:工具 --> 构建 npm 完 ...
fiddler使用教程+抓包实践+filder抓包APP+HTTPS,PC微信小程序公众号抓包笔记，fidder插件
fiddler使用教程+抓包实践+filder抓包APP+HTTPS,PC微信小程序公众号抓包笔记,fidder插件 fiddler使用教程界面 File->captur traffic 开启 ...
微信小程序：热门表情包+头像+壁纸自动采集多分类微信小程序
这是一款自动采集的一款微信小程序源码内由表情包,头像,还有壁纸组合而成的一款图片小程序每一个都自带多种分类,内容丰富运营适合另外支持插屏广告,激励视频广告,等多种广告小程序源码下载地址: 微信 ...
微信小程序使用特殊字体包
微信小程序使用特殊字体包 js页面 Page({data: {fontFamily: 'font1', },loadFontFace() {const self = thiswx.loadFontFa ...
微信小程序跳转第三方网页、第三方小程序。
微信小程序跳转第三方网页.第三方小程序. 微信小程序跳转第三方网页跳转第三方网页的问题微信小程序跳转第三方小程序微信小程序跳转第三方网页最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到 ...
微信小程序(.wxapkg)源码包解包的方法
首先下载微信小程序的解包工具:微信小程序(.wxapkg)文件解包工具下载地址: 工具下载 cmd切换到源码的存放目录,直接将工具和源码放一个文件夹吧,执行: java -jar unweapp-0 ...
奇遇网：WordPress版微信小程序开发:安装使用问题
原文:WordPress版微信小程序开发:安装使用问题自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordp ...
设置微信小程序支持npm（解决微信小程序npm构建时提示“没有找到可以构建的NPM包，请确认需要参与构建的npm都在miniprogramroot目录内，或配置project...”错误）的方法
提示:通过微信开发者工具创建小程序工程后,默认是不开启npm的,需要修改小程序npm配置参数,否则将会提示"没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 minipro ...
微信小程序中使用第三方ui框架方法
安装步骤安装前确定电脑上安装了node. (没有设置探宝镜像的先设置淘宝镜像,安装速度更快) 设置淘宝镜像: npm config set registry https://registry.npm ...

微信小程序npm安装第三方包

由于我要使用微信小程序引用图标插件，就以AntV F2插件为例；

AntV F2官网：https://antv.alipay.com/zh-cn…

需要准备：

1、先建好小程序模版。

然后使用dos命令打开这个当前的文件夹。比如下图：

2、初始化指令

如果出现这种情况就对了，进行对这个文件夹进行编辑，也可以全部点击回车键，一路回车；

3、再次安装npm install --production

如下图：

4、安装微信小程序 F2 图表组件*

恭喜你，操作完以上这几步已经安装好依赖包。

5、安装好依赖包之后，打开微信开发工具

操作图第一步：点击详情，勾选npm模块

操作图第二步：工具菜单栏打开，点击构建npm

点击构建npm后，会出现：

恭喜自己吧，npm安装第三方包已经完成；

以下就是在小程序中代码的撰写：

1.index.json;

2.index.wxml;

3.index.wxss;

4.index.js;

微信小程序npm安装第三方包相关推荐

最新文章

热门文章