I. wechat applets development documents

Development of the document

Two. Learn web sites

Learning web site

Configure applets

1. Global configuration

Global configuration

2. Configure the page

Configuration page

3. Sitemap configuration (when publishing)

Developers.weixin.qq.com/miniprogram…

Four. Small program basis

0. Common labels

0.1. The Text tag (similar to the SPAN tag on the Web)

0.2 View tag (equivalent to div tag on the Web)

0.3 Block label (placeholder label equivalent)

0.4 CheckBox

1. Template syntax

(1) Data binding – When we define variables in the page’s JS, we can use template syntax to use the code in variable.js

Calls in WXML

2. Operation

Including number operation, string operation, ternary operation, conditional statement

<! -- number plus or minus --><view>{{1 + 1}}</view><! String concatenation --><view>{{' 1 '+' 1 '}}</view><! -- ternary expression --><view >{{3 = = 0 10%?" True ":" false "}}</view><! -- Conditional Render --><view 
Copy the code

3. Array and object loops

<view 
wx:for="{{list}}" 
wx:for-item="item" 
wx:for-index="index"
wx:key="key"Value: {{item.name}} </view>Copy the code

4. Conditional rendering

<view wx:if="{{true}}"> show < / view ><view wx:if="{{false}}">hidden</view>
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else="{{true}}">3</view>
Copy the code

4.1 hidden

<view hidden="{{true}}"< p style = "max-width: 100%; clear: both; min-height: 1em;<view hidden="{{false}}">Smile again</view>
<view hidden="{{}}">Still smile</view>
Copy the code

5. Event binding

5.1. Input event binding

1.The input needs to be bound to an event that triggers the binding keyword: bindinput when the value changes2.How to get the value of the input field: e.daile.value3.Assign the value of the input field to datathis.data.num = e.dail. valuethis.setData({
  num:e.detail.value
})
-->
<input  type="text" value="" bindinput="handleInput">

</input>

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

Effect:

5.2. Button binding events

4.Bind events to buttons1 bindtap
 2Cannot pass parameters directly to events in applets, such as <button bindtap="handleTap(1)">+</button>
 3The parameter data-operation= needs to be passed as a custom attribute'{{1}}'
 4You can get the parameter <input type= in the event source"text" value="{{num}}" bindinput="handleInput">
</input>
<button bindtap="handleTap" data-operation="{{1}}">+</button>
<button bindtap="handleTap" data-operation="{{1}}">-</button>
<view>
    {{num}}
</view>
Copy the code

handleTap(e){
    // Get the custom attribute operation
     const {operation}=e.currentTarget.dataset
   this.setData({
       num:this.data.num +=operation
   })   
},
Copy the code

Effect:

Style of 6.

6.1 the style the RPX

6.2 Style Import

6.3 Selectors (WildCard Characters are not supported)

6.4 Using less in small programs

7. Common components in applets

Common components include: view, text, rich text, button, the image, the navigator, icon, swiper, radio, the checkbox, etc

7.1. The view

Similar to the original div tag

7.2. The text

7.3. The image

Details:The detailed information

7.4. Swiper (Carousel map component)

