WeChat applet development practical skills: data transmission and storage

Combining the various problems I encountered in my daily development and browsing the solutions to various problems, I have summarized some skills and knowledge points that I often use in daily development. I hope you will give me some advice.

1. Short-life data storage

It is recommended to store the data from the start of the applet to the complete shutdown in the app.js folder, and reference app.js:

const app =getApp();

Assume that Value is a piece of data that is frequently used in the life cycle of the Mini Program, such as a token for requesting an API, a dynamic token, etc. Then you can assign this value to the global variable. In fact, globalData in app.js is not the only global variable, you can define your own data set.

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

It is very simple to assign a value to the token in app.js. As long as the page references app.js

app.eduOS.token = Value;

This data exists for a long time from the start of the mini program to the complete closure of the background, and can be modified as needed. The Value can be an object.

2. Long life cycle or privacy data storage

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

Life cycle of local cache: The mini program is started to be used-----> The mini program is completely removed from the usage list.

How to set cache in applet:

wx.setStorage({
            key: 'educookie',
            data: {
              xh: that.data.xh,
              pwd: that.data.pwd
            }
          })

How the mini program obtains the cache:

 var that = this;
 wx.getStorage({
      key: 'educookie',
      success: function(res) {
        that.setData({xh:res.data.xh,pwd:res.data.pwd});
      },
    })

For example, if you want to save the user's login information but not the user's private data, you can use this method.

Or it is a non-time-sensitive data, which can be stored in this way.

3. Dynamic information or configuration information storage

Save the user's configuration information and quickly complete configuration synchronization when changing mobile phones.

If a merchant’s mini program needs to modify recommended products, revise content, or add activities, it is impossible to rewrite it every time and then have the mini program review it again.

For this purpose, this information can be stored in the backend server.

Take a carousel billboard of a mini program as an example:

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

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

wx.request({
 url:'XXX',
 data:{},
 success(res){
  that.setData({
   adList:res.data
  })
 }
})

In a similar way, dynamic control or cloud synchronization of some data can be achieved.

4. Data transfer between pages

1. URL parameterization

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

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

//Get onLoad(options){
 console.log(options.param1);//value1
}

You can refer to the Get form parameter passing method in the Http request to write the parameter passing between pages.

2.Storage form delivery

If too much data needs to be transmitted, it can be transmitted through Map<key, Storge>. For details, please refer to the official documentation.

wx.setStorage({
  key:'xxx',
  data:mydata
})
//Get wx.getStorgeSync('')

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

wx.removeStorage({
  key: 'xxx',
  success(res) {
    console.log(res)
  }
})

3. Use global variables as an intermediary

const app = getApp();
page({
 app.globalData.isBackvalue = true; //Confirm that it is the returned value app.globalData.tmpData = value; //The value you want to pass, you can also set the cache })

Get on the returned page

const app = getApp();
...
onShow(){
  if(app.globalData.isBackValue){
   this.setData({
    XXX:app.globalData.tmpData
   })
   //Or assign values ​​by getting the cache method}
}

4. Page stack

This method can assign values ​​to all pages pushed into the stack. Students with professional experience can understand it as pushing/popping the DFS traversal of the tree, and all pages in the stack can transfer data.

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

5. Communication Channel EventChannel

Tips (How to understand the communication pipeline): You can think of the pipeline as a form of information transmission by url or storage, but it is encapsulated in the form of Object.

A page delivery

wx.navigateTo({
      url: 'Page B',
      success:res=>{
        res.eventChannel.emit('channeldata', {name:'kindear'})
      }
})

B page reception

  onLoad: function (options) {
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.on('channeldata', data => {
      console.log(data)
        //Print successfully {name:'kindear'}
    })
  }

Summarize

This is the end of this article about practical skills in WeChat mini-program development - data transmission and storage. For more relevant WeChat mini-program data transmission and storage content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!