wxtools

เครื่องมือที่ใช้กันทั่วไปในการพัฒนา WeChat ปัจจุบันส่วนใหญ่เป็นการปรับปรุงวิธีการร้องขอเครือข่ายและสัญญาว่าจะดำเนินการแบบอะซิงโครนัสเกือบทั้งหมด

• ติดตั้ง:

 yarn add @evolify/wxtools

หรือ

 npm i @evolify/wxtools

• คำขอเครือข่ายมินิโปรแกรม

แค็ปซูล wx.request เป็นรูปแบบ Promise เวลาใช้งานก็แค่ใช้ get, post และวิธีอื่นๆ รองรับการเพิ่มตัวดักจับ และสามารถตั้งค่าส่วนหัว โทเค็น baseUrl ฯลฯ แยกกันได้ ต่อไปนี้ใช้วิธีโพสต์เป็นตัวอย่าง

• นำเข้าไฟล์ js:

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

• กำหนดค่าคำขอ โดยปกติจะกำหนดค่าในมินิโปรแกรม App.js>วิธี 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 ;
          }
        } )
    } ,

• ตั้งค่าโทเค็นหลังจากเข้าสู่ระบบสำเร็จ

   req . token ( token )

• ทำการร้องขอเครือข่าย

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

• การใช้สัญญาการดำเนินการแบบอะซิงโครนัส

การดำเนินการหลายอย่างใน wx api เป็นแบบอะซิงโครนัส และโดยพื้นฐานแล้วรูปแบบพารามิเตอร์จะคล้ายกัน ในที่นี้ Promise ได้รับการห่อหุ้ม และชื่อวิธีการและพารามิเตอร์สอดคล้องกับ API อย่างเป็นทางการ ยกเว้นว่าไม่จำเป็นต้องส่งการเรียกกลับที่สำเร็จและล้มเหลวในพารามิเตอร์ . ยกตัวอย่าง showToast และทำการเปรียบเทียบง่ายๆ:
การใช้งานทั่วไป:

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

การใช้งานสัญญา:

 import { Wx } from '@evolify/wxtools'

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

การใช้งาน API อื่นๆ จะเหมือนกัน สำหรับวิธีการ พารามิเตอร์ และค่าที่ส่งคืน โปรดดูเอกสารอย่างเป็นทางการ หากมีข้อผิดพลาดหรือรายการขาดหายไป โปรดอย่าลังเลที่จะแจ้งปัญหา

• สัญญา

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

• คิวงานที่กำหนดเวลาไว้

  ในบางสถานการณ์ เราจำเป็นต้องกำหนดลำดับของงานที่ล่าช้า ตัวอย่างเช่น ในแง่ของภาพเคลื่อนไหวของอินเทอร์เฟซ องค์ประกอบบางอย่างจะเข้าสู่ฉากทีละรายการในช่วงเวลาหนึ่ง ในเวลานี้ หากเราใช้ setTimeout โดยตรง เราจะพบกับ ปัญหาการทำลายนรก รหัสมันน่าเกลียดและรักษายาก เครื่องมือถูกรวมไว้ที่นี่เพื่อแก้ไขปัญหาดังกล่าว สำหรับการแนะนำโดยละเอียด โปรดดูบทความ: คิวงานที่กำหนดเวลาไว้ของ js มีดังต่อไปนี้:

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