微信小程序 引入 WeUI

1.创建一个新的工程

 

2.win+r，输入cmd,打开终端，然后进入刚才所创建的文件中，同时使用小程序开发工具打开刚才创建的项目

3.终端中输入 npm init(我这里都是快速回车默认选择了),这样项目中会出现一个node_modules的文件

4.继续输入npm i

5.安装插件weui,输入npm i weui-miniprogram（可能会失败  可以改用 npm i weui-miniprogram -S --production）

 

6.开发者工具上选择工具-npm，项目中多了一个miniprogram_npm的文件夹

7.app.wss中引入weui.wxss  @import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

8.创建一个页面，index.json中引入 

    "mp-dialog": "weui-miniprogram/dialog/dialog"

 

index.wxml文件中添加

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

 

 

9.保存编译

 

错误提示：不知道为啥，按照步骤下来也是会出现报错 

报错["usingComponents"]["mp-dialog"] 未找到

"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"改为"mp-dialog": "weui-miniprogram/dialog/dialog"

解决方法 cmd中敲入 npm i weui-miniprogram -S --production 然后再重新构建npm