npm introduces the official WeUI component library weui-miniprogram

One, check whether to install the npm package

Check the version of npm through npm -v. If the corresponding version number can be displayed, the installation is successful.

Second, if it is not installed

1. npm init will prompt that it is not an internal command

2. Install the node environment

At this time, you need to install the node environment, you can download the corresponding version at http://nodejs.cn/download/ 

Third, start building nmp

1. Enter the root directory of the applet (the directory where app.js is located) and open cmd

Input: npm init -y

npm init -y

The parameter -y indicates that the information requested by npm is automatically pressed to indicate that the default value is accepted.

2. Download dependencies

npm install weui-miniprogram

Download miniprogram dependency

Fourth, click on the tool of WeChat developer tools => build npm

Five, app.wxss introduces global styles

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

Column: Introduce the dialog pop-up window component in the page

1. First add the usingComponents configuration field to the json file of the page

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

2. Then you can use the component directly in the wxml of the corresponding page

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