Data transfer and storage for practical skills in WeChat applet development

Based on the various problems you encounter in your daily development and browse the solutions to various problems, I summarized some common skills and knowledge points you use in daily development. I hope you will correct it.

1. Short life cycle data storage

Data that takes the cycle of starting the applet to completely shut down is recommended to be stored in a folder, cited:

const app =getApp();

Suppose Value is a data that is often used in this life cycle of the applet, such as the token that requests the API, dynamic tokens, etc. Then you can assign this value to the global variable. In fact, it is not only the globalData in it that is global variable, and you can define the dataset yourself.

App({
  eduOS:{
    token:''
  },
  ...
})

It is very simple to assign the token inside, as long as the page references

 = Value;

This data exists for a long time during the startup of the mini program to the complete shutdown of the background. It can also be modified as needed. Value can be an object.

2. Long life cycle or private data storage

The significant feature of this data is that it still exists after the mini program is closed and restarted again, or involves user privacy information but needs to be reused. In this case, local cache can be used to solve this problem.

Lifecycle of local cache: The applet is started -----> The applet is completely removed from the use list.

How to set cache for applets:

({
            key: 'educookie',
            data: {
              xh: ,
              pwd: 
            }
          })

How to obtain cache by applets:

 var that = this;
 ({
      key: 'educookie',
      success: function(res) {
        ({xh:,pwd:});
      },
    })

For example, if you save the user's login information, but cannot save the user's privacy data, you can use this method.

Or it is a non-timed data that can be stored in this way.

3. Dynamic information or configuration information storage

Save user configuration information and quickly complete configuration synchronization when replacing the phone.

Merchant mini program recommends product modification, content correction, or activity added. It is impossible to rewrite every time and then let the mini program review again.

For this, this information can be saved in the backend server.

Take a small program's carousel billboard as an example:

{
 ad1:'imgurl1',
 ad2:'imgurl2',
 ad3:'imgurl3'
}

Store this data in the background server, and request backend data every time the page is refreshed to modify the content.

({
 url:'XXX',
 data:{},
 success(res){
  ({
   adList:
  })
 }
})

In this way, dynamic control of some data or cloud synchronization is completed.

4. Data transfer between pages

Parameterization

The data transfer between pages is generally simple. The life cycle of this type of data is one-time and deleted after use.

({
 url:'../index/index?param1=value1&param2=value2'
})

//Get on the index pageonLoad(options){
 (options.param1);//value1
}

You can refer to the Get form argument transfer method in Http request to write the argument transfer between pages.

Formal delivery

If there is too much data to be transmitted, you can pass it through Map<key, Storge>. For the specific content, please refer to the official documentation.

({
  key:'xxx',
  data:mydata
})
//Get('')

To pass parameters, you only need to pass a key, and use this key to obtain the local cache again in other interfaces. For this type of data, it is recommended to delete the cache immediately after using it.

({
  key: 'xxx',
  success(res) {
    (res)
  }
})

3. Use global variables as mediation

const app = getApp();
page({
  = ture;//Confirm that it is the returned value  = value;//The value you want to pass can also be set to cache})

Get it on the returned page

const app = getApp();
...
onShow(){
  if(){
   ({
    XXX:
   })
   // Or assign values by obtaining cache  }
}

4. Page stack

This method can assign values to all pages that are put into the stack. Students with professional skills can understand that they can traverse the DFS of the tree and enter/out the stack, and all pages in the stack can pass data.

var allpages = getCurrentPages();//Get all page data//The subscript of the stack starts from 0. The first page data loaded on the page is allpages[0], the current page is allpages[ - 1], and the previous page is allpages[ - 2]var prepagedata = allpages[ - 2].data;//Get the data from the previous page.var prepage = allpages[ - 2];//Get the previous page, including data and methods
//Set data method({
 XXX:value //XXX is the parameter in the data of the previous page, and value is the value to be set})
//Calling the function method, the callfunction function must be defined in the prepage before it can be called();

5. Communication pipeline EventChannel

Tips (how to understand communication pipeline): This pipeline can be regarded as a form of URL or storge to transmit information, but it is encapsulated into an Object form

Page A delivery

({
      url: 'Page B',
      success:res=&gt;{
        ('channeldata', {name:'kindear'})
      }
})

Page B Receive

  onLoad: function (options) {
    let eventChannel = ();
    ('channeldata', data =&gt; {
      (data)
        //Print successfully {name:'kindear'}    })
  }

Summarize

This is the article about data transfer and storage of practical skills in WeChat applet development. For more related WeChat applet data transfer and storage content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!