Binding of applets events

A small program to bind events, through the bind keyword. Different components, such as Bindtap Bindinput bindchange, support different events. For details, see the description of the component.

1. wxml

<input bindinput="handleInput" />
Copy the code

2. page

Page({
  // Bind events
  handleInput: function(e) {
    console.log(e);
    console.log("The value has been changed."); }})Copy the code

3. Pay special attention

(1). Do not bind events with parameters. Do not bind events with parentheses

<input bindinput="handleInput(100)" />
Copy the code

(2). Event pass value through tag custom attribute and value

<input bindinput="handleInput" data-item="100" />
Copy the code

(3). Obtain data when the event is triggered

 handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // Enter the value of the box
   console.log(e.detail.value);
 }
Copy the code

Second, style WXSS

WXSS(WeiXin Style Sheets) is a Style language for describing the component styles of WXML. Compared to CSS, WXSS extensions have the following features:

  • Response length unit RPX
  • Style import

1. Size unit

RPX (Responsive Pixel) : ADAPTS to the screen width. Specify a screen width of 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px = 1 physical pixel.

equipment RPX convert px (screen width /750) Convert PX to RPX (750/ screen width)
iPhone5 1 the RPX = 0.42 px 1 px = 2.34 the RPX
iPhone6 1 the RPX = 0.5 px 1px = 2rpx
iPhone6 Plus 1 the RPX = 0.552 px 1 px = 1.81 the RPX
advice: Designers can use iPhone6 as the standard for visual draft when developing wechat mini programs.
2. Calculate the scale 750rpx = pageWidth px, so 1px=750rpx/pageWidth. 3. In less file, just put px => 750/pageWidth RPX in the design draft.

2. Style import

WXSS supports style import directly. It can also be used with imports in less. Use the @import statement to import an external stylesheet, and only relative paths are supported. Sample code:

/** common.wxss **/
.small-p {
  padding:5px; }
Copy the code
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px; }
Copy the code

3. The selector

Note in particular that applets do not support wildcards * so the following code is not valid!

*{
    margin:0;
    padding:0;
    box-sizing:border-box; 
}
Copy the code

Currently supported selectors are:

The selector The sample The sample description
.class .intro Select all components that have class=”intro”
#id #firstname Select the component that has id=” firstName”
element view Select all view components
element, element view,checkbox Select view components for all documents and all Checkbox components
nth-child(n) view:nth-child(n) Select a label for an index
::after view::after Insert content after the View component
::after view::before Insert content in front of the View component

4. Use less in applets

Native applets do not support less. Other applets based frameworks are generally supported, such as Wepy, MPvue, taro, etc. But it’s definitely not advisable to introduce a framework just because of a less feature. So it can be done in the following way

(1). Editor is vscode

(2). Install the plug-in easy less

(3). Add the following configuration to VS Code Settings(4). Create a new less file where you want to write the style, such as index.less, and then edit it as normal.

Related content:

  • Wechat small program from entry to ground tutorial (01)
  • The template syntax of wechat Applets (02)
  • Wechat small program from entry to ground tutorial (03)
  • Common Components for getting started with wechat Applets (04)
  • Wechat Applets for starting custom Components (05)

More related articles and my contact information I put here: gitee.com/haiyongcsdn…

And finally, don’t forget ❤ or 📑