Operating wechat cache by using wechat low code

In applet development , We often need to consider using wechat cache , For example, write the user information of the applet to the cache , Or write the user's identity information to the cache . So we use the micro build , As a low code tool, can I also operate caching ？

The answer is yes , Cache can also be operated in low code , You can use the low code editor api To use the cache . Maybe you don't understand this concept very well , Let's develop an example , Take a look at how the cache is used .

First, let's take a look at the functions of our example , Daily small programs often have the function of login authorization , Yes, of course , The first time you open a small program, you must log in and authorize it . The next time I open the applet , Because it has been authorized , You don't want to remind users again . At this time, we need to consider putting the user's information into the cache , Get user information directly from the cache the next time the program is loaded .

When the logic is clear , Let's see what our page looks like

Insert picture description here

Insert picture description here

When we are not logged in, we will display a picture icon , Then give a login button , If the authorization is successful, we will display the user's wechat avatar and user nickname , And put the user's information into the cache .

To implement this function, we first define an object of user information in the global variable

Insert picture description here

Type selection object, And set the initial value

Insert picture description here

{
  "city": "",
  "gender": "",
  "openid": "",
  "country": "",
  "language": "zh_CN",
  "nickName": "",
  "province": "",
  "avatarUrl": ""
}

Then in the low code editor , Define a low code method for the current page , Store the obtained user information into the cache

/*
*  It can be done by  $page.handler.xxx  Access the methods defined here 
*  Be careful ： This method is only valid on the page to which it belongs 
*  if necessary  async-await, Please amend it to  export default async function() {}
*/

export default async function({event, data}) {

 
    try {
     wx.getUserProfile({
            desc: ' Used to improve user information ',
            success:async (res) => {
            //const data = await app.cloud.dataSources.userinfo_xpw5sxe.wedaCreate(res);
            console.log("res.userinfo",res.userInfo)
            $page.dataset.state.userinfo = res.userInfo
            wx.setStorage({
              key:"userinfo",
              data:res.userInfo
            })
            $page.dataset.state.userinfo.openid = app.dataset.state.useropenid
            let ret =await app.dataSources.userinfo_xpw5sxe.wedaCreate($page.dataset.state.userinfo);
            console.log(ret)
            }
    })
    //console.log("userinfo",$page.dataset.state.userinfo)
    //const ret = await app.dataSources.userinfo_xpw5sxe.wedaCreate($page.dataset.state.userinfo);
    //console.log(ret)
    } catch (e) {
    console.log(' Error code ', e.code, ' error message ', e.message);
  }
}

The method of storing in the cache is

 wx.setStorage({
              key:"userinfo",
              data:res.userInfo
            })

It is stored in the cache in the form of key value pairs ,key It's a key ,data yes value

After being stored in the cache , We can start in the life cycle function of the applet , Load user information through cache

export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
      try {
        const objData = await app.cloud.dataSources.userinfo_xpw5sxe.getopenid();
        app.dataset.state.useropenid=objData.openid;  // Assign to global variables 
        var value = wx.getStorageSync('userinfo')
        if (value) {
          // Do something with return value
          app.dataset.state.userinfo = value
        }
      } catch (e) {
        // Do something when catch error
      }
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

The following code is used to get the value from the cache

var value = wx.getStorageSync('userinfo')

Then we will synchronize the user variables in the page with the user information in the global variables

export default {
  onPageLoad(query) {
    //console.log('---------> LifeCycle onPageLoad', query)
    $page.dataset.state.userinfo = app.dataset.state.userinfo
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}

This eliminates the need for users to log in every time they open a small program . Make good use of wechat api It can greatly improve our development efficiency , Of course, many functions inside can also improve the quality of our small programs , For example, map function , You can show the location of your shop on the map by passing a longitude and latitude , Others can turn on the navigation with one click , In this way, you will not have to work hard every time before you can tell customers where your store is , It can also improve the daily operation efficiency . It's better to watch it ten times than to do it once , Open your editor and try it .