<! --1.Swiper, the outer container of the rotation diagram2.Swiper-item for each rotation item3.Swiper tags have default styles (1Width:100%
   (2Imgage Default width and height are320*240
   (3Swiper height cannot achieve content spread4.Set the width and height of swiper in proportion to the width and height of the original image1125*352px swiper width \swiper height = Original width/original height swiper height = original width/original height: 100vw(750rpx)*352/1125
  5Autoplay Automatic rotation6.Interval Indicates the interval between rounds7.Circular circular broadcast8.Indicator -dots displays rotating dots9.Indicator color --><swiper autoplay interval="3000" circular indicator-dots indicator-color='skyblue'>
   <swiper-item>
     <image mode="widthFix" src="//img.alicdn.com/imgextra/i1/89/O1CN01LK1zcs1CWnvSwlhAI_!! 89-0-luban.jpg"></image>
   </swiper-item>
   <swiper-item>
     <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"></image>
   </swiper-item>
   <swiper-item>
     <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg"></image>
   </swiper-item>
   <swiper-item>
     <image mode="widthFix"s src="//img.alicdn.com/imgextra/i2/2206686532409/O1CN01sd1h9c1TfMnX6tzgP_!! 2206686532409-0-lubanimage.jpg"></image>
   </swiper-item>
 </swiper>
Copy the code

wxss:

swiper{
  width: 100%;
  height: cal(750rpx*352/1125);
}
image{
  width: 100%;
}
Copy the code

Effect:

Details:

details

7.5 the navigator

Navigation component, similar to the A tag

Details:

details

7.6. Rich text

Similar to HTML in VUE, strings can be parsed into corresponding tags

Details: Details

7.7. The button labels

Details: Details

1. Button appearance properties

The common ones are size, type, plain, disabled,loading

2. Button’s openness

<! --pages/demo8/button.wxml--><button size="mini" type="primary" plain loading disabled>button</button><! -- Button open function open-type:1.Contact directly open, customer service dialogue function, need to be configured in the background of wechat mini program2.Share Forwards the current small program to the wechat moments. The small program cannot be shared in the moments3.GetPhoneNumber Obtains the mobile phone number of the current user. It is not an enterprise applets account and does not have the permission to obtain the user's mobile phone number.1). Bind an event to this button, bindGetPhonenumber (2). In the callback function, information is obtained through arguments (3). Obtain the information has been encrypted to the user to welcome the small program of the background server, in the background server to parse the phone number, return to the small program, you can see the information4.GetUserInfo Gets personal information about the current user (1). Bind an event to this button, bindGetUserInfo (2). Can be obtained directly, there is no encryption field5.LaunchApp opens the app directly in the applet (1). You need to open the small program in app through a link of app (2). Re-open the app using this function in the applet (3). You can find jd's app and try it6.OpenSetting opens the applet's built-in authorization page (1). In the authorization page, only the permissions that the user has clicked will appear7.Feedback open the feedback page of the built-in feedback of the applet --><button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
Copy the code

7.8 the icon

7.9 Radio (Single Option)

Details: Details

html:

<! -- Radio option box1Radio checkboxes must be used with radio-groups2Value Indicates the value of the selected option box3You need to bind the change event to the radio-group4The selected value needs to be displayed on the page5Use color to change color --><radio-group bindchange="handleChange">
  <radio value="male" color="red">male</radio>
  <radio value="female" color="skyblue">female</radio>
</radio-group>
<view>The gender you selected is: {{gender}}</view>
Copy the code

js:

Page({

  data: {
gender:' '
  },
  handleChange(e){
    console.log(e);
    this.setData({
      gender:e.detail.value
    })
    
  }
})
Copy the code

Effect:

7.10 checkbox(checkbox)

The usage is similar to that of a single option box. Details: Details

5. Custom components

1. Component usage procedure

We define a Components folder in the outermost layer. Inside Tabs, we create a component that contains four files

1.2. Importing components

1.3. Use components

2. Communication between components

2.1 the father the son

1. Define properties in component tags

2. Store the passed properties in the component properties

3. The method of calling data is the same as the method of calling data in data

2.2 the father

Define a custom event in a child component

2. Bind events from child components to parent components

3. Write methods in the parent component JS

Effect:

3. The slot

1. Define a slot

2. Use

For other attributes, see official documentation: Official documentation

4. Life cycle

Details visible: Lifecycle details

4.1. Application life cycle

//app.js
App({
  // 1 The event that is triggered when the application is started for the first time
  onLaunch(){
    // Get the user's personal information when the application is first started
    console.log('onlaunch');
  },
  // 2 Triggered when the application is seen by the user
  onShow(){
    // Do some resetting of application data or page effects
    console.log('onshow');
  },
  // 3 Apps do not trigger when hidden
  onHide(){
    // Pause or clear the timer
console.log('onHide');

  },
  // 4 Triggered when an error occurs in the application code
  onError(err){
    // When the application code error occurs, collect user error information, through asynchronous request, send the error information to the background
    console.log('onError');
    console.log(err);
  },
  // 5 will trigger if the page cannot be found
  // When the application is first started, it will only be triggered if the first entry page cannot be found
  onPageNotFound(){
    // If the page does not exist, redirect to the second page by using javascript
    // Cannot jump to tabbar page similar to navigation component
    wx.navigateTo({
      url: '/pages/demo9/icon',})console.log('onPageNotFound'); }})Copy the code

4.2. Page life cycle

// pages/demo13/pagelifetime.js
Page({

  /** * initial data for the page */
  data: {},/** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    // Send an asynchronous request in onLoad
console.log('onLoad');

  },

  /** * lifecycle function - listen for the page to complete the first rendering */
  onReady: function () {
console.log('onReady');

  },

  /** * lifecycle function -- listens for page display */
  onShow: function () {
console.log('onShow');

  },

  /** * life cycle function - listen for page hiding */
  onHide: function () {
console.log('onHide');

  },

  /** * life cycle function - listen for page unload */
  onUnload: function () {
console.log('onUnload');

  },

  /** * page-related event handlers -- listen for user pull actions */
  onPullDownRefresh: function () {
console.log('onPullDownRefresh');

  },

  /** * the handler for the pull-down event on the page */
  onReachBottom: function () {
console.log('onReachBottom');

  },

  /** * Users click on the upper right corner to share */
  onShareAppMessage: function () {
console.log('onShareAppMessage'); }})Copy the code

Wechat small program development learning

I. wechat applets development documents

Two. Learn web sites

Configure applets

1. Global configuration

2. Configure the page

3. Sitemap configuration (when publishing)

Four. Small program basis

0. Common labels

1. Template syntax

2. Operation

3. Array and object loops

4. Conditional rendering

4.1 hidden

5. Event binding

5.1. Input event binding

5.2. Button binding events

Style of 6.

6.1 the style the RPX

6.2 Style Import

6.3 Selectors (WildCard Characters are not supported)

6.4 Using less in small programs

7. Common components in applets

7.1. The view

7.2. The text

7.3. The image

7.4. Swiper (Carousel map component)

7.5 the navigator

7.6. Rich text

7.7. The button labels

1. Button appearance properties

2. Button’s openness

7.8 the icon

7.9 Radio (Single Option)

7.10 checkbox(checkbox)

5. Custom components

1. Component usage procedure

2. Communication between components

2.1 the father the son

2.2 the father

3. The slot

4. Life cycle

4.1. Application life cycle

4.2. Page life cycle

Related Posts

Js special effects case – movie ballot box

How to use Vue animation, the Transition component

Guide to Protecting Node.js Applications