1. Binding of Mini Program Events

Binding events in the program is realized through the bind keyword. For example, bindtap bindinput bindchange and other components support different events, please refer to the description of the component.

1. wxml

<input bindinput="handleInput" />

2. page

Page({
    
    
  // 绑定的事件
  handleInput: function(e) {
    
    
    console.log(e);
    console.log("值被改变了");
 }
})

3. Pay special attention

(1). When binding events, you cannot bring parameters and parentheses. The following is wrong writing

<input bindinput="handleInput(100)" />

(2). The method and value of the event pass value through the label self-defined attribute

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

(3). Get data when the event is triggered

 handleInput: function(e) {
    
    
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
 }

Two, style WXSS

WXSS (Weixin Style Sheets) is a set of style language used to describe WXML component styles. Compared with CSS, WXSS extension features are:

Responsive length unit rpx
Style import

1. Unit of measurement

rpx (responsive pixel): It can be adapted to the width of the screen. The screen width is 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

equipment	rpx to px (screen width/750)	px to rpx (750/screen width)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

Suggestion : Designers can use iPhone6 as the standard for visual drafts when developing WeChat programs.
Use steps: 1. Determine the width of the design draft pageWidth 2. Calculate the ratio 750rpx = pageWidth px, so 1px=750rpx/pageWidth. 3. In the less file, just put px => 750/pageWidth rpx in the design draft.

2. Style import

Directly support in wxss, style import function. It can also be mixed with the import in less. Use the @import statement to import external style sheets, only relative paths are supported. Example code:

/** common.wxss **/
.small-p {
    
    
  padding:5px; }

/** app.wxss **/
@import "common.wxss";
.middle-p {
    
    
  padding:15px; }

3. Selector

Special attention should be paid to the fact that the program does not support wildcard characters*, so the following code is invalid!

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

Previously supported selectors are:

Selector	Sample	Sample description
.class	.intro	Select all components with class="intro"
#id	#firstname	Select the component with id="firstname"
element	view	Select all view components
element, element	view,checkbox	Select all view components and checkbox components of all documents
nth-child(n)	view:nth-child(n)	Select a label for an index
::after	view::after	Insert content behind the view component
::after	view::before	Insert content in front of the view component

4. Use less in Mini Programs

The original small program does not support less, and other small program-based frameworks are supported, such as wepy, mpvue, taro, etc. But just because of a less function, it is definitely not advisable to introduce a framework. Therefore, you can use the following method to achieve
(1). The editor is vscode
(2). Install the plug-in easy less Insert picture description here
(3). Add the following to the vs code settings and configure

(4). In the place where you want to write the style , Create a less file, such as index.less, and edit it normally.

To be continued...

WeChat applet from entry to soil tutorial (03)

Article Directory