This is the 9th day of my participation in Gwen Challenge

basis

The file type

  • Js business logic
  • WXML various HTML tags
  • WXSS CSS style
  • Json page configuration file

Global configuration

  • Page: Configures the page path. The first page is displayed on startup by default

  • Window: Common configuration of all pages, such as navigation bar color, text, etc., can be reconfigured in json files of other pages to override this style

See more configurations

knowledge

Data binding

Create the data

  • Similar to Vue, data is set in Page.data and interpolated to get the data

    Page({
    data: {
   		msg: 'This is a piece of data.',}})Copy the code

To get the data

  • Interpolation expression

    <view>{{msg}}</view>
Copy the code

  • Get from this

    this.data.msg // There is an extra layer of data compared to vue
Copy the code

  • Bind the attributes of a tag

    <image src="{{imgSrc}}"></image>image>  //
Copy the code

Modify the data

  • The React Class component syntax is similar

    this.setData({
    msg: 'This data has been modified.',})Copy the code

The event

  • There are bubbling events and non-bubbling events, bubbling events plusbindPrefix, added to non-bubbling eventscatchThe prefixDon’t name it hump
The event name describe
touchstart Finger touch starts (mousedown)
touchmove Fingers move after touch
touchcancel Finger touch action is interrupted, such as a reminder, popover
touchend End of finger touch (mouseup)
tap Finger touch immediately away (click)
longpress If the event callback function is specified and the event is triggered, the TAP event will not be triggered
longtap After finger touch, leave after more than 350ms (longpress event is recommended instead)
transitionend Triggered when WXSS Transition or wx.createAnimation finishes
animationstart Emitted when a WXSS animation starts
animationiteration Emitted at the end of an iteration of a WXSS animation
animationend Emitted when a WXSS animation completes
touchforcechange On iPhone devices that support 3D Touch, retiming is triggered

The binding event

<view bindtap="handleTap">Click here!</view>/ / the bubbling<view catchtap="handleTap">Click here!</view>// Prevent events from bubblingCopy the code
Page({
  data: {
    msg: 'This is a piece of data.',},Similar to vue, but different from nested methods, write event functions directly here
  handleTap() {
    console.log(The button was clicked.)}})Copy the code

Lifecycle hook


onLoad: function (options) {
    // The first page load is similar to created in vue
}

onReady: function () {
    // The page is mounted in vue
}
onShow: function () {
    // Page display
}
onHide: function () {
    // Page hide is similar to deStoryed in vue
}
onUnload: function () {
    // Page destruction
}
onPullDownRefresh: function () {
    // Page dropdown
}
Copy the code

The list of rendering

  • similarV - for vue
array=[
    {id:1,message:'a'},
    {id:2,message:'b'},
]
Copy the code

Basic usage

  • indexYou do not need to declare it; the default is array subscript
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Copy the code

The specified key

  • The key must be a number or string
// Where id is retrieved directly from array, no item.id is used
<view wx:for="{{array}}" wx:key="id">  
  {{index}}: {{item.message}}
</view>

// * This is the item itself, and the key must be either a number or a string, so the data source for the list rendering must be an array of numbers or strings
/ / numberArray = [1, 2, 3, 4, 5]
<view wx:for="{{numberArray}}" wx:key="*this">  
  {{index}}: {{item.message}}
</view>

Copy the code

Conditions apply colours to a drawing

wx:if

<view wx:if="{{condition}}"> True </view>
Copy the code

Wx: elif and wx: the else

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
Copy the code

block wx:if

  • Wrap multiple elements. In this case, block tags are not rendered. Note that wrapping multiple tags with view can also work
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
Copy the code