小程序使用npm引入Weui组件库

1、创建小程序项目

2、在小程序根输入npm init,进行初始化，然后一路可以答带默认（enter）之后可看到package.json

3、开始安装Weui组件库 npm install --save weui-miniprogram --production

4、工具>构建npm

5、点击小程序开发工具右上角详情-本地设置，勾选上使余举穗用npm模块

[图片上传中...(image-b7a8e2-1624982995933-0)]

6、在小程序app.wxss中引入样式文件

@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'

7、index页面使用

//index.json { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } }

//竖卜index.wxss <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"><view>test content</view> </mp-dialog>

引入weui:

在app.json里添散禅加

在需要使用weui的页面的json文件里引入要使羡掘衫用的组件

修改weui样式

在需要修改的页面的js里添加externalClasses:[样式名1,样式名兄腔2......]

在组件上添加在externalClasses里写的类名

在引入之闹郑知前，需要安装nodejs作为运行环境，具体 *** 作网上可以搜得到！

以引入vant为例：

输入npm init，下面的选择都用回液消车即可

npm i weui-miniprogram -S --production

@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'

"usingComponents": {

"mp-toptips": "../../miniprogram_npm/丛清weui-miniprogram/toptips/toptips"

}

<mp-toptips msg="{{tips}}" type="success" show="{{tips}}"></mp-toptips>

---