0. Common components

Swiper Wechat built-in rote map component

WeChat built-in shuffling photo components: developers.weixin.qq.com/miniprogram… Swiper only swiper-Item components can be placed in swiper; otherwise undefined behavior will occur. Each swiper-item is a container for storing images, which can be used as a loop for practical applications. Note: Swiper’s default height is 150px

Navigator navigation component

Navigation components, similar to a label: developers.weixin.qq.com/miniprogram… The URL attribute is not added, but it does not jump

Redirect Mode: Redirects the previous historical page to another page when you click the icon in the upper left corner

Rich-text Indicates a rich text label

The rich text labels: developers.weixin.qq.com/miniprogram… You can parse strings into labels, similar to the V-HTML statement in VUE: Nodes =’ element/text node ‘

  • nodesNot recommendedStringType, performance will be degraded.
  • rich-textMask all node events within the component.
  • attrsAttribute does not support ID, but class.
  • nameThe property is case-insensitive.
  • If you use an untrustedHTMLNode and all of its children will be removed.
  • imgThe label supports only network images.

The button button

Button document open-type=’contact

Open-type =’share’ Triggers user forwarding

Open-type =’getPhoneNumber’ Obtains the user’s mobile phone number

Open-type =’getUserInfo’ To obtain user information

Radio radio buttons

Radio buttons: developers.weixin.qq.com/miniprogram… If the value doesn’t exist, it gets an empty string wrapped around the radio-group and it’s considered a group, it’s mutually exclusive, it can also trigger events

The checkbox boxes,

Boxes: developers.weixin.qq.com/miniprogram… A wrap in a radio-group can trigger an event with the same properties as a checkbox

tabBar

Many applications TAB: developers.weixin.qq.com/miniprogram… Note:

The path that pagePath receives should not be preceded by a slash list. At least two and at most five selectedcolors are placed under the tabBar object

1. Customize components

Custom components: developers.weixin.qq.com/miniprogram… WXML, WXSS, json, js, WXSS, WXSS True, this method is not the same as pages, this recovery is written in a special location like vue, no longer scattered

Use applets

The configuration JSON file on the page declares that the key value represents the component alias and the value represents the component path

Edit component

Slot Indicates a slot, similar to the slot in vUE

In the component’swxssFile to write styles

Note: ID selectors, attribute selectors, and tag name selectors should not be used in component WXSS.

The father the son

The father the son: developers.weixin.qq.com/miniprogram… The parent component passes parameters to the child component as properties

Child the parent

When a custom component fires an event, the triggerEvent method is used to specify the event name and detail object

2. Applets life cycle

App life cycle, define app.js page life cycle, defined in the respective page JS

Application life cycle

Application lifecycle: developers.weixin.qq.com/miniprogram… OnLaunch is triggered only once, and onShow is unlimited. OnLaunch usage scenarios: Obtain the user’s location and authorize the user to use onShow: for example, when the user opens the application again and refreshes the data

OnError Application scenario: Collect exception logs when the network is abnormal

Page life cycle

The application life cycle is triggered when the page declaration cycle is triggered, and the application starts when the page is closed or destroyed


Page({
  // Initial data for the page
 
 // Lifecycle function -- listens for page loading
 
  onLoad: function (options) {
    // options gets page parameters. Option is an object
    // Use scenario: Send network request here
    console.log('page onLoad', options)
  },
  // Lifecycle function -- listens for the page to finish rendering for the first time
  
  onReady: function () {
    // Scene: Get the page element
    console.log('Page onReady trigger')},// Lifecycle function -- listens for page display

  onShow: function () {
    console.log('page onShow')},// Lifecycle function -- listens for page hiding
 
  onHide: function () {
    console.log('page onHide')},// Lifecycle function -- listens for page unloads
 
  onUnload: function () {
    // Scenario: Timer clearing
    console.log('page onUnload')}})Copy the code

3. Check whether the component or API is available

Judge small application API, callback, the parameters of components such as whether in the current version available: developers.weixin.qq.com/miniprogram…

4. Initiate a network request

A network request: developers.weixin.qq.com/miniprogram… Not a browser kernel, so don’t use Windows, Ajax, XHM, etc

If the following error is displayed, the requested domain name is not added to the trusted domain name

Method 1: “small program background – development – Development Settings – Server domain name” to configure mp.weixin.qq.com/

Method 2: If you use test numbers, you can ignore checks in the developer Settings

Network request method

The setData function is used to send data from the logical layer to the view layer (asynchronously) and change the corresponding value of this.data (synchronously). Directly modifying this.data without calling this.setData cannot change the state of the page and will cause data inconsistency

wx.request({
	url: 'Requested address'.method: 'post'.// The default is get request
	success: (res) = > { // Successful callback}})Copy the code