wuss weapp

Wuss Weapp

A high-quality, complete and highly customized WeChat applet UI component library

document

https://phonycode.github.io/wuss-weapp

Wuss Weapp Official Communication Group

QQ Group number 787275772

Scan the QR code to experience

Use WeChat to scan to experience mini program components examples

Demo picture

Get started quickly

Before you start using Wuss Weapp, you need to read the relevant documentation for the custom components of the WeChat applet.

How to use

Method 1 [Recommended] (install dependencies through npm and build npm modules in applets)

1. Locate the current applet development directory by using shell commands or git, and then install the dependencies using npm or yarn.

npm init && npm install --production wuss-weapp

or

yarn init && yarn add --production wuss-weapp

2. After the dependency installation is completed, you can click [Tools] => [Build npm] in the WeChat applet developer tool. If a pop-up window appears, remember to "Use npm module" to check it. If there is no pop-up window, manually check it in the details after the build is completed.

3. After the build is completed, you can add the required components. Configure in the page json:

 "usingComponents" : {
  "w-button" : " wuss-weapp/w-button/index " ,
  "w-toast" : " wuss-weapp/w-toast/index " ,
  "w-alert" : " wuss-weapp/w-alert/index "
}

4. Use components in wxml:

 < w-button type =" info " bind:onClick =" buttonClick " >这是一个按钮</ w-button >
< w-toast id =" wuss-toast " />
< w-alert id =" wuss-alert " />

5. Use in JavaScript:

 import { Alert , Toast } from 'wuss-weapp' ;

Alert ( {
  title : '提示' ,
  content : 'wuss weapp is good' ,
} ) ;

Toast . show ( {
  message : 'wuss小程序UI库' ,
} ) ; 

Method 2 (copy the dist of the current project to your own project)

1. Go to GitHub to download the code of the Wuss Weapp and copy dist directory to your project. Then use the component in the following way. Taking Button as an example, other components are viewed on the corresponding document page:

2. Add required components. Configure in the page json (the path is configured according to the location of your project):

 "usingComponents" : {
  "w-button" : " /dist/w-button/index "
}

2. Use components in wxml:

 < w-button type =" info " bind:onClick =" buttonClick " >这是一个按钮</ w-button >

Preview all components

We have built-in examples of all components, you can scan the applet code above to experience it, or view it in the WeChat developer tool as follows:

git clone https://github.com/phonycode/wuss-weapp.git

Then, open the project directly in the WeChat developer tool.

contribute

If you have any comments or suggestions, please feel free to mention the issue. Please read whether there is a related issue before you mention the issue. Or if there is a related issue but the issue has been closed, it is just a version that has not been updated yet. Please do not reply below this issue. If the updated version still exists after the update, please submit a new issue. Thank you.

LICENSE

MIT