wxtools

Häufig verwendete Tools in der WeChat-Entwicklung sind derzeit hauptsächlich Verbesserungen der Netzwerkanforderungsmethoden und Promisify für fast alle asynchronen Vorgänge.

• Installieren:

 yarn add @evolify/wxtools

oder

 npm i @evolify/wxtools

• Miniprogramm-Netzwerkanfrage

Kapseln Sie wx.request im Promise-Stil. Wenn Sie es verwenden, verwenden Sie einfach get, post und andere Methoden. Unterstützt das Hinzufügen von Interceptoren und kann Header, Token, BaseUrl usw. separat festlegen. Im Folgenden wird die Post-Methode als Beispiel verwendet.

• js-Datei importieren:

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

• Konfigurieren Sie die Anforderung, die normalerweise im Miniprogramm App.js> onLaunch-Methode konfiguriert wird

    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 ;
          }
        } )
    } ,

• Token nach erfolgreicher Anmeldung setzen

   req . token ( token )

• Stellen Sie eine Netzwerkanfrage

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

• Die Verwendung des asynchronen Betriebs Promise

Viele Vorgänge in der WX-API sind asynchron und die Parameterformen sind grundsätzlich ähnlich. Hier ist Promise gekapselt, und der Methodenname und die Parameter stimmen mit der offiziellen API überein, mit der Ausnahme, dass Erfolgs- und Fehlerrückrufe nicht in den Parametern übergeben werden müssen . Nehmen Sie showToast als Beispiel und machen Sie einen einfachen Vergleich:
Allgemeine Verwendung:

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

Verwendungsversprechen:

 import { Wx } from '@evolify/wxtools'

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

Die Verwendung anderer APIs ist dieselbe. Informationen zu Methoden, Parametern und Rückgabewerten finden Sie in der offiziellen Dokumentation. Bei Fehlern oder fehlenden Artikeln können Sie gerne ein Problem melden.

• Versprechen

   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 => {
      
    }
  } )

• Warteschlange für geplante Aufgaben

  In einigen Szenarien müssen wir eine Reihenfolge verzögerter Aufgaben definieren. In Bezug auf die Schnittstellenanimation treten einige Elemente nacheinander in einem bestimmten Intervall auf. Wenn wir zu diesem Zeitpunkt setTimeout direkt verwenden, werden wir darauf stoßen Problem der Zerstörung der Hölle. Der Code ist hässlich und schwer zu warten. Hier ist ein Tool zur Lösung solcher Probleme gekapselt. Eine detaillierte Einführung finden Sie im Artikel: js geplante Aufgabenwarteschlange.

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