微信小程序 npm 引入 weui-wxss

1、打开cmd，在小程序的根目录，初始化npm

npm init

  name 项目名称；version 项目的版本号；description 项目的描述信息；entry point 项目的入口文件；

  test command 项目启动时脚本命令（npm test）；git repository  Git 地址

  keywords 关键词；author 作者；license 项目要发行的时候需要的证书

2、执行命令，进行安装 npm 包

npm install --save weui-miniprogram

3、npm 进行构建

微信开发者工具==》工具（开发工具导航栏）==》构建npm

4、npm构建进行本地设置

微信开发者工具==》详情==》本地设置==》使用npm模块（勾选）

5、在app.wxss引入全局样式

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

6、实例demo展示

首先在页面的 json 文件加入 usingComponents 配置字段

{
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

然后可以在对应页面的 wxml 中直接使用该组件

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