Shulou(Shulou.com)06/01 Report--

Editor to share with you how Mini Program encapsulates components, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Specific implementation steps of WeChat Mini Programs encapsulation components:

1. The new component folder stores our components, and what we are going to do today is a pop-up box. The new folder popup stores our component templates. Right-click and select New component, and you will automatically generate component templates wxss, wxml, json, and js, as shown in the figure.

two。 We can write some component styles and layouts, similar to the way the page is written, so I won't say much and just post the code:

Popup.wxml

{{title}} {{content}} {{btn_no}} {{btn_ok}}

Popup.wxss

/ * component/popup.wxss * / .wx-popup {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba (0,0,0, .5);} .popup-container {position: absolute; left: 50%; top: 50%; width: 80%; max-width: 600rpx; border: 2rpx solid # ccc; border-radius: 10rpx; box-sizing: bordre-box; transform: translate (- 50%,-50%) Overflow: hidden; background: # fff;} .wx-popup-title {width: 100%; padding: 20rpx; text-align: center; font-size: 40rpx; border-bottom: 2rpx solid red;} .wx-popup-con {margin: 60rpx 10rpx; text-align: center;} .wx-popup-btn {display: flex; justify-content: space-around; margin-bottom: 40rpx;} .wx-popup-btn text {display: flex; align-items: center; justify-content: center Width: 30%; height: 88rpx; border: 2rpx solid # ccc; border-radius: 88rpx;}

The style and layout and layout have been written, and the next thing to introduce is

Component constructor

The Component constructor can be used to define the component, and you can specify the properties, data, methods, and so on of the component when calling the Component constructor.

Tips:

Components constructed by the Component constructor can also be used as pages.

You can get internal data and property values using this.data, but do not modify them directly, you should use setData to modify them.

Lifecycle functions are not accessible through this in component methods.

Property names should avoid starting with data, that is, do not name them in the form of dataXyz, because in WXML, data-xyz= "" is treated as a node dataset, not a component property.

When defining and using a component, the component's property names and data fields cannot conflict with each other (although they are in different definition segments).

After the introduction of component, it is the most important js.

Popup.js:

Component ({options: {multipleSlots: true / / enable multi-slot support in the options when the component is defined), / * * component attribute list * / properties: {title: {/ / attribute name type: String, / / Type (required) Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type) value: 'title' / / attribute initial value (optional) If not specified, a pop-up window content content: {type: String, value: 'content'}, / / pop-up window cancel button text btn_no: {type: String, value: 'cancel'}, / / pop-up window confirm button text btn_ok: {type: String Value:'OK'}, / * * initial data of the component * / data: {flag: true,}, / * method list of the component * / methods: {/ / Hidden pop-up box hidePopup: function () {this.setData ({flag:! this.data.flag})} / / Show pop-up box showPopup () {this.setData ({flag:! this.data.flag})}, / * * Internal private methods suggest starting with an underscore * triggerEvent is used to trigger the event * / _ error () {/ / trigger cancel callback this.triggerEvent ("error")} _ success () {/ / triggers a successful callback to this.triggerEvent ("success") })

A triggerEvent will be used above and we will introduce it below:

When a custom component triggers an event, you need to use the triggerEvent method to specify the event name, detail object, and event options.

Now that the component of a pop-up window is encapsulated, the next step is to call.

When calling, you need to create a new json file on the called page. If you need to configure usingComponents in the json file, you need to reference the component. See the code:

Index.json

{"usingComponents": {"popup": "/ component/popup/popup"}}

Now basically done, all you need is to quote it on the home page.

Click me.

Configure index.js plus click event

/ / index.js// get application instance const app = getApp () Page ({onReady: function () {/ / get popup component this.popup = this.selectComponent ("# popup");}, showPopup () {this.popup.showPopup ();}, / / cancel event _ error () {console.log ('you clicked cancel'); this.popup.hidePopup () }, / / confirm event _ success () {console.log ('you clicked OK'); this.popup.hidePopup ();}})

A pop-up window assembly is complete.

The above is all the contents of the article "how Mini Program encapsulates components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.