微信小程序系列——拓展组件库weui的npm引入
2020-06-01 本文已影响0人
wuailing
前言
在引入之前,需要安装nodejs作为运行环境,具体操作网上可以搜得到!
以引入vant为例:
1、step1 右键miniprogram,选择“在终端打开选项”
![](https://img.haomeiwen.com/i15855593/ffac2b9d4309edeb.png)
2、step2 初始化npm
输入npm init,下面的选择都用回车即可
3、step3 安装weui的依赖
npm i weui-miniprogram -S --production
4、step4 构建npm
![](https://img.haomeiwen.com/i15855593/8f3c5c06d34831ce.png)
![](https://img.haomeiwen.com/i15855593/f8680a4831bfa0f3.png)
5、step5 使用npm模块
![](https://img.haomeiwen.com/i15855593/5d68aa6ef63fb252.png)
6、wxss中引入组件的样式
@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
7、在app.json或者index.json中引入组件
"usingComponents": {
"mp-toptips": "../../miniprogram_npm/weui-miniprogram/toptips/toptips"
}
8、在对应页面的 wxml 中直接使用该组件
<mp-toptips msg="{{tips}}" type="success" show="{{tips}}"></mp-toptips>