Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "WeChat Mini Programs's method of using extended component library WeUI". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Learning reference

2.NodeJs initialization

If you don't install NodeJs here, you can install it yourself.

Make sure you have NodeJs, in the root directory of your Mini Program project, execute the following command, and then press enter all the way to install it.

Npm init

After execution, you will see the package.json file in the root directory of the project

3. Install WeUI component Library

Execute the following command at the root of the project:

Npm install-save weui-miniprogram-production

The node_modules directory appears in the root directory

4. Configure 4.1 to build npm

Open the WeChat Mini Programs development tool, and click * * tools * *-> * * build npm * * at the top menu. After the construction is completed, a miniprogram_npm folder will be generated in the project root directory, as shown below:

4.2 support for npm

Click * * details * *-> * * Local Settings * * in the upper right corner of the Mini Program development tool, and check * * use npm Module * *. There is a hole you need to pay attention to. Remember to select the latest base library.

5. The project uses WeUI

Introduce style files into the Mini Program root directory app.wxss (according to your own path)

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

Introduce the required components in the json file that requires the page, for example:

"usingComponents": {"mp-form_page": "/ miniprogram_npm/weui-miniprogram/form/form_page"}

You can use it on the corresponding wxml page. For example:

The form structure shows the information structure style of the form page, which is composed of the head area / control area / prompt area / operation area and the bottom information area. Form group title Wechat number Nickname Contact number This is the end of the content of determining "WeChat Mini Programs's method of using extended component Library WeUI". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.