WeChat applet MinUI component library series icon icon component

MinUI is a set of simple, easy-to-use, and efficient component libraries developed based on the features of WeChat Mini Program custom components. It is applicable to a wide range of scenarios, covering the Mini Program native framework, various Mini Program component mainstream frameworks, etc. Command line tool. The MinUI component library contains many basic components, of which the icon icon component is a very commonly used basic component. The rendering of the icon component in MinUI is as follows:

Does it look convenient and fast (^ _ ^). You can open WeChat and scan the QR code of the following small program to see it first:

The following describes how to use the icon component.

1. Use the following command to install Min-Cli . If it is installed, please proceed to the next step. Please poke here for Min-Cli documents: Min-Cli User Manual

npm install -g @mindev/min-cli

2. Initialize a small program project.

min init my-project

Select New applet option to initiate a small project. After creating the project, open the project in the editor, the src directory is the source directory, and the dist directory is the directory specified in WeChat developer tools after compilation. The new project has a homepage. Detailed documentation: Min Initialize Mini Program Project

3. Install the price component.

Enter the directory of the newly created applet project:

cd my-project

Install components:

min install @minui/wxc-icon

4. Start dev.

min dev

After opening, the source code will be recompiled after modification.

5. Introduce components into the page.

Opens in the editor src/pagesdirectory home/index.wxpfile, scriptadd the configfield configuration applet custom component field, as follows:

export default {
    config: {
        "usingComponents": {
            'wxc-icon': "@minui/wxc-icon"
        }
    }
}

wxc-icon It is the label name of the price component, which can be used in wxml.

6, in the wxml wxc-iconlabel.

In home/index.wxpthe file templateadd wxc-icontags, as follows:

<wxc-icon size="50" type="yes"></wxc-icon>

7, micro-channel open developer tools, specify the distcatalog, preview the project.

home/index.wxp The code of the file is as follows:

<!-- home/index.wxp -->
<template>
  <wxc-icon size="50" type="yes"></wxc-icon>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-icon': '@minui/wxc-icon'
    }
  }
}
</script>

<style></style>

So far, the method of the icon component of the minui component library in the applet project generated by the Min tool has been introduced. For other scenarios, please use the method in the native applet or other applet framework project to move to the following link:

Introduction to using MinUI components in existing applet projects

After understanding how to use the component, the API of the price icon component is introduced below.

Icon【props】

Attributes	description
type	[Required] icon type
size	[Optional] icon font size, default value 22 (unit rpx)
color	[Optional] icon color, default # 333

Optional values ​​for type are:

  'yes', 'check', 'help', 'no', 'warning',
  'add', 'close', 'star', 'star-active', 'more',
  'right', 'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
  'minus', 'cart', 'home', 'search', 'search-square',
  'camera', 'scan', 'corcer-l', 'corcer-r', 'alipay',
  'yen', 'mogujie', 'group', 'pintuan', 'share',
  'notice', 'shop', 'delete', 'comment', 'edit',
  'feedback', 'location', 'address', 'after-sales', 'footprint',
  'weixin', 'top', 'purse', 'unreceived', 'truck',
  'rate', 'coupon', 'message'

More synchronization component updates please pay attention to MinUIthe small example program component library view, please move to real-time synchronization or updating of micro-channel applet icon icon component uses the document .

Communication feedback

Add a group assistant wUf18018252882 friends or scan code to add friends, assistants and dialogue with the group to send a verification code 10088in accordance refers to the introduction of the group.

Related Links

• Min-Cli official warehouse
• MinUI official warehouse
• Min official documentation

Open source components

• Layout element

  • flex layout
  • cc Center horizontally and vertically

• Basic components

  • avatar avatar
  • badge badge
  • elip text truncation
  • icon icon
  • label
  • loadmore bottom tip
  • price price
  • progress progress bar

• Functional component

  • abnor exception flow display
  • countdown
  • counter number box
  • loading loading tips
  • mask mask layer
  • steps
  • tab tab

• Cue feedback

  • dialog
  • popup popup layer
  • toast prompt box

• Form component

  • Coming soon ...

---

             蘑菇街前端团队，2018.01.17 于杭州

This article is reproduced in: Ape 2048 → https://www.mk2048.com/blog/blog.php?id=h0ic0kb110j