Get rid ofimageThe margin-bottom value of the tag

The image tag, HTML img, contains a margin-bottom value, which causes a distance from the elements below

  • Solution 1: Set a packageimageContainer CSS for the tagfont-size: 0
  • Scheme 2: SettingsimageOf the labeldisplay:block

1rpx border The ios display is incomplete

Blog.csdn.net/c5211314963…

A bug occurs when one of the following conditions is met

  1. When the label’s parent container width (RPX)÷2 isEven or even.5“, so we can push out to use 200.52 = 4013022=604 and so on will reproduce this bug causing the left and right borders to appear incompleteThe upper and lower borders are also due to height
  2. When the label width itself (unit: RPX)÷2 isEven or even.5“, so we can push out to use 200.52 = 4013022=604 and so on will reproduce this bug causing the left and right borders to appear incompleteThe upper and lower borders are also due to height

The solution

  1. Change the width and height to avoid both, and set the width and height of the tag to even when developing
  2. Transform: Scale is recommended for 1px borders
.border-1px {
  width: 200px;
  height: 50px;
  position: relative;
}
.border-1px::after {
  position: absolute;
  content: ' ';
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
  border-radius: 100px;
  border: 1px solid red;
  transform: scale(0.5);
  transform-origin: left top;
}
Copy the code

There are some situations on the iPhone where text doesn’t center vertically

For example, if height is set to 28rpx and font size is set to 18rpx, the text will not be vertically centered within the border

Solution:

Change the font size to 16rpx or below.

The specific rules have not been found for the time being, the design does not agree to change the font, and the final solution is to set different styles for Andirod and ios respectively

On the iphonetextareaSet up thepaddingInvalid value causes text spacing to be inconsistent with andirod’s display

Solution: Distinguish andirod and ios system to set different styles to make the display consistent, for example: Andirod can set the pading value, ios set positon:raletive shift

Animation Setup Tips

When the animation needs to not appear on the page before or after the animation is completed, the initial position of the animation can be placed out of view

Force same-layer rendering on

Enable native components to render in the same layer, with z-index control hierarchy

"window": {
    "renderingMode": "mixed"
  },
Copy the code

Performance report

  1. Simplify dom structures that need to be displayed, such as long lists of hidden elements that are not in a window
  2. Simplify data setData operations
  3. Split component reuse, image resource compression on CDN, small program subcontracting preloading

Performance experience

  1. Do not use the :active pseudo-class and use hover-class instead of :active

  2. The iPhone X compatible

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
Copy the code

The use of lazy functions

When obtaining information that is time-consuming and will not change, consider using lazy functions to encapsulate it to avoid multiple time-consuming operations

Example: Obtaining system information

Simple version of

let systemInfo = null
function getInfo() {
    if(! systemInfo) { systemInfo = wx.getSystemInfoSync() }return systemInfo
}
Copy the code

Lazy function version: recommended

export let systemInfo = function() {
  const res = wx.getSystemInfoSync()
  systemInfo = function() {
    return res
  }
  return systemInfo()
}
Copy the code

The amount of setData is too large

An error occurs when setData is too large

The vdSyncBatch data transfer length is 2260792, exceeding the maximum length of 1048576Copy the code

Because the amount of data set by setData is limited, the size of data set ata single time should not exceed 1024KB, otherwise the above error will occur

Solution: setData after converting the array into a two-dimensional array, and need to modify the WXML loop structure, multiple sets of a layer of loop.

Pseudo code

Data: {// current page number pageNo:0, // data source list:[]}, getListData:function(){// Load data this timelet_list = []; .setData({
       ['list[' + pageNo + '] ']: _list,
  });
}
Copy the code

Super long scrolling list, memory overflow performance optimization after too much pull-up loading

When a certain amount of data is pulled and loaded on the list page, the memory is too high, resulting in small programs stuck or even black screen closed.

Solution: Remove the WXML structure of content that is not in the current window area.

Operation idea: encapsulates a list item container components, using createIntersectionObserver relativeToViewport observe method to monitor the current position of the item, to remove or insert

The core code

Component skeleton. WXML

<view class="list-item" id="list-item-{{uniqueId}}" style="min-height: {{height}}px;">
	<block wx:if="{{showSlot}}">
		<slot></slot>
	</block>
</view>
Copy the code

Component skeleton. Js

. ready() {// Change the method of listening to whether the content is displayed to before and after the showNum screen height render
    RelativeToViewport ({top: XXX, bottom: XXX})
    const { windowHeight = 667 } = systemInfo()
    const showNum = this.data.showNum // Over the number of screens, the current setting is up and down 2 screens
    try {
      this.IntersectionObserver = this.createIntersectionObserver()
      this.IntersectionObserver.relativeToViewport({
        top: showNum * windowHeight,
        bottom: showNum * windowHeight
      }).observe(`#list-item-The ${this.data.uniqueId}`, res => {
        let { intersectionRatio } = res
        if (intersectionRatio === 0) {
          console.log('[uninstall] #'.this.data.uniqueId, 'Out of range, unload from page')
          this.setData({ showSlot: false})}else {
          console.log('[enter] #'.this.data.uniqueId, 'Reach the desired range, render into the page')
          this.setData({
            showSlot: true.height: res.boundingClientRect.height
          })
        }
      })
    } catch (error) {
      console.log(error)
}
...
Copy the code

The demo sample

Gets the custom component node instance

Note the use of. In (this)

Component({
  queryMultipleNodes (){
    const query = wx.createSelectorQuery().in(this)
    query.select('#the-id').boundingClientRect(function(res){
      res.top // The upper boundary coordinates of the #the-id node in this component
    }).exec()
  }
})
Copy the code

Unusual parameter

  1. EventChannel Event communication channel between pages

Available only in wx.navigateto ()

The sample code

wx.navigateTo({
  url: 'test? id=1'.events: {
    // Adds a listener to the specified event to get data from the opened page to the current page
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // Send data to the opened page via eventChannel
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test'})}})Copy the code
//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // Listen for acceptDataFromOpenerPage events to get data sent from the previous page to the current page via eventChannel
    eventChannel.on('acceptDataFromOpenerPage'.function(data) {
      console.log(data)
    })
  }
})
Copy the code