wxtools

Commonly used tools in WeChat development are currently mainly enhancements to network request methods and Promisify for almost all asynchronous operations.

• Install:

 yarn add @evolify/wxtools

or

 npm i @evolify/wxtools

• Mini program network request

Encapsulate wx.request into Promise style. When using it, just use get, post and other methods. Supports adding interceptors, and can set header, token, baseUrl, etc. separately. The following takes the post method as an example.

• Import js file:

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

• Configure Request, usually configured in the mini program App.js>onLaunch method

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

• Set token after successful login

   req . token ( token )

• Make a network request

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

• The use of asynchronous operation Promise

Many operations in wx api are asynchronous, and basically the parameter forms are similar. Here, Promise is encapsulated, and the method name and parameters are consistent with the official api, except that success and fail callbacks do not need to be passed in the parameters. Take showToast as an example and make a simple comparison:
General usage:

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

Promise usage:

 import { Wx } from '@evolify/wxtools'

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

The usage of other APIs is the same. For methods, parameters, and return values, please refer to the official documentation. If there are errors or missing items, please feel free to raise an issue.

• Promisify

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

• scheduled task queue

  In some scenarios, we need to define a sequence of delayed tasks. For example, in terms of interface animation, some elements enter the scene one after another with a certain interval. At this time, if we use setTimeout directly, we will encounter the problem of destroying hell. The code It's ugly and difficult to maintain. A tool is encapsulated here to solve such problems. For detailed introduction, please refer to the article: js scheduled task queue. The usage is as follows:

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