安装npm_微信小程序使用npm安装第三方库

嗨，大家好，我是小马丁

这是我的第48篇文章，感谢你的阅读.

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。此文档要求开发者们对 npm 有一定的了解，因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm，请翻阅 官方 npm 文档进行学习。01npm init

npm init  //初始化 package.json 文件

输入一些基本的信息，可以一直回车，按默认就可以，然后会生成一个package.json文件

02安装第三方库

以「Vant Weapp」轻量、可靠的小程序 UI 组件库为例， 执行npm的命令：

//在小程序的根目录下# 通过 npm 安装npm i @vant/weapp -S --production# 通过 yarn 安装yarn add @vant/weapp --production# 安装 0.x 版本npm i vant-weapp -S --production

03构建npm在微信开发者工具中：工具-点击构建npm。

04启用npm模块

如何开发微信小程序开发。微信开发者工具中选择-详情，把 使用npm模块勾选上。

05使用

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

引入组件：

引入组件以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。// 通过 npm 安装// app.json"usingComponents": {  "van-button": "@vant/weapp/button/index"}// 通过下载源码使用 es6版本// app.json"usingComponents": {  "van-button": "path/to/@vant/weapp/dist/button/index"}// 通过下载源码使用 es5版本// app.json"usingComponents": {  "van-button": "path/to/@vant/weapp/lib/button/index"

使用组件：

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

以上就是在小程序中使用npm的一些分享内容，感谢你的阅读~

往期推文

微信小程序广告怎么关闭？

给你的小程序接入AI机器人(附小程序发布的数据)微信安卓7.0.17内测更新体验(附下载链接)如何让你的小程序分享到朋友圈(附教程)

(近日改版，推送不再按时间排列。若大家还想在第一时间看到 公众号 的消息，请在微信中将「万能的小马丁」订阅号设置为星标，点击文章的次数越多，推送就会越及时。)

 · Smartisan · Mac· 微信 · 干货 · 今日头像 · 壁纸 ·

第  7 月 17 日 期

(扫码加作者微信)

微信小程序客服、声明：文章图片内容部分来引用于互联网如有争议或投诉，请联系微信：xiaomadingwechat

转了吗赞了吗在看吗