wxtools

Les outils couramment utilisés dans le développement de WeChat sont actuellement principalement des améliorations des méthodes de requête réseau et Promisify pour presque toutes les opérations asynchrones.

• Installer:

 yarn add @evolify/wxtools

ou

 npm i @evolify/wxtools

• Demande de réseau de mini-programme

Encapsulez wx.request dans le style Promise. Lorsque vous l'utilisez, utilisez simplement get, post et d'autres méthodes. Prend en charge l'ajout d'intercepteurs et peut définir l'en-tête, le jeton, la baseUrl, etc. séparément. Ce qui suit prend la méthode post comme exemple.

• Importer le fichier js :

   import { request as req } from '@evolify/wxtools'

• Configure Request, généralement configuré dans le mini programme App.js> méthode onLaunch

    configReq ( ) {
      //配置baseUrl和拦截器，baseUrl例如 /api
      req . baseUrl ( config . serverUrl )
        . interceptor ( res => {
          switch ( res . data . code ) {
            case 401 : 
              wx . showToast ( {
                icon : 'loading' ,
                title : '重新登录' ,
              } )
              this . login ( )
              return false ;
            case 0 :
              return true ;
            default :
              wx . showToast ( {
                title : '操作失败' ,
              } )
              return false ;
          }
        } )
    } ,

• Définir le jeton après une connexion réussie

   req . token ( token )

• Faire une demande de réseau

   req . post ( '/goods' , data , header )
  	. then ( res => res . data . data )
  	. then ( data => {
      	wx . showToast ( {
              title : '创建成功'
          } )
  	} )

• L'utilisation du fonctionnement asynchrone Promesse

De nombreuses opérations dans l'API wx sont asynchrones et, fondamentalement, les formes de paramètres sont similaires. Ici, Promise est encapsulée et le nom de la méthode et les paramètres sont cohérents avec l'API officielle, sauf que les rappels de réussite et d'échec n'ont pas besoin d'être transmis dans les paramètres. . Prenez showToast comme exemple et faites une comparaison simple :
Utilisation générale :

 wx . showToast ( {
  title : '成功' ,
  icon : 'success' ,
  duration : 2000 ,
  success : ( ) => {
    console . log ( '调用成功' )
  } ,
  fail : err => {
    console . error ( '调用失败' , err )
  }
} )

Utilisation de la promesse :

 import { Wx } from '@evolify/wxtools'

Wx . showToast ( {
  title : '成功' ,
  icon : 'success' ,
  duration : 2000 ,
} ) . then ( ( ) => {
  console . log ( '调用成功' )
} ) . catch ( err => {
  console . error ( '调用失败' , err )
} )

L'utilisation des autres API est la même. Pour les méthodes, les paramètres et les valeurs de retour, veuillez vous référer à la documentation officielle. S'il y a des erreurs ou des éléments manquants, n'hésitez pas à signaler un problème.

• Promettre

   import { promisify } from '@evolify/wxtools'
  
  function func ( {
    param1 ,
    param2 ,
    success : ( ) => { } ,
    fail : ( ) => { }
  } ) {
    // do something
    success ( )
  }
  
  const promisifyFunc = params => promisify ( func , params )
  
  // then you can use
  promisifyFunc ( data )
  	. then ( res => {
    		// on success
  	} )
  	. catch ( err => {
    	// on failed
  } )
  // instand of 
  func ( {
    ... data ,
    success : res => {
      
    } ,
    fail : res => {
      
    }
  } )

• file d'attente des tâches planifiées

  Dans certains scénarios, nous devons définir une séquence de tâches retardées. Par exemple, en termes d'animation d'interface, certains éléments entrent dans la scène les uns après les autres avec un certain intervalle. À ce moment-là, si nous utilisons directement setTimeout, nous rencontrerons le problème. problème de détruire l'enfer. Le code C'est moche et difficile à maintenir. Un outil est encapsulé ici pour résoudre de tels problèmes. Pour une introduction détaillée, veuillez vous référer à l'article : file d'attente des tâches planifiées js. L'utilisation est la suivante :

   import { Schedule } from '@evolify/wxtools'
  
  new Schedule ( ) . task ( task1 )
    . delay ( 1000 ) . task ( ( ) => this . setData ( { title : 'Shedule' } ) )
    . delay ( 500 ) . task ( task3 )