Small program learning summary one

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 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