前言
从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。网上有很多npm的教程,但是感觉对新手不太友好,记录一下作为一个新手我是如何操作的。
tips:要使用npm需要先安装node.js
tips:本文以安装WeUI组件库weui-miniprogram为例
项目中设置勾上npm
设置勾上npm.jpg初始化npm
命令行
npm init
直接在新建项目的调试器里面新建终端。输入npm init 命令行。
step1.jpg
安装WeUI组件库weui-miniprogram
命令行
npm i weui-miniprogram -S --production
如果成功应该是直接创建了node_modules文件夹,还有package-lock.json、package.json两个Json文件。
成功.png
tips:--production可以减少安装一些业务无关的npm包,从而减少整个小程序包的大小。
安装npm包
命令行
npm install
在开发者工具中选择构建npm
构建npm.jpg在miniprogram_npm目录下会有导入的weui-miniprogram
使用
在对应的页面.json文件里引入
{
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}
}
以上都是在一切顺利的情况,下面介绍一下我自己碰到的问题。
提示:Sorry, name can only contain URL-friendly characters and name can no longer....
错误提示.jpg这个问题是npm在初始化的时候,会询问项目名。如果不命名直接回车它会指向你文件的名称当做项目名。但是有时候,我们的项目名称是不规范的。所以它会询问!这时候需要在询问的时候自己重新定义一个。比如weixinmini pack-name.jpg
然后一路回车下去,除了开始的package name, 其余的暂时可不填。最后到确认即可 pack-name-确认.jpg
后面安装使用的就和之前一样了。
相对而言,支付宝小程序npm添加包就简单多了。如果本文对你有帮助,记得点个赞呢,谢谢!
网友评论