Moment For Technology

From wechat small program to HONGmeng JS development [14] -- custom components

Posted on Aug. 7, 2022, 2:16 p.m. by Renee Hayre
Category: The code of life Tag: HongMeng OS

Hongmeng guide, small white quick! From meng new to master, how to quickly master hongmeng development? [Course Entrance]

Directory:

1. Create a component

2. Front-end design

3. Page usage

4. Attribute passing

5. Customize events

6, "from wechat small program to Hongmeng JS Development" series of articles collection

In project development, some business requirements need to be implemented by multiple components. To facilitate modular management and reduce code redundancy, we can use custom components to merge multiple components into one. I feel that this part of the official document is not detailed and coherent enough, so I will make a summary here.

1. Create a component

To create a New Component, right-click New, JS Component in the project project directory. The directory is automatically generated in the JS folder, level with default.

2. Front-end design

The custom component has the same directory structure as the page. Here is a component that can add and subtract items in the shopping cart.

HML View layer:

div class="container"
    text class="icon" - /text
    text class="cnt" 1 /text
    text class="icon" + /text
/div
Copy the code

CSS rendering layer:

.container {
    height: 60px;
    width: 240px;
    border: 1px solid #bbbbbb;
    border-radius: 30px;
}
.containertext {
    height: 100%;
    line-height: 60px;
    text-align: center;
    color: #333333;
}
.icon {
    width: 70px;
    font-size: 40px;
}
.cnt {
    width: 100px;
    background-color: #eeeeee;
    font-size: 36px;
}
Copy the code

Components cannot be viewed directly on a remote device like pages, but they can be viewed through the IDE's Previewer.

3. Page usage

This component is introduced via the Element tag in the page where it is needed. This tag can be level with the outermost div, and I prefer to write them at the top.

element name="counter" src=".. /.. /.. /cart_counter/pages/index/index.hml"/elementCopy the code

The name attribute specifies the component tag name and SRC points to the component's HML file.

Use components, just like existing components, with custom tags to import. If the name attribute is not specified in element, it is the same as the HML file name.

 counter/counter
Copy the code

Take a look at the results:

4. Attribute passing

Attributes such as the index of the item, number of purchases, and so on need to be passed in via attributes on the page. In the data of the custom component's js file, define an array of strings with a key of "props" to hold all the properties supported by the component.

export default {
    data: {
        props: ['goodsCnt', 'itemIdx']
    },
}
Copy the code

The view layer can retrieve property values directly through dynamic binding.

div class="container"
    text class="icon" - /text
    text class="cnt"
        {{ goodsCnt }}
    /text
    text class="icon" + /text
/div
Copy the code

On a page that uses this component, you pass the attribute key=" attribute value" into the component. Note that the attributes of user-defined components are defined and used using the hump naming method. When using the attributes of this component, use the name separating method with a dash line so that the corresponding attribute value can be transferred normally.

counter goods-cnt="{{ $item.number }}" item-idx="{{ $idx }}"/counter
Copy the code

This allows the component to bind index values and display the number of items selected.

5. Customize events

Click "+" or "-", the number of items can be selected accordingly, and the function of this component is completed. This is where custom events come in.

Custom component view layer, bind click events:

div class="container"
    text class="icon" onclick="minus({{ itemIdx }})"
        -
    /text
    text class="cnt"
        {{ goodsCnt }}
    /text
    text class="icon" onclick="add({{ itemIdx }})"
        +
    /text
/div
Copy the code

Custom component logic layer, define corresponding methods.

export default { data: { props: ['goodsCnt', 'itemIdx'] }, minus(idx) { this.$emit("minus", {idx}); }, add(idx) { this.$emit("add", {idx}); }}Copy the code

Some processing can be done in custom component methods, or the event can be thrown directly to the component consumer for processing via this.$emit(). Method takes two arguments, the first specifying the name of the event when the component is used, and the second object passing data to the event that is fired when the component is used.

counter goods-cnt="{{ $item.number }}" item-idx="{{ $idx }}" onminus="minusCarts" @add="addCarts"/counter
Copy the code

When using a custom component, methods that handle events can be bound with either "on+ method name "or "@+ method name". Values passed by the custom component can be retrieved by "event.detail. specified key". The naming conventions are the same as those for attributes. Camel name is used for defining methods in custom components, and dash delimited naming is used for properties of binding methods when using components.

// Reduce a commodity minuscategorized (e) {let idx = e.tele.idx; let item = this.carts[idx]; If (item.number == 1) {prompt. ShowToast ({message: "buy at least 1 item ", duration: 3000}); } else { this.carts[idx].number--; this.totalPrice -= this.carts[idx].price; if (this.carts[idx].checked == 1) { this.nowPrice -= this.carts[idx].price; } this.updateNumber(idx); }}, // Add a commodity addCarts(e) {let idx = e.taill.idx; this.carts[idx].number++; this.totalPrice += this.carts[idx].price; if (this.carts[idx].checked == 1) { this.nowPrice += this.carts[idx].price; } this.updateNumber(idx); },Copy the code

And you're done.

The custom component of wechat small program is relatively complex, and the writing method and page gap in JS is also large. Personally feel, hongmeng JS custom component development way is easier to use, less configuration and redundancy functions. Below post wechat small program a small demo of a custom component.

Custom component WXML:

view class="parent"
    view class="text"{{text}}/view
    input type="{{type}}" placeholder="{{placeholder}}" name="{{name}}" onblur="blur" disabled="{{disabled}}"/input
/view
Copy the code

Custom component js:

Component({properties: {text:{type: String, value: "input :"}, type:{type: String, value:" "Placeholder"}, placeholder:{type: String, value: "placeholder"}, name:{type: String, value: null}, disabled:{type: String, value: null} Boolean, value: false } }, data: { }, methods: { blur(event){ this.triggerEvent("blur", event.detail) } } })Copy the code

Custom component JSON:

{
    "component": true,
    "usingComponents": {}
}
Copy the code

Page WXML:

myInput text=" placeholder "placeholder=" placeholder" type="text" onblur="blur"Copy the code

Js page:

Page({

  data: {
  },

  blur(e) {
    wx.showToast({
      title: e.detail.value,
      duration: 3000,
      icon: 'none'
    })
  },
}
Copy the code

The json page:

{
  "usingComponents": {
    "myInput": "/component/myInput/myInput"
  }
}
Copy the code

Author: Chris.

Want to know more, please visit: 51 cto and huawei officials strategic cooperation HongMeng technology community at https://harmonyos.51cto.com

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.