Small micro-channel learning program (b)

First, incident response and data transmission

Defined events: 1. Event is a view of the logical layer to the layer of communication; 2, behavior of the user event may be fed back to the logic processing layer;

3, the event can be bound on the component, when it reaches the trigger event, the event handler executes a corresponding logic level;

4, the event object can carry additional information such as id, dataset, touches;

( Simply put, an event that is bound to the control function, the control can also bind the corresponding data set is usually named for the data-XX, XX here for user-defined )

Use events: bindtap = "name of the trigger event" when the user clicks on the component will find the appropriate event handler in the corresponding page in Page.

The handler then how to define it? The following definitions are given correlation function

处理函数名称：function(){
    //事件处理函数
}    //要写在page页面里面，当处理函数较多时整个page页面会显得比较庞大，可读性较差

Using WXS function to respond to events :( methods together, reducing the corresponding js file, separated from the js)

使用方式：<wxs module="wxs的名称" src="连接地址"></wxs>

<!--pages/mywx/mywx.wxml-->
<view bindtap="click">{{info}}</view>
<wxs module="wxs" src="../F/F.wxs"></wxs>
<view bindtap="{{wxs.click}}" class="A">{{info2}}</view>

// pages/mywx/mywx.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    info:"点击我",
    info2:"点击我"
  },
  click:function(){
    self=this
    self.setData({
      info:"我被点击了，通过函数"
    })
  },
  M:function(){
    self = this
    self.setData({
      info2: "我被点击了，通过WXS"
    })
  }
})


function Click(event,ownerInstance) {
  var info2="我被点击，通过WXS"
  var instance = ownerInstance.selectComponent('.A') // 返回组件的实例
  instance.setStyle({
    "color": "red",
    "content":"",
    "border":"1rpx solid"
  })
  instance.callMethod("M")
  return info2
}

module.exports = {
  click:Click//暴露Click接口
}

(Does not insert gif, will look)

Here module.exports for exposing interfaces, in the form of external access preceding click, in order to access internal function Click

Classification of events: a bubbling event and non-event bubbling in two ways: 1, bubbling event: when the event is triggered on a component, the event is passed to the parent node.

2, non-bubbling events: When events on a component is triggered, the event is not passed to the parent node.

( Bubbling events say understand the point is, children whose father is triggered will be triggered, non-bubbling event that a child does not affect the father )

Commonly used bubbling event in the table below :( All other events are non-bubbling events)

Types of	Triggering conditions
touch off	Finger touch operation start
touchmove	After moving a finger touch
touchcancel	A finger touch action is interrupted, such as call reminder, pop
touchEnd	Finger touch operation is completed
tap	Finger touch and release immediately
longpress	After the touch of a finger, then left more than 350ms, if a specified event callback function and triggered the event, tap the event will not be triggered
longtap	After the touch of a finger, then leave more than 350ms (instead of recommended longpress event)
transitionend	Will trigger at the end of WXSS transition or animation wx.createAnimation
animation start	Will be triggered when a WXSS animation animation starts
animationiteration	Will be triggered when a WXSS animation end of an iteration
animationend	Will be triggered when a WXSS animation animation is complete
touchforcechange	In support 3D Touch of iPhone devices, heavy schedule will trigger

 For a bubbling event bindtap will not stop bubbling event trigger, catchtap bubble will terminate trigger events; (such as source code below)

<view id="outer" bindtap="click1">
  outer
  <view id="middle" bindtap="click2">    //情况2即将bindtap改为catchtap
    middle
    <view id="inner" bindtap="click3">
      inner
    </view>
  </view>
</view>


//事件处理函数
 click1:function(){
    console.log('1')
  }
  click2:function(){
    console.log('2')
  }
  click3: function () {
    console.log('3')
  }

I. Click on inner, printed out 321; in the case of two printed only 32 (due to be captured catch);

Event object: when the component triggering event, the logical layer to bind the event handler receives an event object. (Here only a few commonly used)

the currentTarget (typically for acquiring data stored in the control)

Attributes	Types of	Explanation
id	String	The current component id (unique identification of the current component)
dataset	Object	The current component of the data-set of custom properties beginning composition

 Can be attached in the assembly are custom data node. As such, these nodes can be acquired from the data defined in the event, the logic for handling events. In WXML, these custom data to  data- begin with, a plurality of words by hyphens  - connection. The wording, the wording will be converted into hyphens hump writing, and uppercase characters will be automatically converted to lowercase characters. The data-enement-type becomes e.currentTarget.dataset.enementType; data-enementType becomes e.currentTarget.dataset.enementtype ( ie: when there are a plurality hyphen '-', the first letter capitalized to rest in lower case, The default is all lowercase letters )

type: type of event is triggered; timeStamp: timestamp when the event is triggered;

Second, the basic components (Control)

wxml form of tag (similar html) to define the components; for each component also defines a number of attributes (attribute) in the table below:

Property name	Types of	description	annotation
id	String	The only marked components	The only keep the whole page
class	String	Style class components	Defined in the class corresponding to the style WXSS
style	String	Inline styles assembly	Inline style can be set dynamically
hidden	Boolean	Component is showing	All components displayed by default
data-*	Any	Custom Attributes	When an event is triggered on the component, it will be sent to the event handler
bind* / catch*	EventHandler	Event components	Its value is a function name, used to call the function

 Third, the bells and whistles (think almost no)

1, the method applet page support screen rotation is:  app.json a  window set period  "pageOrientation": "auto" , or configuration page page json file  "pageOrientation": "auto" . ( window Segment set "pageOrientation": "auto"  )

2, iPad screen rotation method is:  app.json Add in "resizable":true。the iPad alone can not configure a page supports screen rotation.

3, in the applet, you can usually use CSS CSS gradients, and animation to create a simple interface animation. (This still some ~ - ~)

Animation process can be used  bindtransitionend     bindanimationstart     bindanimationiteration       bindanimationend to monitor animation events. 

Event name	meaning
transitionend	CSS gradients end or the end of a stage wx.createAnimation
animation start	CSS animation begins
animationiteration	CSS animation end of a stage
animationend	CSS animation end

Continuously updated: each article will be updated on a regular basis, if there is an error in the hope that we pointed out, (want to do a movie with a micro letter applet late to make up ^ ~ ^) 

(I hope and progress together.)