This article is simultaneously published on my blog: xueshiming.cn

Tips: Let’s start with some dry goods

Wx: Keys are more than just unique identifiers

So when the list data changes and you start rendering the page again, the items in the list can keep their state so for example in the input component, after you input something and after rendering the page, you don’t want the input to change, you need to use this property and this property, when you’re rendering the page again, Improve the efficiency of page rendering performance by ensuring that components with keys are reordered rather than re-rendered

If wx:key is not provided, a warning is reported. If you know that the list is static or you do not care about its order, you can ignore it.

A Block is a wrapper element, not a component, and is not visible to the page after rendering
Wx: Difference between if and Hidden

Wx: If has a partial rendering process when switching, so as to ensure that conditional block rendering can be destroyed and re-rendered, with higher switching consumption hidden always rendering. You can control show and hide on the view and have higher initial rendering costs, so use hidden if elements switch frequently

WXML supports file references

Import: Reference only the template content blocks that we define the template file

template

include
include

Compare Wxss with CSS

Dimensions in RPX

A few concepts:

  • Equipment pixel: The smallest physical unit of display that the device can control. The smallest physical unit is a fixed point on the screen
  • CSS pixel: External programming concepts, logical pixels used in CSS code
  • PPI/DPI: Number of pixels per inch

  • DPR: The ratio of device pixels to CSS pixels in a certain direction of the phone

Although WXSS supports REM, we know that REM ADAPTS according to the fontSize of the HTML root element. WXSS cannot directly manipulate HTML style attributes, so rem adaptation is invalid. RPX was created to make the screen 750rpx wide so that we could adapt to the screen width, RPX and REM were implemented in a similar way, and RPX eventually converted to REM

Style import

  • External styles introduced: @import ‘./ss.wxss ‘

  • Inline style introduction: Style is generally used to write dynamic styles

The selector

priority

! import

Applets running mechanism

There are two startup modes for small programs: cold startup and hot startup

  • Hot start: if the user has opened a small program, in a certain period of time to open the small program again, this time we do not need to restart, this need to put our background open small program switch to the foreground to use.
  • Cold start: When the user opens the mini program for the first time or opens it again after being destroyed by wechat, the mini program needs to be reloaded and started.

When will applets voluntarily be destroyed?

  1. After entering the background, the client will help us maintain a state for a certain period of time. After more than five minutes, it will be actively destroyed by wechat
  2. When we receive system alarms twice in a short period of time, wechat will actively destroy them. The short interval is 5s

Applets update mechanism:

The small program will be loaded asynchronously when the version is updated during cold startup. Help us download the latest version of the code package, and use the wechat local version of the code package to start at the same time, that is to say, the latest code package will be loaded in the next startup of the small program. If you prefer to use the latest version of the code package, we can use the API to handle this

wx.getUpdateManager

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function(res) {/ / request of the new version information callback. The console log (res) hasUpdate)}) updateManager. OnUpdateReady (function () {
  wx.showModal({
    title: 'Update Prompt',
    content: 'The new version is ready. Do you want to restart the application? ',
    success(res) {
      if(res. Confirm) {/ / download the new version of good, call applyUpdate application. The new version and restart updateManager applyUpdate ()}}})}) updateManager. OnUpdateFailed (function() {// New version download failed})Copy the code

Applets loading mechanism:

Small program start flowchart inside:

cdn
webView
cdn

Applet application and page lifecycle:

Applets application lifecycle: onLaunch, onShow, onHide, onError

When entering the applet for the first time, get the code package from CDN or applet locally and inject it into the running environment, the wechat client will send the APP instance of app.js to the onLaunch event, and the onLaunch method in the parameter of app constructor of app.js will be called in the logical layer. When the user uses the home widget or clicks the close button of the applets in the upper right corner to close the applets, the applets are not destroyed directly. At this time, the onHiede method in the parameters of the APP constructor will be called. When we open the applets again, wechat will call the applets and the onShow method will be called. OnError is called when the applet script finds an error, or when the API call fails.

Applets page lifecycle: onLoad, onShow, onReady, onHide, onUnload,

OnLoad will only be called once before the page is destroyed, onShow will be called in the page instance when the page is first rendered, onReady will be called once before the page is destroyed and then the logic layer and the view layer will interact, When we open a new page on the current page, the current page fires onHide, and if we close the current page, onUnload fires

The view thread, responsible for the page view, and the service that processes the data, as well as the service thread, AppService, work together to complete the lifecycle calls

Applets event model

1. Event capture phase

The bound event is passed down from the outermost node to the target node element, checking in turn whether the node it passes through is bound to a listening callback of the same event type, and executing the corresponding event callback if so

2. Event processing phase

When the event reaches the target node, it fires the listener callback function bound to the target node

3. Event bubbling phase

Events bubble up from the target node to the outermost node, checking to see if any of the nodes that pass by are bound. A callback function of the same event type will be executed if it is

Target property: current component that triggers the event currentTarget property: source component that triggers the event

Eg: If you have an outer view and an inner view nested, bind the click event, target the outer view’s event object, and currentTarget the lower view’s event object

  • typeTrigger type of trigger event
  • timestampThe timestamp that triggers the event
  • targetThe root component of the triggering event, including the collection of id custom properties of the root component of the triggering event
  • currenTargetEvent binding amount of the current component, including the current component’sid, type,dataA collection of custom properties
  • touchesIt’s an array, one for each elementtoucH object that identifies the touch point and information currently on the screen
  • changedTouchesIs a piece of data that identifies the changed touch point, that is, the change of the current touch point from there to nothing or from nothing to there
  • detailIdentifies the data that each event carries, the click event: the ‘touchpoint distance from the top left corner of the document’ media event, the playback state when the event is triggered, and the timestamp

Small program running environment:

The running environment of javascript scripts in different environments is different. Wechat applet runs on three ends: iOS (iPhone/iPad), Android and developer tools for debugging.

The three-end script execution environment and the environment used to render non-native components are different:

  • On iOS, the javascript code of the logic layer of small program runs in JavaScriptCore, and the view layer is rendered by WKWebView. The environment is iOS8, iOS9, iOS10.

  • On Android,

    • Old version, small program logic layerjavascriptRunning codeX5 JSCoreThe view layer is made up ofX5Based on theMobile Chrome 57Kernel to render
    • New version, small program logic layerjavascriptThe code runs onV8The view layer is developed by the userXWebBased on the engineMobile Chrome 67 kernel to render;

  • On the development tools, the javascript code for the applet logic layer runs in nw.js and the view layer is rendered by Chromium 60 Webview.

Conclusion: while we are developing small programs, we should not forget to understand some fundamental and detailed problems, because this is the key to improvement. to be an engineer,not a coder.