Detailed explanation of native applet life cycle, route jump, local storage, etc.

Detailed explanation of native applet life cycle, route jump, local storage, etc.

Detailed explanation of APIs such as life cycle, route jump, local storage, etc.
Native Mini Program is a type of mini program developed on the WeChat mini program platform. It is different from the traditional mini program development method (based on the mini program framework). Native mini programs are more flexible, but also require developers to handle more details and logic on their own. The following is a detailed summary of some common APIs and functions of native applets:

Mini program api - life cycle

1. Application life cycle

1. onLaunch

When the applet is initialized, onLaunchthe life cycle function will be triggered. Generally used to initialize and obtain global data, such as obtaining user information, checking login status, etc.

App({
    
    
  onLaunch: function () {
    
    
    // 小程序初始化时触发
    // 进行全局数据的初始化和获取
  }
})

2. onShow- Start the applet or switch to the foreground

onShowLifecycle functions are triggered when the applet is started or switched from the background to the foreground . At this stage, you can perform some operations that require real-time updates, such as obtaining user location, updating data, etc.

App({
    
    
  onShow: function () {
    
    
    // 小程序启动或切换到前台时触发
    // 执行一些需要实时更新的操作
  }
})

3. onHide-Switch the mini program to the background

When the applet switches to the background, onHidethe life cycle function is triggered. At this stage, some cleanup operations can be performed, such as saving user data, stopping timers, etc.

App({
    
    
  onHide: function () {
    
    
    // 小程序切换到后台时触发
    // 进行一些清理操作
  }
})

4. onError- An error occurred in the mini program

When an error occurs in the applet, onErrorthe life cycle function will be triggered. Generally used to capture and handle exceptions when mini programs are running, such as network request failures, data parsing errors, etc.

App({
    
    
  onError: function (error) {
    
    
    // 小程序发生错误时触发
    // 处理小程序运行时的异常情况
  }
})

2. Page life cycle

1. onLoad

When the page loads, onLoadthe lifecycle functions are triggered. Generally, page initialization and data loading operations are performed at this stage, such as requesting data, initialization parameters, etc.

Parameters can be obtained in wx.navigateToand wx.redirectToand<navigator/>query

Page({
    
    
  onLoad: function (options) {
    
    
    // 页面加载时触发
    // 进行页面初始化和数据加载的操作
  }
})
 // options：页面跳转过来携带的参数对象
 onLoad(options) {
    
    
    console.log('App onLoad');
  },

2. onShow

When the page is displayed, onShowthe life cycle function is triggered. Generally used to perform some operations that require real-time updates, such as updating data, refreshing the interface, etc.

The page is displayed. It is called every time the page is opened.

Page({
    
    
  onShow: function () {
    
    
    // 页面显示时触发
    // 执行一些需要实时更新的操作
  }
})

3. onReady

When the initial rendering of the page is completed, onReadythe life cycle function will be triggered. Generally used to perform some operations that can only be performed after the initial rendering of the page, such as operating DOM elements, binding events, etc.

For interface settings, please wx.setNavigationBarTitleset onReadythem later.

Page({
    
    
  onReady: function () {
    
    
    // 页面初次渲染完成时触发
    // 执行一些只能在页面初次渲染完成后才能进行的操作
  }
})

6. onHide

When the page is hidden, onHidethe life cycle function is triggered. Generally used to perform some operations that need to be processed when the page is hidden, such as stopping animations, clearing timers, etc.

Called when navigateToor bottom tabswitches.

Page({
    
    
  onHide: function () {
    
    
    // 页面隐藏时触发
    // 执行一些页面隐藏时需要处理的操作
  }
})

7. onUnloadPage unloading

When the page is unloaded, onUnloadthe life cycle function is triggered. It is generally used to perform some operations that need to be processed when the page is unloaded, such as releasing resources, canceling subscriptions, etc.

wx.navigateBack, wx.relanch, wx.redirectTo will all be called when returning to the previous page

Page({
    
    
  onUnload: function () {
    
    
    // 页面卸载时触发
    // 执行一些页面卸载时需要处理的操作
  }
})

3. Component life cycle

The component life cycle refers to the entire process from creation to destruction of custom components in a mini program. The component life cycle of a mini program mainly includes the following key stages:

1. created

When a component instance is created, createdlifecycle functions are triggered. At this stage, some initialization operations of component instances can be performed.

Component({
    
    
  created: function () {
    
    
    // 组件实例被创建时触发
    // 进行组件实例的初始化操作
  }
})

2. attached- The component is added to the page node tree

attachedLifecycle functions are triggered when a component is added to the page node tree . Generally used to perform some component loading and rendering operations.

Component({
    
    
  attached: function () {
    
    
    // 组件被添加到页面节点树时触发
    // 执行一些组件加载和渲染的操作
  }
})

3. ready- The initial rendering of the component is completed

When the component is rendered for the first time, readythe life cycle function is triggered. Generally used to perform some operations that can only be performed after the initial rendering of the component is completed.

Component({
    
    
  ready: function () {
    
    
    // 组件初次渲染完成时触发
    // 执行一些只能在组件初次渲染完成后才能进行的操作
  }
})

4. detached- The component is removed from the page node tree

detachedLifecycle functions are triggered when a component is removed from the page node tree . Generally used to perform some component uninstallation and cleaning operations.

Component({
    
    
  detached: function () {
    
    
    // 组件被从页面节点树移除时触发
    // 执行一些组件卸载和清理的操作
  }
})

Mini program api-jump page

1. Tag jump

   <navigator url="........"></navigator>
   

2. wx.navigateTo

After the jump, there is a small return arrow in the upper left corner. Click to return to the original page.

 wx.navigateTo({
    
    
      url: '/pages/calculator/calculator',
    })

3. wx.redirectTo

Close the current page and jump to a page in the application. There is no return arrow in the upper left corner after the jump.

 wx.redirectTo({
    
    
      url: '/pages/calculator/calculator',
    })

4. wx.switchTab

Jump to tabBarthe page and close all other non- tabBar pages; this method can only jump to tabbarthe page.

 wx.switchTab({
    
    
      url: '/pages/calculator/calculator',
    })

5. wx.reLaunch

Close all pages and open a page within the app. There will be no return arrow in the upper left corner

 wx.reLaunch({
    
    
      url: '/pages/calculator/calculator',
    })

WeChat applet local storage

• Asynchronous storage: wx.setStorage

  • wx.setStorage({
            
            
      key:"key",
      data:"value",
      encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
      success() {
            
            
        //设置本地存储后的回调
      }
    }
    

• Synchronous storage: wx.setStorageSync stores a data, complex type data does not require JSON.stringify processing

• Asynchronous acquisition: wx.getStorage

• Synchronous acquisition: wx.getStorageSync reads local key data. Complex type data does not require JSON.parse processing.

• wx.removeStorageSync(key) deletes local key data

• wx.clearStorageSync() clears all local data

Summary: The difference
wx.setStoragebetween wx.setStorage and wx.setStorageSyncis:
wx.setStorage is asynchronous storage – no matter whether the method is executed successfully or not, it will continue to execute.
wx.setStorageSync is synchronous storage – the synchronous method must be processed before the program can continue to execute. Use
asynchronous, performance It will be better; and with synchronization, the data will be more secure.

The above is the native applet life cycle, route jump, local storage, etc., thank you for reading when requesting detailed explanations.
If you encounter other problems, you can discuss and learn with me privately.
If it is helpful to you, please add it to 点赞your collection. Thank you~!
Follow the favorite blog author for continuous updates...