WeChat applet "surgical" Interface Package

Foreword

　　Recent studies are small programs, I can!

demand

　　Before vue are used to develop the project, I deliberately interface module package a bit. Feeling can also record it

　　Although the interface simple small program, but repeated calls so much, does not seem professional (seriousness of nonsense)

　　There is a small program met those pits and tips) Continued

A small program interface Request Process

　　Simply draw a flow chart

Second, domain configuration

　　Be sure to configure https, the domain name must be configured on the applet is the domain name for the record, there is certainly more than the server to TLS1.2

Three , micro-channel open developer tools, open your project, opening the details. Confirm whether the domain eleven pairs. Otherwise it will fail to compile oh

Fourth, the new api.js http.js in your project file utils file

Five, http.js the code (copy past it)

= module.exports { 
  HTTP (URL, Method, the params) { 
    the let token = 'token' // Get token, token and acquires its own signature, and the signature token for each interface to be transmitted data indicative of 
    the let = Sign 'Sign' / / Get signature (background defined by how, on what pass) 
    the let data = { 
      token, 
      Sign 
    } 
    iF (params.data) { // here a judgment whether there is data, the front end of the params represents data to be passed, the params is an object , there are three sets of key-value pairs, data: data indicating a request to send, success: success callback, fail: failed callback, these three fields can not be missing, the remaining fields will be ignored 
      for (the let Key in params.data) { // here pass over the determined parameter is null, the deleted property 
        IF (params.data [Key] == null || params.data [Key] == 'null') {
           Delete params.data [Key] 
        } 
      } 
      Data = {... Data, ... params.data} 
    } 
    wx.request ({ 
      URL: 'you configure domain' + URL, // is the prefix splicing, this interface domain name is an open interface that can be accessed 
      Method,: == Method, 'post' 'post':? 'get', // determine the type of request, in addition to the value equal to 'post', the other values are treated as get other types of requests It may be added by their own 
      Data, 
      header: {
         'Content-type': 'file application / JSON' 
      }, 
      Success (RES) { 
        params.success && params.success (res.data) 
      }, 
      Fail (ERR) { 
        the params.fail && params.fail(err)
      }
    })
  }
}

Six, api.js (copy code again on it)

// In this which defines all the interfaces, all the interfaces of a document, and easy to maintain 
Import} from {http './http'; // introduced just packaged http module, Import belonging syntax for ES6, developer tools micro-channel must open ES6 switch ES5 option 

function femaleNameApi (the params) { // request random ancient poetry Interface 
  HTTP ( 'Project / projectInfos', 'GET', the params)   // interface to the routing address request and a request transmitting method here 
} 

// each a function interface definition, and then to expose, the logic code for calling 

function novelApi (the params) { // novel recommended interfaces 
  HTTP ( '/ novelApi', 'GET' , the params) 
} 

Export default { // expose interfaces 
  femaleNameApi, 
  novelApi 
}

Seven, in index.js call (Where do you want to use to where to use)

// The index.js 
Import from HTTP '../../utils/api' // introduced api interface management file 

Page ({ 
  the onLoad: function () { 

    the this .getData () 
  }, 

  the getData () { 
    http.femaleNameApi ( { // call interface, passing parameters 
      Data: { 
        token: '470712FF0FE2392D6CB6D8A6560805CC' 
      }, 
      success: RES => { 
        the console.log ( 'interface request success' , RES)
         the this .setData ({ 
          femaleList: res.data 
        }) 
      } , 
      Fail: ERR => { 
        the console.log (ERR)
      }
    })
  }
})

Eight, open the console

　　If you are so wrong

　　Forget that showRequestInfo () that the (beginning, thought it was api interfaces), direct input method in the console on it, you can see the error message details

　　It means you have a server certificate, and TLS version greater than or equal to 1.2

　　(I put my background crazy, ha ha ha ha ha ha ha)

　　If you like this, congratulations interfaces success of it

Nine, Fannie type summary

　　More than two files, regarded as template interface package, which you put a project like this which can be configured

　　One thing once and for all the meaning of

　　But it's not perfect package

　　Without my vue project package is good, another day to transform what

　　Want to help you, bye slightly!

WeChat applet "surgical" Interface Package

Guess you like