The introduction and use of WeChat applet weui

---

1. Wechat applet introduces WeUI component library and uses components

1. Imported by using the extended library of useExtendedLib (recommended)

提示：这种方式引入的组件将不计入代码包的大小

1. The WeChat base library is above 2.2.1 (including) and can be configured directly in app.json

//  app.json
{
    
    
  "useExtendedLib": {
    
    
    "kbone": true,
    "weui": true
  }
}

2. Add the usingComponents configuration field to the json file of the page using the component

{
    
    
  "usingComponents": {
    
    
    "mp-badge": "weui-miniprogram/badge/badge"
  }
}

3. quote

<mp-badge content="123"></mp-badge>

2. Introduce via npm (weui-miniprogram)

1. Enter the root directory of the applet project and execute the command npm init to create a package.json file
   注意：一开始是没有的 package.json 文件的
2. Execute the command to install the npm package in the directory where the applet package.json is located, and install the command:
   注意：此处要求参与构建 npm 的 package.json 需要在 project.config.json 定义的 miniprogramRoot 之内。

npm install weui-miniprogram -S

3. Click on the menu bar in the developer tools: Tools --> Build npm
4. Click on the right menu bar in the developer tools: Details --> Local Settings, check the "Use npm module" option
5. Use of WeUI components

// 1.首先要在 app.wxss 里面引入 weui.wxss
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

// 2.在使用组件的页面的 json 文件加入 usingComponents 配置字段，例如弹窗组件
{
    
    
  "usingComponents": {
    
    
    "mp-dialog": "../../miniprogram_npm/weui-miniprogram/dialog/dialog"
    // 注意：路径与组件包在项目的位置有关
  }
}

// 3.在对应页面的 wxml 中直接使用该组件
<mp-dialog title="test" show="{
     
     {true}}" bindbuttontap="tapDialogButton" buttons="{
     
     {[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

---

2. The use of WeChat applet weui

1. Browse the effects of the weui component library online

Browse address: https://weui.io/

2. Download weui

Go to GitHub to download, download address: https://github.com/Tencent/weui-wxss
After decompression, \weui-wxss-master\dist\style\weui.wxss is the weui library we need to
注意：从GitHub上下载的weui文件夹里example文件是组件代码
introduce weui in app.css. wxss

@import "/styles/weui.wxss";