Remember a uniapp experience

Preface

I'm making one these days app, For playing games , It uses uni+uView Component library for . This component library is added halfway , Recommended by my younger brother , I think it will be much more convenient if there are components , And they are introduced on demand , No extra space , Good , I just used it directly .

Use feeling ： I feel this technology stack is similar to vue+element About the same emm, It's some official api It's not quite the same , It's still easy .

Component library portal ：

 uView -  Multi platform rapid development UI frame  

however , Unfamiliar with components api And parameters , Let me step on the pit , Very afflictive emm, Or write a record , Long memory .

This time ： Share a hole you stepped on because of carelessness , An experience of self encapsulation

pit ：uView Component library ,uToast Components

Portal ：

Toast  Message tip  

Usage method ：

//  Put this tag on the page
<u-toast ref=&quot;uToast&quot; />
//  If you need a message , Add the following code
this.$refs.uToast.show({
 title: ' Login successful ',
 type: 'success',
 url: '/pages/user/index'
})


Parameters ：

• title
  : The text displayed by the message prompt

• type
  : Topic type , Default is
  default
  （ Altogether 6 Medium theme color ）

• url
  :toast End jump url, Do not fill in or jump

More details api Please click above toast Go to the official website of the component library to see

The pit I met , Just fill in url, He doesn't jump after execution .

Tell me about my general usage ：

After successful login, a message will pop up indicating successful login , After that, jump to a tab Go to the page . But he only gave the pop-up login success , Do not report an error or jump . At that time, people were really stupid , I've found a lot of places , It's also a breakpoint , Everything tells me that everything is normal . So I began to doubt my computer emm, I packed the whole program , Sent it to my younger brother , Let him debug it for me on his computer , The result is consistent with my computer （nice！ That is, the computer is not broken , Can also be used ）, Before I return to the computer after dinner, I'm ready to fight this problem to the death , A screenshot sent by my younger brother made me dull .

you 're right , This is the form . I just know that if this component jumps to tab An additional parameter needs to be configured for the page , Hurry up and add , So I stood up again from the pit .

About toast End jump URL

• If the
  url
  Parameters , stay toast At the end , Will use
  uni.navigateTo
  ( Default ) perhaps
  uni.switchTab
  ( Additional settings are required
  isTab
  by
  true
  )

• If the
  params
  Parameters , It will automatically be in URL These parameters are spliced in the back , The usage is as follows ：

this.$refs.uToast.show({
 title: ' Successful operation ',
 url: '/pages/user/index',
 params: {
 id: 1,
 menu: 3
 }
})


This story tells us , You must feel clearly before using api, Don't learn Ze Ze ！！！

encapsulation uni.getStorage function

This should not be a pit , I just don't think it's very convenient to use （ It seems quite inconvenient ）

Portal ：

uni.getStorage 

Its function is to asynchronously get the specified from the local cache  key  Corresponding content .

My need is to get something from the cache that I have previously stored , But it's OK for me to choose one , If you need to take two at a certain place, you need to write this function twice , Anyway, I feel very troublesome （ Even if CV It's no bother , But in the eyes of programmers , The code similarity is a little high ）, Then why not try to encapsulate it ？

Function as it is ：

uni.getStorage({
 key: 'storage_key',
 success: function (res) {
 console.log(res.data);
 }
});


He is based on

key

, Get the data in the cache , Return the value

res.data

Is the data we need .

The idea is ： Pass a

key

Give it to him , Connect at the same time

res.data

Value

Before transformation ：

uni.getStorage({
 key: 'token',
 success:(res) => {
 console.log('token:'+ res.data)
 this.token = res.data
 }
})
uni.getStorage({
 key: 'username',
 success:(res) => {
 console.log('username' + res.data)
 this.userInfo.username = res.data
 }
})


After transformation ：

getCache(a){
 let b = '';
 console.log('a:'+a)
 uni.getStorage({
 key:a,
 success:(res)=>{
 console.log('res.data:'+res.data);
 b = res.data;
 return res.data;
 }
 })
 return b;
},


It's like this when you need to call ：

let username = this.getCache('username')


Is it very convenient ？

encapsulation ,yyds

Last

Stepping on the pit can be late , But never absent , What we can do is to be careful every time , And make mistakes , The pot you have memorized is recorded in a small notebook , Never do it again .

After all , God also makes mistakes ！

I wish there are fewer programmers in the world bug Well .

Improve the above encapsulation function

I found it when I used it today , Such encapsulation can only be used in a single page , But in a project , I have several places to use , You can only copy and paste .

Then I won't be cv The programmer ？？？

So I continued to package , I want to package it as a component .

cache.js

, I put it on common In the folder

 export function getCache(a){
 let b = '';
 console.log('a:'+a)
 uni.getStorage({
 key:a,
 success:(res)=>{
 console.log('res.data:'+res.data);
 b = res.data;
 return res.data;
 }
 })
 return b;
}


Usage method ：

Just import it on the page that needs to use this function , The method is similar to that we introduce components on demand .

import {getCache} from 'common/cache.js'


Just call directly when using .

this.username = getCache('username')